CanvasJS 中的动态堆叠列答案

【问题标题】：Dynamic stacked column in CanvasJSCanvasJS 中的动态堆叠列
【发布时间】：2019-10-14 11:48:47
【问题描述】：

如何创建包含动态数据的堆积柱形图？

例如，我有一个外部 JSON 对象，例如：

[
  {
    id : ‘ID123’,
    occurrences: [5,6,8],
    description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
  },
  {
    id : ‘ID456’,
    occurrences: [7,2,12],
    description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
  }
]

如何制作，以便有两个使用 id 作为标签的堆叠列，并且出现的数组用于在每个标签的顶部构建堆叠列？

编辑：添加了图表外观的表示

【问题讨论】：

出现数据应该如何用于创建列？你能说得具体一点吗？你可能应该举一个你已经尝试过的例子，或者提供一些关于你想要什么的视觉帮助。
或者，如果您不知道如何做某事，则很可能有框架或插件可以做您想做的事情，例如 chartjs.org
好的，我已经更新了我原来的问题，使其更加具体。出现数组中的元素映射到描述数组中的字符串。堆叠的列将分为三个部分，其中数组中的第 0 个元素（图表的底部）链接到描述数组中的第 0 个元素。我还将在问题中添加对此的粗略表示。
我现在添加了图表@nicholaslabrecque
如果我帮助了你，你可以通过确认我的回答帮助了你来表示感谢。 :)

标签： javascript json canvasjs

【解决方案1】：

我建议为此使用 chart.js，因为它比自己构建要容易得多。这是使用您提供的数据的示例。

var barChartData = {
			labels: ['ID123', 'ID456'],
			datasets: [{
				label: 'Hours spent working',
				backgroundColor: '#FF0000',
				data: [
					5,
					7
				]
			}, {
				label: 'Hours spent skiing',
				backgroundColor: '#00FF00',
				data: [
					6,
					2
				]
			}, {
				label: 'Hours spent studying',
				backgroundColor: '#0000FF',
				data: [
					8,
					12,
				]
			}]

		};
		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					title: {
						display: true,
						text: 'Chart.js Bar Chart - Stacked'
					},
					tooltips: {
						mode: 'index',
						intersect: false
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					}
				}
			});
		};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

【讨论】：