Chart.js v2：如何让工具提示总是出现在饼图上？

Question

我在 Stack Overflow 中找到了 similar questions，但所有这些问题都是在一两年前解决的。现在 Chart.js 已经出现在版本 2 中，许多文档发生了变化。有人可以帮我展示一个带标签的饼图示例 - 或显示所有细分工具提示的饼图吗？

更新

感谢@potatopeelings，他的回答非常适合 Chart.js v2.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);
  }
},

Answer 1

使用新的 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 - http://jsfiddle.net/q15ta78q/

Answer 2

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

Answer 3

我在寻找类似的解决方案并遇到了这个 chartjs 插件 Chart.PieceLabel.js。它具有显示标签、值和百分比等模式的配置。

Answer 4

如果你来到这里是因为你正在寻找一种方法让饼图看起来总是像我一样徘徊。这是帮助我的解决方案： https://nobal.in/technology/chart-js/how-to-highlight-selected-in-pie-doughnut/

我只需要一种以编程方式放大饼图的一部分的方法，就是这样

Answer 5

根据 github 页面上针对 chart.js 的已关闭问题，不建议永久显示工具提示。

关闭此问题的评论提供了更多详细信息：

https://github.com/chartjs/Chart.js/issues/1861#issuecomment-442852768

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

https://github.com/chartjs/chartjs-plugin-datalabels

Chart.js v2：如何让工具提示总是出现在饼图上？

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

javascript

jquery

charts

pie-chart

chart.js