chartjs显示数值标签插件：chartjs-plugin-datalabels

Posted 2020-11-15 小水皮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了chartjs显示数值标签插件：chartjs-plugin-datalabels相关的知识，希望对你有一定的参考价值。

Getting Started

#Installation

#npm

npm install chartjs-plugin-datalabels --save

This plugin can also be installed using Bower.

#CDN

By default, https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels returns the latest (minified) version, however it‘s highly recommended to always specify a version in order to avoid breaking changes. This can be achieved by appending @{version} to the url:

https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.1.2    // exact version
https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1        // latest 1.x.x

Read more about jsDeliver versioning on their website.

#Download

You can download the latest version of chartjs-plugin-datalabels from the GitHub releases:

chartjs-plugin-datalabels.js (recommended for development)
chartjs-plugin-datalabels.min.js (recommended for production)
chartjs-plugin-datalabels.zip (contains .js and .min.js versions + samples)

#Integration

#html

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

IMPORTANT

chartjs-plugin-datalabel must be loaded after the Chart.js library!

Once imported, the plugin is available under the global property ChartDataLabels. This is useful to register/unregister the plugin afterward.

#Module

import Chart from ‘chart.js‘;
import ChartDataLabels from ‘chartjs-plugin-datalabels‘;

#Registration

This plugin registers itself globally, meaning that once imported, all charts will display labels. In case you want it enabled only for a few charts, you first need to unregister it globally:

// NOTE: when imported as a <script> tag, use the global property ‘ChartDataLabels‘
Chart.plugins.unregister(ChartDataLabels);

Then, you can enabled the plugin only for specific charts:

var chart = new Chart(ctx, {
    plugins: [ChartDataLabels],
    options: {
        // ...
    }
})

#Configuration

The plugin options can be changed at 3 different levels and are evaluated with the following priority:

per dataset: dataset.datalabels.*
per chart: options.plugins.datalabels.*
or globally: Chart.defaults.global.plugins.datalabels.*

For example:

// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
    color: ‘#FE777B‘
});

var chart = new Chart(ctx, {
    options: {
        plugins: {
            // Change options for ALL labels of THIS CHART
            datalabels: {
                color: ‘#36A2EB‘
            }
        }
    },
    data: {
        datasets: [{
            // Change options only for labels of THIS DATASET
            datalabels: {
                color: ‘#FFCE56‘
            }
        }]
    }
});

以上是关于chartjs显示数值标签插件：chartjs-plugin-datalabels的主要内容，如果未能解决你的问题，请参考以下文章

图表每一侧的chartJS标签

ChartJs 不显示行项目图例

如何在chart.js中的饼图上方显示标签

ChartJS - 标签背景

Chartjs 在鼠标悬停时显示标签和单位

如何在 ChartJS 中包含适配器和插件