Highcharts中的stackLabels配置

我正在使用highcharts，並且在配置中使用了highcharts。我被要求顯示帶有「分數/滿分」格式的條形圖，例如6出來的10應該是這樣Highcharts中的stackLabels配置

⬛︎⬛︎⬛︎⬛︎⬛︎⬛︎⬜︎⬜︎⬜︎⬜︎6/10

我與6 stacked bar圖表僞造它第酒吧的一部分和第二部分的4。

[解決]不過，我不知道如何顯示stackLabels6/10（看來我只能用它{total}，而我可以在dataLabels使用{point.y}/{point.fullscore}）。

[未解]並且還，當我使用的基本條形圖，dataLabels自動調整其位置（在我的情況下，dataLabels將顯示在杆的右邊緣的左側）。但是，我應該如何強制stackLabels顯示？

This answer指出，沒有足夠的空間stackLabels顯示，解決的辦法是使max價值更大，留有一定的空間吧。然而，這個解決方案對我來說並不高雅，而且因爲我的條形圖是水平的，標籤應該很長。

任何幫助將不勝感激！提前致謝！

來源

2016-01-22 iplus26

要回答第二個問題的想法：

您可以設置yAxis.stackLabels.crop爲false，那麼標籤將始終呈現。這些標籤不會出現在繪圖區域內，但會顯示在外面的某處。 stackLabels不是dataLabels - dataLabels有選項justify，這會強制標籤在繪圖區域內呈現。

然而，在Highcharts你可以訪問這些標籤，並將其移動（這就是爲什麼需要crop設置爲false - 反正渲染標籤），這裏是簡單的POC：

function updateStacks() { 
    var chart = this, 
    H = Highcharts, 
    padding = 15, 
    item, 
    bbox; 

    for (var stackName in chart.yAxis[0].stacks) { 
    for (var itemName in chart.yAxis[0].stacks[stackName]) { 
     item = chart.yAxis[0].stacks[stackName][itemName]; // get stack item 
     bbox = item.label.getBBox(true); // get label's bounding box 

     // if label is outside, translate it: 
     if (bbox.width + bbox.x > chart.plotWidth) { 
     // add some poding, for a better look&feel: 
     item.label.translate(-bbox.width - padding); 
     } 
    } 
    } 
}

現在只需使用該方法在load和redraw事件，在這裏你是：

chart: { 
    type: 'bar', 
    events: { 
    redraw: updateStacks, 
    load: updateStacks 
    } 
},

和現場演示：http://jsfiddle.net/awe4abwk/ - 讓我知道如果事情是不明確。

PS：您的回答爲formatter爲stackLabels很好！

來源

2016-01-22 15:07:27

Thx！對不起，這麼晚回覆！儘管我現在不需要它，但它按我的意願工作。 – iplus26

使用格式化程序更改默認堆棧標籤。您可以使用this.axis訪問軸標籤。

stackLabels: { 

    enabled: true, 
    formatter: function() { 
     return (this.axis.series[1].yData[this.x]/this.total * 100).toPrecision(2) + '%'; 
     //Make your changes here to reflect your output. This is just a sample code 
    } 
}

我們始終顯示堆棧標籤你有在這裏描述的兩個選項。

Link

來源

2016-01-22 09:44:44

是的！我找到了相同的解決方案！非常感謝！ – iplus26

然而，關於第二個問題，答案指出'stackLabels'正在工作，但沒有足夠的空間來顯示。我知道，但是當dataLabels沒有空間時，它會自動調整它的位置，在這種情況下，它會顯示在條的邊緣左側。 – iplus26

好吧，我已經找到了解決方案第一個問題：如何顯示stackLabels特定序列值？ from this answer。

在我的情況下，代碼應該是：

yAxis: { 
    stackLabels: { 
    formatter: function() { 
     return [this.axis.series[1].yData[this.x], '/', this.total].join(''); 
    }, 
    enabled: true, 
    } 
}

如果你有更好的解決方案，它張貼！我仍然沒有關於如何找到它在docs，也許我應該挖掘更多...

來源

2016-01-22 09:45:07 iplus26

Highcharts中的stackLabels配置

回答

相關問題