Chart.js 图例插件使用教程

任澄翊

于 2024-09-01 07:02:14 发布

阅读量756

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00063/article/details/141763777

版权

Chart.js 图例插件使用教程

Chart.js.legend**DEPRECATED** Legend plugin for Chart.js (MIT)项目地址:https://gitcode.com/gh_mirrors/ch/Chart.js.legend

项目介绍

Chart.js 是一个简单而灵活的 JavaScript 图表库，支持多种图表类型。Chart.js.legend 是 Chart.js 的一个扩展插件，用于为图表添加图例功能。图例是图表中的一个重要组成部分，用于标识不同的数据系列。

项目快速启动

安装

首先，确保你已经安装了 Chart.js。然后，通过 npm 安装 Chart.js.legend 插件：

npm install chart.js chartjs-plugin-legend

引入和配置

在你的 JavaScript 文件中引入 Chart.js 和 chartjs-plugin-legend：

import Chart from 'chart.js/auto';
import ChartjsPluginLegend from 'chartjs-plugin-legend';

Chart.register(ChartjsPluginLegend);

创建图表

以下是一个简单的示例，展示如何创建一个带有图例的图表：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Chart.js 图例示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-legend"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
                datasets: [{
                    label: '销量',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom'
                    }
                }
            }
        });
    </script>
</body>
</html>