混合图表类型

使用 Chart.js，可以创建混合图表，这些图表是两种或多种不同图表类型的组合。一个常见的例子是包含一条线数据集的条形图。

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

const mixedChart = new Chart(ctx, {
    data: {
        datasets: [{
            type: 'bar',
            label: 'Bar Dataset',
            data: [10, 20, 30, 40]
        }, {
            type: 'line',
            label: 'Line Dataset',
            data: [50, 50, 50, 50],
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

此时，图表已按我们希望的方式渲染。需要注意的是，图表默认选项只在数据集级别考虑，在此情况下不会在图表级别合并。

const config = { type: 'scatter', data: data, options: { scales: { y: { beginAtZero: true } } } };

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

const data = { labels: [ '一月', '二月', '三月', '四月' ], datasets: [{ type: 'bar', label: '条形数据集', data: [10, 20, 30, 40], borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.2)' }, { type: 'line', label: '折线数据集', data: [50, 50, 50, 50], fill: false, borderColor: 'rgb(54, 162, 235)' }] };

const data = {
  labels: [
    'January',
    'February',
    'March',
    'April'
  ],
  datasets: [{
    type: 'bar',
    label: 'Bar Dataset',
    data: [10, 20, 30, 40],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: 'Line Dataset',
    data: [50, 50, 50, 50],
    fill: false,
    borderColor: 'rgb(54, 162, 235)'
  }]
};

绘制顺序

默认情况下，数据集的绘制顺序为第一个数据集位于最上层。可以通过为数据集指定 order 选项来更改此顺序。order 默认值为 0。请注意，这也会影响堆叠、图例和工具提示。因此，它与重新排序数据集的作用基本相同。

order 属性的行为类似于权重而不是特定顺序，因此数字越大，数据集绘制在画布上的时间就越早，因此数字较小的其他数据集将在其上绘制。

const mixedChart = new Chart(ctx, {
   type: 'bar',
   data: {
       datasets: [{
           label: 'Bar Dataset',
           data: [10, 20, 30, 40],
           // this dataset is drawn below
           order: 2
       }, {
           label: 'Line Dataset',
           data: [10, 10, 10, 10],
           type: 'line',
           // this dataset is drawn on top
           order: 1
       }],
       labels: ['January', 'February', 'March', 'April']
   },
   options: options
});