Charts.js 中带折线图的堆积条形图

Question

我可以用线条制作标准条形图，但是如何用线条制作堆叠条形图？

例如，这是我用于带折线的条形图的代码，我应该进行哪些编辑/更改才能将其与堆叠条形图一起使用？这是堆积条形图https://www.chartjs.org/samples/latest/charts/bar/stacked.html 的示例，这是带有线https://www.chartjs.org/samples/latest/charts/combo-bar-line.html 的条形图示例

var ctx = document.getElementById('myChart');
var config = {
    type: 'bar',
  options: {
    legendCallback: function(chart) {
      var text = [];
      text.push('<ul class="' + chart.id + '-legend">');
      var data = chart.data;
      var datasets = data.datasets;
      if (datasets.length) {
        for (var i = 0; i < datasets.length; ++i) {
            text.push('<li>');
            if (datasets[i].type=='line') {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          } else {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          }
          text.push(datasets[i].label);
          text.push('</li>');
        }
      }
      text.push('</ul>');
      return text.join('');
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        type: "category",
        id: "axis-bar",
      }, {
        type: "time",
        id: "axis-time",
        display: false,
      }, ],
    },
  },
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: "Dataset1",
      type: "line",
      backgroundColor: "#0000FF",
      borderColor: "#0000FF",
      borderWidth: 1,
      fill: false,
      xAxisID: "axis-time",
      data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
    },{
      label: "Dataset2",
      type: "bar",
      backgroundColor: "#ff0000",
      borderColor: "#ff0000",
      borderWidth: 1,
      fill: true,
      xAxisID: "axis-bar",
      data: [299405,244029,247191,329711,273855,441914,426271,471912,374388,366864,326155,277442]
    }]
  },

};

var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;

Answer 1

请参阅 Chart.js 文档以供参考： https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart

---

假设您添加了另一个数据集：

{
  label: "Dataset3",
  type: "bar",
  backgroundColor: "#00ff00",
  borderColor: "#00ff00",
  borderWidth: 1,
  fill: true,
  xAxisID: "axis-bar",
  data: [ 149703, 122015, 123596, 164856, 136928, 220957, 213136, 235956, 187194, 183432, 163078, 138721 ]
}

解决方案

您需要为 X 和 Y 轴刻度添加额外的配置：

scales: {
  xAxes: [ { stacked: true }],
  yAxes: [ { stacked: true }]
}

示例

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["<  1","1 - 2","3 - 4","5 - 9","10 - 14","15 - 19","20 - 24","25 - 29","> - 29"],
        datasets: [{
      label: "Dataset1",
      type: "line",
      backgroundColor: "#0000FF",
      borderColor: "#0000FF",
      borderWidth: 1,
      fill: false,
      yAxisID: "axis-time",
      data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
    },{
      label: "Dataset2",
      type: "bar",
      backgroundColor: "#ff0000",
      borderColor: "#ff0000",
      borderWidth: 1,
      fill: true,
      yAxisID: "axis-bar",
      data: [
  149703, 122015,
  123596, 164856,
  136928, 220957,
  213136, 235956,
  187194, 183432,
  163078, 138721
]
    },{
      label: "Dataset3",
      type: "bar",
      backgroundColor: "#00ff00",
      borderColor: "#00ff00",
      borderWidth: 1,
      fill: true,
      yAxisID: "axis-bar",
      data: [
  149703, 122015,
  123596, 164856,
  136928, 220957,
  213136, 235956,
  187194, 183432,
  163078, 138721
]
    }],
    },
options: {
    tooltips: {
      displayColors: true,
    },
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true,
        id: 'axis-bar'
      }, {
        stacked: true,
        id: 'axis-time',
        display: false,
      }]
    },
        responsive: true,
        maintainAspectRatio: false,
        legend: { display: false },
    legendCallback: function(chart) {
      var text = [];
      text.push('<ul class="' + chart.id + '-legend">');
      var data = chart.data;
      var datasets = data.datasets;
      if (datasets.length) {
        for (var i = 0; i < datasets.length; ++i) {
            text.push('<li>');
            if (datasets[i].type=='line') {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          } else {
            text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          }
          text.push(datasets[i].label);
          text.push('</li>');
        }
      }
      text.push('</ul>');
      return text.join('');
    }
    }
});

var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;

canvas{
  background:#fff;
  height:400px;
}

<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<div class="wrapper">
 <canvas id="myChart"></canvas>
  <div id="legend"></div>
</div>

我还创建了一个 CodePen，其代码与显示堆叠条形图和折线图的代码相同： https://codepen.io/pzi/pen/GRoObmq