javascript - Highcharts中的stackLabels配置

我正在使用highcharts，并且highcharts的stackLabels配置存在一些问题。我被要求以“得分/满分”格式显示条形图，例如10人中有6人应该像

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

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

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

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

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



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

最佳答案

回答第二个问题：

您可以将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回答很好！