Динамически сложенный столбец в 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"]
  }
]

Как мне сделать так, чтобы былодва столбца с накоплением, использующие идентификатор в качестве метки, а массив вхождений используется для построения столбца с накоплением поверх каждой метки?

Редактировать: Добавлено представление о том, как должен выглядеть график

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>