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>

CanvasJS 中的动态堆叠列

Dynamic stacked column in CanvasJS

javascript

json

canvasjs