javascript - 选项 : plugins not functioning

Question

我正在尝试在图表上显示百分比。目前，有一个名为 ChartJS-Plugin-Labels 的插件可以为我执行此操作，但是当在选项区域内使用它时，如文档所述，无论我在其中写什么，它都不会影响我的图表。我也不能禁用它们，如果那是我想做的。

我希望下面的“选项”部分最终能在我的图表中发挥作用，但目前还不能。

显示我的问题的图片链接如下。我收到的值来自 WEB API，因此格式很好。不确定是什么导致了这个问题。

注意:添加或不添加引号都没有区别。

var config = {
             "type": "pie",
             "data": {
                    "labels": objLabelsBottom,
                    "datasets": [{
                                "label": objLabel1,
                                "data": objValues1,
                                "fill": false,
                                "backgroundColor": [
                                    "rgba(205, 93, 37, 0.2)", "rgba(211, 102, 32, 0.2)", "rgba(181, 111, 35, 0.2)",
                                    "rgba(175, 163, 23, 0.2)", "rgba(195, 172, 124, 0.2)", "rgba(104, 167, 45, 0.2)",
                                    "rgba(185, 218, 82, 0.2)", "rgba(205, 30, 37, 0.2)", "rgba(221, 82, 85, 0.2)",
                                    "rgba(48, 153, 35, 0.2)", "rgba(222, 74, 26, 0.2)", "rgba(195, 181, 107, 0.2)"
                                ],
                                "borderColor": [
                                    "rgb(205, 93, 37)", "rgb(211, 102, 32)", "rgb(181, 111, 35)", "rgb(175, 163, 23)",
                                    "rgb(195, 172, 124)", "rgb(104, 167, 45)", "rgb(185, 218, 82)", "rgb(205, 30, 37)",
                                    "rgb(221, 82, 85)", "rgb(48, 153, 35)", "rgb(222, 74, 26)", , "rgb(195, 181, 107)"
                                ],
                                "borderWidth": 1
                            }
                        ]
                    },
                    "options": {
                        "plugins": {
                            labels: {
                                render: 'percentage',
                                fontColor: function (data) {
                                    var rgb = hexToRgb(data.dataset.backgroundColor[data.index]);
                                    var threshold = 140;
                                    var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
                                    return luminance > threshold ? 'black' : 'white';
                                },
                                precision: 2
                            }
                        },
                        "events": ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
                        "onClick": (evt, item) => {
                            handleClick(evt);
                        }
                    }
                };

https://prnt.sc/p48t7h

Answer 1

您应该使用 chartjs-plugin-datalabels。

看this question and its answer ，我想您会在那里找到答案。