Chart.js 混合图学习笔记

什么是 Chart.js

Chart.js 是一个开源的 JavaScript 库，用于绘制各种类型的图表，包括折线图、饼图、柱状图等等。

它非常易于使用，并且具有响应式设计，使您可以轻松地在不同的屏幕和设备上查看您的图表。

Chart.js 的混合图

Chart.js 还支持混合图，它可以同时显示多个类型的图表，例如同时显示折线图和柱状图。

以下是一个简单的混合图示例：

htmlCopy Code
<canvas id="myChart"></canvas>

javascriptCopy Code
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }, {
            type: 'line',
            label: '# of Points',
            data: [7, 11, 5, 8, 3, 7],
            fill: false,
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

这个例子显示了一个同时包含柱状图和折线图的混合图。您可以看到柱状图的数据集使用了 type: 'bar'，而折线图的数据集使用了 type: 'line'。

总结

Chart.js 是一个功能强大的 JavaScript 图表库，支持多种类型的图表和混合图。如果您正在寻找一种易于使用、功能强大的图表库，那么 Chart.js 是一个不错的选择。