正文

掌握Chart.js，轻松实现数据可视化：10个实战案例教你玩转图表制作

/0 浏览量
0529

案例一：基础折线图

折线图是展示数据随时间变化趋势的常用图表。以下是一个使用Chart.js创建基础折线图的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Monthly Sales',
            data: [1500, 3000, 4500, 6000, 7500, 9000, 10500],
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

案例二：柱状图比较

柱状图用于比较不同类别的数据。以下是一个使用Chart.js创建柱状图的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Category A', 'Category B', 'Category C', 'Category D'],
        datasets: [{
            label: 'Sales',
            data: [300, 500, 700, 900],
            backgroundColor: [
                'rgba(0, 123, 255, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(0, 123, 255, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

案例三：饼图展示比例

饼图用于展示各部分占整体的比例。以下是一个使用Chart.js创建饼图的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'My First Dataset',
            data: [300, 50, 100, 80, 60, 90],
            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
        }]
    }
});

案例四：雷达图展示多维度数据

雷达图用于展示多维度数据之间的关系。以下是一个使用Chart.js创建雷达图的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
        datasets: [{
            label: 'Data One',
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            pointBackgroundColor: 'rgba(255,99,132,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255,99,132,0.8)',
            data: [65, 59, 90, 81, 56, 55, 40]
        }, {
            label: 'Data Two',
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(54, 162, 235, 0.8)',
            data: [28, 48, 40, 19, 96, 27, 100]
        }]
    },
    options: {
        scale: {
            angleLines: {
                color: 'rgba(0, 0, 0, 0.2)'
            }
        }
    }
});

案例五：极坐标图展示数据

极坐标图适用于展示圆形或环形数据。以下是一个使用Chart.js创建极坐标图的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [300, 50, 100, 80, 60, 90],
            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
        }],
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
    },
    options: {
        scale: {
            angleLines: {
                color: 'rgba(0, 0, 0, 0.2)'
            }
        }
    }
});

案例六：气泡图展示数据点

气泡图用于展示数据点的大小。以下是一个使用Chart.js创建气泡图的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [
                { x: 1, y: 2, r: 10 },
                { x: 2, y: 3, r: 20 },
                { x: 3, y: 4, r: 30 },
                { x: 4, y: 5, r: 40 }
            ],
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

案例七：散点图展示数据关系

散点图用于展示数据点之间的关系。以下是一个使用Chart.js创建散点图的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [
                { x: 1, y: 2 },
                { x: 2, y: 3 },
                { x: 3, y: 4 },
                { x: 4, y: 5 }
            ],
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

案例八：组合图表展示多种数据

组合图表可以展示多种类型的数据。以下是一个使用Chart.js创建组合图表的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            data: [1500, 3000, 4500, 6000, 7500, 9000, 10500],
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1
        }, {
            label: 'Dataset 2',
            data: [1000, 2000, 3000, 4000, 5000, 6000, 7000],
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

案例九：动画效果展示数据变化

动画效果可以使数据可视化更生动。以下是一个使用Chart.js添加动画效果的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Monthly Sales',
            data: [1500, 3000, 4500, 6000, 7500, 9000, 10500],
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        animation: {
            duration: 1000,
            easing: 'easeInOutExpo'
        }
    }
});

案例十：响应式图表适配不同设备

响应式图表可以适配不同设备。以下是一个使用Chart.js创建响应式图表的示例。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Monthly Sales',
            data: [1500, 3000, 4500, 6000, 7500, 9000, 10500],
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        responsive: true,
        maintainAspectRatio: false
    }
});

通过以上10个实战案例，你可以轻松掌握Chart.js的使用方法，实现各种数据可视化需求。希望这些案例能帮助你更好地理解Chart.js的功能和应用场景。

-- 展开阅读全文 --