ChartJS 3.8.0堆积条形图组合标签

ygya80vv 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(156)

在chart.js 3.8.0中，是否可以合并堆叠条形图上的标签？我找到的最接近的解决方案是为工具提示页脚回调添加，并在工具提示中手动添加额外的文本，但它不包括与该数据集关联的图例/颜色图标。
示例HTML：

<html>
<head></head>
<body>
<h1>
Stacked Bar Chart (chart.js)
</h1>
  <canvas id="chart_display"></canvas>
</body>
</html>

示例Javascript：

const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [
    {
    label: 'Retained',
    data: [62,68,74,80,66,84],
    backgroundColor: 'rgb(0, 178, 169)',
    order: 3,
    stack: 'stack1'
    },
    {
      label: 'Expired',
      data: [5,3,7,9,2,4],
      backgroundColor: 'rgb(207, 16, 45)',
      order: 3,
      stack: 'stack1'
    }
  ]
}

const config = {
    type: 'bar',
  data: data,
  options: {
    scales: {
        x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  },
};

const reportOutput = new Chart(
    document.getElementById('chart_display'),
  config
);

Example in JSFiddle
在旧版本中可能会出现这种情况，如下所示：https://www.chartjs.org/docs/3.5.0/samples/bar/stacked.html
希望我刚才忽略了一个简单的配置选项。

chart.js

来源：https://stackoverflow.com/questions/72635263/chartjs-3-8-0-stacked-bar-combined-labels