如何使用Chart.Js V2.3在饼图中显示标签

Question

我试图用Chart.JS v2.3显示饼图内饼图的值

我尝试了各种各样的工作，看看我是否可以让他们工作

Chart.js v2: How to make tooltips always appear on pie chart?

当我尝试这个时，工具提示仍然悬停在上面。

也试过这个，这没用。

options: {
                        events: false,
                        animation: {
                            duration: 0
                        },
                        onAnimationComplete: function () {
                            var self = this;

                            var elementsArray = [];
                            Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                                Chart.helpers.each(dataset.metaData, function (element, index) {
                                    var tooltip = new Chart.Tooltip({
                                        _chart: self.chart,
                                        _data: self.data,
                                        _options: self.options,
                                        _active: [element]
                                    }, self);

                                    tooltip.update();
                                    tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                                }, self);
                            }, self);
                        }
                    },

如果我尝试使用其中一个使用插件服务的分辨率，则会因以下错误而失败：

  

未捕获的TypeError：无法读取属性＆＃39;注册＆＃39;未定义的

以下是我尝试使用的完整代码：

 var data = {
                    labels: ["People", "Process", "Technology"],
                    datasets: [
                        {
                            data: [10,20,30],
                            backgroundColor: [
                                "#FF6384",
                                "#36A2EB",
                                "#FFCE56"
                            ],
                            hoverBackgroundColor: [
                                "#FF6384",
                                "#36A2EB",
                                "#FFCE56"
                            ]
                        }
                    ]
                };


                // render chart

                Chart.pluginService.register({
                    beforeRender: function(chart) {
                        if (chart.config.options.showAllTooltips) {
                            // create an array of tooltips
                            // we can't use the chart tooltip because there is only one tooltip per chart
                            chart.pluginTooltips = [];
                            chart.config.data.datasets.forEach(function(dataset, i) {
                                chart.getDatasetMeta(i)
                                    .data.forEach(function(sector, j) {
                                        chart.pluginTooltips.push(new Chart.Tooltip({
                                                _chart: chart.chart,
                                                _chartInstance: chart,
                                                _data: chart.data,
                                                _options: chart.options,
                                                _active: [sector]
                                            },
                                            chart));
                                    });
                            });

                            // turn off normal tooltips
                            chart.options.tooltips.enabled = false;
                        }
                    },
                    afterDraw: function(chart, easing) {
                        if (chart.config.options.showAllTooltips) {
                            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
                            if (!chart.allTooltipsOnce) {
                                if (easing !== 1)
                                    return;
                                chart.allTooltipsOnce = true;
                            }

                            // turn on tooltips
                            chart.options.tooltips.enabled = true;
                            Chart.helpers.each(chart.pluginTooltips,
                                function(tooltip) {
                                    tooltip.initialize();
                                    tooltip.update();
                                    // we don't actually need this since we are not animating tooltips
                                    tooltip.pivot();
                                    tooltip.transition(easing).draw();
                                });
                            chart.options.tooltips.enabled = false;
                        }
                    }
                });


                var ctx = document.getElementById("pieChart").getContext("2d");
                var myPieChart = new Chart(ctx,
                {
                    type: 'pie',
                    data: data,
                    options: {
                        showAllTooltips: true
                    }
                });

我也试图避免使用chartNEW.js

如果重要的是，这是在Asp.Net中使用MVC完成的。