Highcharts中的stackLabels配置

Question

我正在使用highcharts并且在stackLabels配置highcharts时遇到一些问题。我被要求显示一个条形图，其中包含＆＃34;得分/满分＆＃34;格式，例如10个中的6个应该像

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

我伪造了stacked bar图表，其中第一部分为6，第二部分为4。

[已解决] 但是，我不知道如何在6/10中显示stackLabels（似乎我只能使用{total}它，虽然我可以在{point.y}/{point.fullscore}中使用dataLabels。

[未解决] 而且，当我使用基本条形图时，dataLabels会自动调整其位置（在我的情况下，dataLabels会显示在左侧酒吧的右边缘）。但是，我应该如何强制stackLabels显示？

This answer指出stackLabels没有足够的空间来展示，解决方案是让max值更大并为其留出一些空间。但是，解决方案对我来说并不优雅，而且因为我的条形图是水平的，标签应该很长。

任何帮助将不胜感激！提前致谢！

Answer 1

回答第二个问题：

您可以将stackLabels设置为false，以便始终呈现标签。这些标签不会出现在绘图区域内，但会在外面的某处呈现。 dataLabels不是dataLabels - justify有选项crop，这会强制标签在绘图区域内呈现。

但是，在Highcharts中，您可以访问这些标签并移动它们（这就是false需要设置为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); } } } } 的原因 - 无论如何都要渲染标签），这里很简单POC：

load

现在，只需在redraw和chart: { type: 'bar', events: { redraw: updateStacks, load: updateStacks } }, 个事件中使用该方法即可：

formatter

现场演示：http://jsfiddle.net/awe4abwk/ - 如果不清楚，请告诉我。

PS：stackLabels对display的回答很好！

Answer 2

使用formatter更改默认堆栈标签。您可以使用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

Answer 3

好的，我找到了第一个问题的解决方案：如何在stackLabels中显示特定系列值？来自this answer。

就我而言，代码应为：

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

如果您有更好的解决方案，请发布！我仍然不知道如何在docs找到它，也许我应该挖掘更多......