javascript - Highcharts 中的 stackLabels 配置

Question

我正在使用 highcharts，但在 highcharts 的 stackLabels 配置方面遇到了一些问题。我被要求以“分数/满分”格式显示条形图，例如10 个中有 6 个应该是这样的

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

我用 stacked bar 伪造了它图表的第一部分为 6，第二部分为 4。

[已解决] 但是，我不知道如何在stackLabels中显示6/10(看来只能用{total} 在其中，而我可以在 dataLabels 中使用 {point.y}/{point.fullscore}。

[未解决] 而且，当我使用基本条形图时，dataLabels 会自动调整其位置(在我的例子中，dataLabels 会显示在栏右边缘的左侧)。但是，我应该如何强制显示 stackLabels？

This answer指出stackLabels没有足够的空间显示，解决方法是将max的值调大，留出一些空间。然而，这个解决方案对我来说不是那么优雅，而且因为我的条形图是水平的并且标签应该很长。

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

Answer 1

回答第二个问题:

您可以将 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:您对 stackLabels 的 formatter 的回答很好!