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）

这是一个工作插件的小提琴：https://jsfiddle.net/Lngyxg3r/

这是来自那个小提琴的代码：

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();

图表js总是在甜甜圈图表上显示标签

1 个答案: