CanvasJS中的动态堆积列

Question

如何创建带有动态数据的堆积柱形图？

例如，我有一个外部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作为标签的堆叠列，并且使用出现的数组在每个标签的顶部构建堆叠列？

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

Answer 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>