垦荒学园

简体中文

English

简体中文

English

切换主题

Chart.js 图表类型和配置 ​

Chart.js 提供了多种图表类型，每种类型都有其特定的用途和配置选项。本章将详细介绍 Chart.js 支持的各种图表类型及其配置方法。

图表类型概述 ​

Chart.js 支持以下主要图表类型：

  1. 折线图 (Line Chart) - 显示数据随时间的变化趋势
  2. 柱状图 (Bar Chart) - 比较不同类别的数据
  3. 饼图 (Pie Chart) - 显示各部分占整体的比例
  4. 环形图 (Doughnut Chart) - 饼图的变体，中间有空白区域
  5. 雷达图 (Radar Chart) - 显示多变量数据
  6. 极地区域图 (Polar Area Chart) - 类似饼图，但使用角度和半径表示数据
  7. 气泡图 (Bubble Chart) - 显示三维数据
  8. 散点图 (Scatter Chart) - 显示两个变量之间的关系
  9. 混合图表 (Mixed Chart) - 组合多种图表类型

1. 折线图 (Line Chart) ​

折线图用于显示数据随时间的变化趋势，特别适合展示连续数据。

基本配置 ​

javascript
const lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
            label: '销售额',
            data: [65, 59, 80, 81, 56, 55],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '月度销售额趋势'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

折线图配置选项 ​

javascript
datasets: [{
    // 基本配置
    label: '数据集标签',
    data: [65, 59, 80, 81, 56, 55],
    
    // 线条样式
    borderColor: 'rgb(75, 192, 192)',
    borderWidth: 2,
    borderDash: [5, 5], // 虚线
    tension: 0.4, // 线条弯曲程度 (0-1)
    
    // 填充区域
    fill: true, // 或 'start', 'end', 'origin'
    backgroundColor: 'rgba(75, 192, 192, 0.2)',
    
    // 点样式
    pointBackgroundColor: 'rgb(75, 192, 192)',
    pointBorderColor: '#fff',
    pointBorderWidth: 2,
    pointRadius: 4,
    pointHoverRadius: 6,
    
    // 显示/隐藏
    showLine: true,
    spanGaps: false
}]

2. 柱状图 (Bar Chart) ​

柱状图用于比较不同类别的数据，可以是垂直或水平的。

垂直柱状图 ​

javascript
const barChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
            label: '销售额',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

水平柱状图 ​

javascript
const horizontalBarChart = new Chart(ctx, {
    type: 'bar', // Chart.js 3.x+ 中使用 'bar'，通过 indexAxis 设置方向
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
            label: '销售额',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        indexAxis: 'y', // 设置为水平柱状图
        responsive: true,
        scales: {
            x: {
                beginAtZero: true
            }
        }
    }
});

多数据集柱状图 ​

javascript
const multiBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
            label: '产品 A',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }, {
            label: '产品 B',
            data: [8, 15, 7, 12, 9, 6],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

3. 饼图 (Pie Chart) ​

饼图用于显示各部分占整体的比例关系。

javascript
const pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],
        datasets: [{
            label: '颜色分布',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 205, 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, 205, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '颜色分布饼图'
            }
        }
    }
});

4. 环形图 (Doughnut Chart) ​

环形图是饼图的变体，中间有空白区域，可以显示更多信息。

javascript
const doughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],
        datasets: [{
            label: '颜色分布',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 205, 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, 205, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            cutout: '50%' // 中间空白区域的大小
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '颜色分布环形图'
            }
        }
    }
});

5. 雷达图 (Radar Chart) ​

雷达图用于显示多变量数据，适合比较不同对象在多个维度上的表现。

javascript
const radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['速度', '力量', '技巧', '耐力', '智力'],
        datasets: [{
            label: '玩家 A',
            data: [65, 59, 90, 81, 56],
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }, {
            label: '玩家 B',
            data: [28, 48, 40, 19, 96],
            fill: true,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgb(54, 162, 235)',
            pointBackgroundColor: 'rgb(54, 162, 235)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(54, 162, 235)'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '玩家能力对比雷达图'
            }
        }
    }
});

6. 极地区域图 (Polar Area Chart) ​

极地区域图类似饼图，但使用角度和半径来表示数据。

javascript
const polarAreaChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['红色', '绿色', '黄色', '灰色', '蓝色'],
        datasets: [{
            label: '颜色分布',
            data: [11, 16, 7, 3, 14],
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(75, 192, 192, 0.5)',
                'rgba(255, 205, 86, 0.5)',
                'rgba(201, 203, 207, 0.5)',
                'rgba(54, 162, 235, 0.5)'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '极地区域图'
            }
        }
    }
});

7. 气泡图 (Bubble Chart) ​

