javascript - Chart js 总是在圆环图上显示标签

Question

所以我有一个圆环图，我试图保持标签始终打开，在我的研究中我发现 this但它似乎不起作用，这是我的代码

  function showPieChart(){
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [50,25,15,10],
          backgroundColor: ['#585ba7','#999acb','#8ac0e9','#363e96'],
          label: 'Dataset 1'
        }],
        labels: ['Token Sale','Foundation','Early Contributors','Team & Advisors']
      },
      options: {
        tooltipTemplate: "<%= value %>",
        showTooltips: true,
        onAnimationComplete: function() {
          this.showTooltip(this.datasets[0].points, true);
        },
        tooltipEvents: [],
        cutoutPercentage: 90,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        responsive: true,
        legend: {
          display: false,
        },
        title: {
          display: false,
        },
        animation: {
          animateRotate: true,
          duration: 1000,
          animateScale: true,
          animationSteps: 15
        }
      }
    };
    var ctx = $("#pie-chart").get(0).getContext("2d");
    Chart.defaults.global.maintainAspectRatio = false;
    window.myDoughnut = new Chart(ctx, config);
  }

我以与我找到的答案相同的方式添加了 toolTipTemplate、showToolTips、onAnimationComplete 和 toolTipEvents，但它似乎不起作用，并且 Chartjs 文档没有关于这些的任何内容。因此，我正在寻找这不起作用的原因，以及如何让它以一种非黑客的方式工作。

Answer 1

使用此插件 github issue假设您使用的是最新版本的 ChartJS(在本答案时为 2.7.1)，似乎可以工作

这是一个工作插件的 fiddle :https://jsfiddle.net/Lngyxg3r/

这是该 fiddle 的代码:

html:

<canvas id="pie-chart"></canvas>

js:

        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.tooltips,
                                _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;
                }
            }
        });

 function showPieChart(){
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [50,25,15,10],
          backgroundColor: ['#585ba7','#999acb','#8ac0e9','#363e96'],
          label: 'Dataset 1'
        }],
        labels: ['Token Sale','Foundation','Early Contributors','Team & Advisors']
      },
      options: {
        tooltipTemplate: "<%= value %>",
        showTooltips: true,
                showAllTooltips: true,
        onAnimationComplete: function() {
          this.showTooltip(this.datasets[0].points, true);
        },
        tooltipEvents: [],
        cutoutPercentage: 90,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        responsive: true,
        legend: {
          display: false,
        },
        title: {
          display: false,
        },
        animation: {
          animateRotate: true,
          duration: 1000,
          animateScale: true,
          animationSteps: 15
        }
      }
    };
    var ctx = $("#pie-chart").get(0).getContext("2d");
    Chart.defaults.global.maintainAspectRatio = false;
    window.myDoughnut = new Chart(ctx, config);
  }
  showPieChart();