Question

我在Stack Overflow中找到similar questions，但所有这些都在一年前和两年前被解决了。现在Chart.js出现在版本2中，并且许多文档都发生了变化。有人可以帮我展示带有标签的饼图示例 - 或者饼图及其所有片段的工具提示是否可见？

更新

感谢@potatopeelings，他的回答非常适合Chart.js v2.1。

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

{{1}}

Answer 1

ChartJs版本的解决方案＆gt; 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 2

使用新的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

小提琴 - http://jsfiddle.net/q15ta78q/

Answer 3

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

Answer 4

根据chart.js的github页面上已解决的问题，建议不要永久显示工具提示。

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

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

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

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

Answer 5

如果您来这里是因为您正在寻找一种使饼形图始终像我一样徘徊的方法。这是对我有帮助的解决方案： https://nobal.in/technology/chart-js/how-to-highlight-selected-in-pie-doughnut/

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

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

5 个答案: