Chart.js 混合图

Chart.js 可以创建由两种或多种不同图表类型组合而成的混合图表，比如条形图与折线图的混合。

创建混合图表时，我们在每个数据集上指定图表类型。

混合图 type 属性为 scatter。

柱形图 type 属性为 bar ，折线图 type 属性为 line ， type 描述了图表类型。

const mixedChart = new Chart(ctx, {
    data: {
        datasets: [{
            type: 'bar',
            label: '柱形图数据集',
            data: [45, 49,52, 48]
        }, {
            type: 'line',
            label: '折线图数据集',
            data: [50, 40, 45, 49],
        }],
        labels: ['一月份', '二月份', '三月份', '四月份']
    },
    options: options
});

接下来我们创建一个简单的混合图：

实例

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    '一月份',
    '二月份',
    '三月份',
    '四月份'
  ],
  datasets: [{
    type: 'bar',
    label: '柱形图数据集',
    data: [45, 49,52, 48],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: '折线图数据集',
    data: [50, 40, 45, 49],
    fill: false,
    borderColor: 'rgb(54, 162, 235)'
  }]
};
const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
    maintainAspectRatio: false,// 保持图表原有比例
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};
const myChart = new Chart(ctx, config);

尝试一下 »

以上实例输出结果为：