是否有一种方法可以使用nchart在饼图节上显示标签?

pgccezyw  于 2023-03-02  发布在  Chart.js
关注(0)|答案(1)|浏览(146)

我正在使用this post中的信息为Microsoft Teams机器人制作饼图,但不知道如何在图表上显示每个部分的百分比。有办法吗?
我尝试在每个部分添加一个“label”属性以及“value”和“color”,因为我在source code for nchart中看到“label”用于圆环图。我尝试将“label”设置为几个不同的值,包括每个部分的百分比、它所代表的内容的名称等。下面是我的饼图数据代码:

const colorArr = ["#29C5F6", "#D4CCC5", "#949FB1", "#ff0080", "#8A2BE2", "#3CB043", "#ED7014", "#FCAE1E"]

const valueArr = [50, 100, 40, 75, 25]

for (let i = 0; i < valueArr.length; i++) {
            pieChartSectionArr[i] = {
              "value": valueArr[i],
              "color": colorArr[i],
              "label": valueArr[i]
            }
          }

这根本没有改变我的图表,甚至当我试图复制链接的示例时,圆环图也没有显示任何标签。我希望在每个部分的顶部显示一些文本。

6fe3ivhb

6fe3ivhb1#

编辑:我现在看到你在标题中提到了nchart;下面的解决方案基于标准chart.js(最新版本);它可以很好地与使用node-canvas的节点配合使用-这是一个与您提到的旧问题的答案类似的设置。

不幸的是,nchart绑定到chart.js的(非常)旧版本,该版本与插件不兼容,也与chart.js的许多其他新特性不兼容。
要使用npm运行以下代码,请在使用npm init创建项目后,将代码保存到index.js,然后保存到npm install chart.jsnpm install chartjs-plugin-datalabelsnpm install canvas
现在有了chartjs-plugin-datalabels插件,它可以很好地在饼图切片上添加标签。
下面是一个简单的例子:

const { Chart } = require("chart.js/auto");
const ChartDataLabels = require('chartjs-plugin-datalabels');
const { createCanvas } = require("canvas");

const fs = require("fs");

const width = 1200, height = 800;

const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");

new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)'
            ]
        }]
    },
    options:{
        plugins: {
            legend: {
                display: false
            },
            datalabels: {
                anchor: 'center',
                color: '#000',
                font: {size: '40px'},
                backgroundColor: null,
            },
        }
    },
    plugins: [ChartDataLabels]
});

const buffer = canvas.toBuffer("image/png");
fs.writeFileSync("./image.png", buffer);

相关问题