Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
451 views
in Technique[技术] by (71.8m points)

javascript - 在饼图上显示标签,而不是数据值Chart.js(Show Labels on Pie pieces instead of Data values Chart.js)

I use Chart.js for making charts.(我使用Chart.js制作图表。)

I discovered today new plugin for the original Chart.js.(今天,我发现了原始Chart.js的新插件。) Plugin(插入) After i added <script> tags with the plugin, it applied automatically values to all my charts.(在使用插件添加<script>标签之后,它会自动将值应用于所有图表。) It looks great, but it shows number values.(看起来不错,但显示数字值。) How do i make it show labels instead of values on the pieces of the pie?(如何使其显示标签而不是饼图上的值?) I have found some posts about the subject, but they contain different commands, and i tried all i could but it didn't change anything.(我已经找到了一些有关该主题的帖子,但是它们包含不同的命令,我尽了我所能,但没有任何改变。) Also for the future, tell me please how to turn off showing values for specific chart :)(另外为了将来,请告诉我如何关闭显示特定图表的值:)) fillPie() { // Three arrays have same length let labelsArr = []; // Array with some names let values = []; // Array with values let randomColor = []; var ctx = document.getElementById('pie-chart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'pie', // The data for our dataset data: { labels: labelsArr, // I want it to show these labels datasets: [{ backgroundColor: randomColor, data: values, // It shows these values hoverBackgroundColor: "#fba999" }] }, // Configuration options go here options: { legend: { display: false } } }); } 在此处输入图片说明   ask by Nar Jovan translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can find the answer in the docs of the plugin: https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#custom-labels(您可以在插件的文档中找到答案: https : //chartjs-plugin-datalabels.netlify.com/guide/formatting.html#custom-labels)

options: { plugins: { datalabels: { formatter: function(value, context) { return context.chart.data.labels[context.dataIndex]; } } } } The dev simonbrunel explained on GitHub how you can disable the plugin globally or for specific datasets.(开发者simonbrunel 在GitHub上说明了如何在全局或特定数据集中禁用该插件。) The following is a quote from the GitHub link:(以下是GitHub链接的引文:) That should be possible by disabling labels for all datasets via the plugin options at the chart level using the display option, then enable labels per dataset at the dataset level (dataset.datalabels.*):(通过使用显示选项在图表级别通过插件选项为所有数据集禁用标签,然后在数据集级别为每个数据集启用标签(dataset.datalabels。*),应该可以实现:) new Chart('id', { data: { datasets: [{ // no datalabels for this dataset }, { datalabels: { // display labels for this specific dataset display: true } } }, options: { plugins: { datalabels: { // hide datalabels for all datasets display: false } } } }) You can also globally disable labels for all charts using:(您还可以使用以下命令全局禁用所有图表的标签:) // Globally disable datalabels Chart.defaults.global.plugins.datalabels.display = false

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...