Chart.js 动态数据集和堆叠条上的工具提示答案

【问题标题】：Chart.js dynamic dataset and tooltip on stacked barChart.js 动态数据集和堆叠条上的工具提示
【发布时间】：2020-02-10 03:49:52
【问题描述】：

我想创建一个堆积条形图。

我在 chart.js 中看到了 sample 和 documentation，但我没有找到使用动态数据集和工具提示的示例。

我想要达到的效果如下图。

所以第一个堆叠条由两个数据表组成； 15 和 30，总和为 45。当用户悬停第一个堆叠条时，它将显示工具提示； “15 (1-3)” 用于底部栏，“30 (3-6)” 用于悬停顶部栏。问题是我不知道如何附加动态数据集（对于一个日期，它将包含 1 到 10 个数据集）并显示相应的工具提示。我可以使用动态数据集生成折线图/条形图，但堆叠条形图对我来说是新的。

我的json数据源是这样的：

[
   {
      "date":"2020-02-07",
      "range":"1-3",
      "off":15
   },
   {
      "date":"2020-02-07",
      "range":"3-6",
      "off":30
   },
   {
      "date":"2020-02-08",
      "range":"1-4",
      "off":25
   },
   {
      "date":"2020-02-08",
      "range":"4-5",
      "off":15
   },
   {
      "date":"2020-02-08",
      "range":"5-6",
      "off":15
   }
]

它应该生成以下堆叠条。

您能否提供一些示例，或者我可能遗漏了文档中已经显示我想要什么的部分？

谢谢。

【问题讨论】：

你有没有尝试过？？
@AashifAhamed 是的，我在 chart.js 网站上尝试了该示例。它们只显示具有相同固定数据集（数据集 1、数据集 2、数据集 3）的数据，悬停时显示的标签是数据本身（例如：15），但我也想显示“15（1-3）”。如果这需要太多的工作，我会找到另一种解决方案，例如在悬停条形图时显示模式并在那里显示详细信息。
请检查：stackoverflow.com/questions/45122306/…
@AashifAhamed 谢谢。我已经看了一下。所以我需要使用零值来使数据集动态化。

标签： javascript charts chart.js

【解决方案1】：

请查看https://stackoverflow.com/a/59658062/2358409 以了解其基本工作原理。

从这些信息开始，一些数据处理以及chartjs-plugin-datalabels 的使用将您带到以下示例代码。

const data = [
   {
      "date":"2020-02-07",
      "range":"1-3",
      "off":15
   },
   {
      "date":"2020-02-07",
      "range":"3-6",
      "off":30
   },
   {
      "date":"2020-02-08",
      "range":"1-4",
      "off":25
   },
   {
      "date":"2020-02-08",
      "range":"4-5",
      "off":15
   },
   {
      "date":"2020-02-08",
      "range":"5-6",
      "off":15
   }
];

const distinctDates = Array.from(new Set(data.map(o => o.date)));
const dataPerDate = distinctDates.map(d => data.filter(o => o.date == d));
const numberOfDatasets = Math.max.apply(null, dataPerDate.map(data => data.length));
const dataSets = [];
for (let i = 0; i < numberOfDatasets; i++) {
  dataSets.push({
    data: dataPerDate.map(data => i < data.length ? data[i].off : 0),
    ranges: dataPerDate.map(data => i < data.length ? data[i].range : ''),
    backgroundColor: distinctDates.map(d => 
      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 0.5)"),
    categoryPercentage: 1,
    barPercentage: 1
  }); 
}

new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    labels: distinctDates,
    datasets: dataSets
  },
  options: {
    plugins: {
	  datalabels: {
        display: context => context.dataset.data[context.dataIndex] > 0,
        formatter: (value, context) => value + ' (' + context.dataset.ranges[context.dataIndex] + ')'
			}
		},
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      xAxes: [{
         stacked: true
      }],
      yAxes: [{
        stacked: true
      }]      
    }
  }
});

canvas {
  max-width: 300px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="myChart" width="100" height="100"></canvas>

【讨论】：