图表JS分组子标签

Question

查看文档，我很难找到使用附加数据结构呈现图表的解决方案。

任何人都可以帮助回答以下是否可能以及如何实现？

• 多个分组堆栈（重新使用组中的数据集）
• 为组内的每个条添加子标签。

有没有人能够通过图书馆实现这一目标？

提前致谢。

Answer 1

我以前没见过。但我可以看到一种可能的替代解决方案。

您可以使用chartjs datalabels插件，它允许您在数据本身上添加标签。

以下是一个示例：https://chartjs-plugin-datalabels.netlify.com/samples/charts/bar.html，其源代码位于此处：https://github.com/chartjs/chartjs-plugin-datalabels/blob/master/samples/charts/bar.html

首先，您必须安装datalabels插件，并将datalabels参数添加到您的数据中。

Answer 2

偶然发现相同的问题，并得出以下吸引力较小的选择，但比使用d3js解决方案更简单（例如，发布在d3 based multiple sub groups of a bar chart上）。请注意，如果不是不可能的话，此解决方案可能只适用于一个级别的子组：

• 为每个类别创建单独的图表，然后将其y轴设置为相同。

根据您希望的外观，可以关闭图表的子集的y轴，并保留零间距，这样可以根据需要提供类似的外观。

Answer 3

你必须使用 chartjs-plugin-datalabels 插件。使用此插件，您可以为图表的每个条提供标签。请看一下给定的例子。 希望这会有所帮助。

data: {
    labels: labels,
    datasets: [{
      datalabels: {
        labels: {
          name: {
            align: 'top',
            font: {size: 16},
            formatter: function(value, ctx) {
              return "name"
            }
          },
          value: {
            align: 'bottom',
            formatter: function(value, ctx) {
              return value;
            },
            padding: 4
          }
        }
      }
    }]
  }