气泡图用于显示三维数据，X轴、Y轴和气泡大小分别表示三个变量。

javascript
const bubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets: [{
            label: '数据集 1',
            data: [{
                x: 20,
                y: 30,
                r: 15
            }, {
                x: 40,
                y: 10,
                r: 10
            }],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '气泡图示例'
            }
        }
    }
});

8. 散点图 (Scatter Chart) ​

散点图用于显示两个变量之间的关系。

javascript
const scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: '散点数据',
            data: [{
                x: 10,
                y: 20
            }, {
                x: 15,
                y: 10
            }, {
                x: 20,
                y: 25
            }],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '散点图示例'
            }
        },
        scales: {
            x: {
                type: 'linear',
                position: 'bottom'
            }
        }
    }
});

9. 混合图表 (Mixed Chart) ​

混合图表可以组合多种图表类型在一个图表中。

javascript
const mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
            label: '销售额',
            type: 'bar',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }, {
            label: '增长率',
            type: 'line',
            data: [10, 15, 8, 12, 6, 9],
            borderColor: 'rgb(255, 99, 132)',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            tension: 0.1,
            yAxisID: 'y1'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                type: 'linear',
                display: true,
                position: 'left',
            },
            y1: {
                beginAtZero: true,
                type: 'linear',
                display: true,
                position: 'right',
                grid: {
                    drawOnChartArea: false,
                },
            }
        }
    }
});

完整示例 ​

以下是一个展示所有图表类型的完整示例：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js 图表类型示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .chart-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .chart-container {
            position: relative;
            height: 400px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="text-align: center;">Chart.js 图表类型示例</h1>
        
        <div class="chart-grid">
            <!-- 折线图 -->
            <div>
                <h2>折线图</h2>
                <div class="chart-container">
                    <canvas id="lineChart"></canvas>
                </div>
            </div>
            
            <!-- 柱状图 -->
            <div>
                <h2>柱状图</h2>
                <div class="chart-container">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
            
            <!-- 饼图 -->
            <div>
                <h2>饼图</h2>
                <div class="chart-container">
                    <canvas id="pieChart"></canvas>
                </div>
            </div>
            
            <!-- 环形图 -->
            <div>
                <h2>环形图</h2>
                <div class="chart-container">
                    <canvas id="doughnutChart"></canvas>
                </div>
            </div>
            
            <!-- 雷达图 -->
            <div>
                <h2>雷达图</h2>
                <div class="chart-container">
                    <canvas id="radarChart"></canvas>
                </div>
            </div>
            
            <!-- 极地区域图 -->
            <div>
                <h2>极地区域图</h2>
                <div class="chart-container">
                    <canvas id="polarAreaChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 折线图
        const lineCtx = document.getElementById('lineChart').getContext('2d');
        new Chart(lineCtx, {
            type: 'line',
            data: {
                labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
                datasets: [{
                    label: '销售额',
                    data: [65, 59, 80, 81, 56, 55],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // 柱状图
        const barCtx = document.getElementById('barChart').getContext('2d');
        new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
                datasets: [{
                    label: '销售额',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        // 饼图
        const pieCtx = document.getElementById('pieChart').getContext('2d');
        new Chart(pieCtx, {
            type: 'pie',
            data: {
                labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],
                datasets: [{
                    label: '颜色分布',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 205, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // 环形图
        const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');
        new Chart(doughnutCtx, {
            type: 'doughnut',
            data: {
                labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],
                datasets: [{
                    label: '颜色分布',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 205, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // 雷达图
        const radarCtx = document.getElementById('radarChart').getContext('2d');
        new Chart(radarCtx, {
            type: 'radar',
            data: {
                labels: ['速度', '力量', '技巧', '耐力', '智力'],
                datasets: [{
                    label: '玩家 A',
                    data: [65, 59, 90, 81, 56],
                    fill: true,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgb(255, 99, 132)'
                }, {
                    label: '玩家 B',
                    data: [28, 48, 40, 19, 96],
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgb(54, 162, 235)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // 极地区域图
        const polarAreaCtx = document.getElementById('polarAreaChart').getContext('2d');
        new Chart(polarAreaCtx, {
            type: 'polarArea',
            data: {
                labels: ['红色', '绿色', '黄色', '灰色', '蓝色'],
                datasets: [{
                    label: '颜色分布',
                    data: [11, 16, 7, 3, 14],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(75, 192, 192, 0.5)',
                        'rgba(255, 205, 86, 0.5)',
                        'rgba(201, 203, 207, 0.5)',
                        'rgba(54, 162, 235, 0.5)'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    </script>
</body>
</html>

通过本章的学习，你应该掌握了 Chart.js 提供的各种图表类型及其配置方法。在下一章中，我们将学习如何自定义图表的样式和外观。