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);

以上实例输出结果为：

Chart.js 混合图

Chart.js 混合图

相关阅读

目录[+]