Javascript Chart.js v2：如何使工具提示始终显示在饼图上？

我发现了堆栈溢出，但所有这些都是在一年前和两年前解决的。现在，Chart.js已经出现在第2版中，文档也有很多变化。有人能帮我展示一个带标签的饼图示例吗？或者一个带所有线段工具提示的饼图都是可见的

更新

多亏了@potatopeelings，他的答案在Chart.jsv2.1中非常有效

虽然我最初询问如何在饼图上永久显示工具提示，但我发现了一个更好的解决方案：以百分比的形式将值显示为标签！现在在chart.js v2.1中为饼图启用了该功能。在图表选项中：

animation: {
  duration: 0,
  onComplete: function () {
    var self = this,
        chartInstance = this.chart,
        ctx = chartInstance.ctx;

    ctx.font = '18px Arial';
    ctx.textAlign = "center";
    ctx.fillStyle = "#ffffff";

    Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
        var meta = self.getDatasetMeta(datasetIndex),
            total = 0, //total values to compute fraction
            labelxy = [],
            offset = Math.PI / 2, //start sector from top
            radius,
            centerx,
            centery, 
            lastend = 0; //prev arc's end line: starting with 0

        for (var val of dataset.data) { total += val; } 

        Chart.helpers.each(meta.data.forEach( function (element, index) {
            radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
            centerx = element._model.x;
            centery = element._model.y;
            var thispart = dataset.data[index],
                arcsector = Math.PI * (2 * thispart / total);
            if (element.hasValue() && dataset.data[index] > 0) {
              labelxy.push(lastend + arcsector / 2 + Math.PI + offset);
            }
            else {
              labelxy.push(-1);
            }
            lastend += arcsector;
        }), self)

        var lradius = radius * 3 / 4;
        for (var idx in labelxy) {
          if (labelxy[idx] === -1) continue;
          var langle = labelxy[idx],
              dx = centerx + lradius * Math.cos(langle),
              dy = centery + lradius * Math.sin(langle),
              val = Math.round(dataset.data[idx] / total * 100);
          ctx.fillText(val + '%', dx, dy);
        }

    }), self);
  }
},

---

使用新的Chart.js 2.1，您可以编写一个插件来执行此操作，并通过

options

属性对其进行控制

---

预览

---

脚本

请注意，在初始化图表之前，需要注册插件

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

然后

new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        showAllTooltips: true
        ...

对于较旧的2.x版本，您应该能够将相同的（或类似的，我不确定早期的数据结构）移动到

options.animation.onComplete

---

---

Fiddle-

ChartJs版本>2.1.5的解决方案：

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

---

我正在寻找类似的解决方案，并偶然发现了这个chartjs插件。它已配置为显示标签、值和百分比等模式。

如果您来到这里是因为您正在寻找一种方法，使饼图始终像我一样悬停。以下是帮助我的解决方案：

---

我只是需要一种方法来以编程方式放大饼图的一部分，而这正是它

根据chart.js的github页面上的一篇文章，不建议永久显示工具提示

本期结束评论提供了更多细节：

这是推荐的永久数据标签插件：

---

我想这就是你要找的@卢克你好，谢谢你抽出时间。不幸的是，该示例使用的是chart.jsv1.0.2。v2上的数据结构和配置与v1不同。我将使用以下数据结构和配置：。这个插件应该做你想做的。当多个数据包含0个数据时，不会显示所有的工具提示。它应该显示的链接，红色-0，绿色-0，但它只显示绿色-0。如何处理这种情况？有一个悬而未决的问题，如果你能回答，那就太好了。问题：我使用的是charts.js 2.2.1，如果您将

\u选项：chart.options

更改为

\u选项：chart.options.tooltips

-我得到错误：chart.tooltips.positions[opts.positions]不是一个函数（版本2.4.0）@potatoPeerings-有没有办法让工具提示“面向另一个方向”？目前，他们面对的是中心，这是小型图表的一个问题：\非常感谢您的想法。@potatopeelings有办法用AngularChart做同样的事情谢谢！在2.4.0中，它已更改为Chart.plugins。register@Fl0R1D3R-有没有办法让工具提示“面向另一个方向”？目前，他们正面临着中心问题，这是小型图表的一个问题。如果您有想法，我将不胜感激。我只想补充一个可以帮助其他人的改进。如果数字小于0，则添加检查。if（chart.data.datasets[0].data[j]>0）{chart.plugintoltips.push（new chart.Tooltip（{….}，chart））；}如何为每个工具提示添加一个事件处理程序？这正是我想要的，tnx！这个插件在循环中泛滥。它可以工作，但滞后很多。