当前位置：首页 > 行业动态 > 正文

如何使用Chart.js绘制饼状图？

admin
行业动态
2024-12-17
2

使用Chart.js绘制饼状图是一种直观展示数据比例的方法，下面将详细介绍如何使用Chart.js创建饼状图，包括必要的代码示例和配置选项。

如何使用Chart.js绘制饼状图？第1张

准备工作

在开始之前，请确保你的项目中已经包含了Chart.js库，你可以通过CDN链接直接引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

或者下载并本地引用该库。

HTML结构

我们需要一个<canvas>元素来渲染图表，这是基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pie Chart Example</title>
</head>
<body>
    <div >
        <canvas id="myPieChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="path/to/your/script.js"></script>
</body>
</html>

JavaScript部分

接下来是JavaScript部分，我们将在这里编写实际的饼状图逻辑，假设我们有一些简单的数据，例如不同水果的销售数量。

document.addEventListener("DOMContentLoaded", function() {
    var ctx = document.getElementById('myPieChart').getContext('2d');
    var myPieChart = new Chart(ctx, {
        type: 'pie', // 指定图表类型为'pie'
        data: {
            labels: ['Apples', 'Oranges', 'Bananas', 'Grapes'], // 标签数组
            datasets: [{
                label: 'Fruit Sales', // 数据集标签
                data: [120, 190, 30, 70], // 数据数组
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)', // Apples
                    'rgba(255, 159, 64, 0.2)', // Oranges
                    'rgba(54, 162, 230, 0.2)', // Bananas
                    'rgba(75, 192, 192, 0.2)' // Grapes
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(54, 162, 230, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true, // 确保图表适应容器大小
            plugins: {
                legend: {
                    position: 'top', // 图例位置
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            let sum = this._data.datasets[tooltipItem.datasetIndex].data.reduce((a, b) => a + b, 0);
                            let value = tooltipItem.raw;
                            let percentage = (value / sum * 100).toFixed(2);
                            return${tooltipItem.label}: ${value} (${percentage}%);
                        }
                    }
                }
            }
        }
    });
});