在chartjs 2.4中一直显示工具提示不起作用

Question

我正在尝试一直显示chartjs的工具提示。我直接从https://github.com/chartjs/Chart.js/issues/1861复制了此代码，但它仍然无效。我收到错误消息“Chart.Tooltip.positioners [opts.position]不是函数”。

有人可以帮忙吗？这可能是一件小事......

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("chrtWhoPays").getContext("2d");
        //var piechart = new Chart(ctx, config);

      var ctx = document.getElementById("chrtWhoPays");
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Payer1", "Payer2", "Payer3", "Payer4", "Payer5", "Payer6"],
            datasets: [{
                data: [51.9, 22.3, 15.7, 7.9, 0.6, 1.6],
                backgroundColor: [
                    '#333',
                    '#547b84',
                    '#2faea9',
                    '#a2d5ab',
                    '#433c3b',
                    '#e4efc1'
                ]
            }]
        },
        options: {
            responsive: true,
            showAllTooltips: true

        }
    });

Answer 1

看起来你没有使用最新版本的插件服务（在有人说它在2.1.6中出现后，有一个更新版本的评论）

使用最新版本，您应该没问题，这是他们的数据示例

＆＃13;

＆＃13;

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

var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Payer1", "Payer2", "Payer3", "Payer4", "Payer5", "Payer6"],
    datasets: [{
      data: [51.9, 22.3, 15.7, 7.9, 0.6, 1.6],
      backgroundColor: [
        '#333',
        '#547b84',
        '#2faea9',
        '#a2d5ab',
        '#433c3b',
        '#e4efc1'
      ]
    }]
  },
  options: {
    responsive: true,
    showAllTooltips: true

  }
});

var data = {
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ]
  }]
};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<canvas id="canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;