图表 JS：甜甜圈/甜甜圈图表：始终为所有数据显示的工具提示。当多个数据为 0 数据时，不显示所有工具提示

Question

我创建了一个圆环图。我想始终在圆环图中显示工具提示以及图例。

我已经关注了这个堆栈溢出问题。

Question which explain the tooltip to be shown always

我已按照答案创建了一个圆环图并尝试始终显示工具提示。

它工作正常，但它没有显示所有标签，尤其是。当您有多个值为 0 的数据时。它只是覆盖标签。

我的标签和值是 “红色”-0， “绿色”-0 & “黄色”-100

这里显示了“Yellow-100”和“Green-0”的工具提示，我认为它覆盖在“Red-0”之上。如何同时显示“Red-0”和“Green-0”的工具提示。

html:

<canvas id="canvas"></canvas>

Javascript：

var ctx = document.getElementById("canvas").getContext("2d");

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

        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 myPieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                showAllTooltips: true
            }
        });

这里是 jsfiddle 的链接。

doughnut chart 0 data tooltip is not shown for all

图表版本：2.1.0

请帮忙。

Answer 1

您可以使用工具提示回调来检查其中的数据并将其放置在不同的位置。

例如，您可以在标题中返回红色标签，在页脚中返回绿色标签：

            callbacks: {
               title: function(tooltipItems, data) {
                  return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
                },
                label: function(tooltipItem, data) {
                    //remove body, show data only in title
                },
                footer: function(tooltipItems, data) {
                     return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
                }
            }