Question

在这个精彩的sample中，我们知道蓝色和红色属于stack: 'Stack 0'。 SO中有一些旧的问题，一年之后，在图表中显示“Stack 0”和“Stack 1”的最简单方法是什么？

Answer 1

我发现数据标签插件最易于使用且安装非常简单：https://github.com/chartjs/chartjs-plugin-datalabels

这里有一个快速演示： https://chartjs-plugin-datalabels.netlify.com/samples/charts/bar.html

编辑：哦，我看到你实际上只想用它代表的数据来标记数据，而不是价值。您仍然可以通过提供formatter功能作为选项来完成此操作。 https://chartjs-plugin-datalabels.netlify.com/formatting。在这种情况下，您将覆盖数据以仅显示标签。标签数据可能在上下文中。

Answer 2

就像David所说的那样，您可以将chartjs-plugin-datalabels与这样的实现结合使用：

plugins: {
  datalabels: {
    align: 'start',
    anchor: 'start',
    color: 'black',
    formatter: function(value, context) {
      let ds = context.chart.data.datasets
      // check if it's the first ds
      if(ds[context.datasetIndex - 1]) {
        // check if the ds is in the same stack as the ds before
        if(ds[context.datasetIndex - 1].stack == ds[context.datasetIndex].stack) {
          return ''
        } else {
          return ds[context.datasetIndex].stack;
        }
      } else {
        return ds[context.datasetIndex].stack;
      }
    }
  }
}

如何显示堆栈标签/名称？

2 个答案: