高圖圖例對齊

Question

我已經使用highchart創建了可變餅圖。 在圖例部分，我需要顯示一個名稱和一個值。 所以我把值放在span標簽中。 現在，我無法對齊該值。 外部樣式無效。 一旦檢查了該span標簽，將自動生成dx =“ 0”。 當我們在控制台中編輯該值時，它就起作用了。 但是，當我們將其設置為內部樣式或外部樣式時，它將無法正常工作。

我需要“ dx”的替代樣式屬性。 上面的圖像dx值是自動生成的。

 data: [
    {
    name: 'Name Score  '+'<span class="score-percentage" >99% </span>',
    y: 100,
    z: 99
    }
]

這就是我在代碼中所做的。 使用跨度類“分數百分比”來填充黑色。

Answer 1

為了獲得更大的靈活性，您可以使用Highcharts.SVGRenderer添加值，例如，以這種方式：

chart: {
    type: 'variablepie',
    events: {
        render: function() {
            var legend = this.legend,
                legendItems = this.legend.allItems;

            legendItems.forEach(function(item, i) {
                if (!legend.customLabels) {
                    this.renderer.text(
                        legendValues[i],
                        110,
                        item.itemHeight
                    ).attr({

                    }).add(item.legendGroup)
                }

                item.legendItem.css({
                    color: item.color
                })

            }, this);

            legend.customLabels = true;
        }
    }
},
legend: {
    align: 'left',
    squareSymbol: false,
    padding: 0,
    symbolWidth: 0,
    layout: 'vertical'
},

現場演示： http : //jsfiddle.net/BlackLabel/nsdv659x/

API： https ： //api.highcharts.com/highcharts/chart.events.render