图表JS:甜甜圈/甜甜圈图:始终显示所有数据的工具提示.当多个数据均为0时，不显示所有工具提示 [英] Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data

问题描述

我创建了一个甜甜圈图.我想始终在甜甜圈图中显示工具提示以及图例.

I have created a donut chart. I want to display the tooltip always in the donut chart along with the legends.

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

I have followed this stack overflow question.

说明工具提示的问题始终显示

我遵循了答案，并创建了一个甜甜圈图，并试图始终显示工具提示.

I have followed the answer and created a doughnut chart and tried to show the tooltip always.

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

it works fine, however it is not showing all the label, esp. when you have multiple data with 0 value.It just overwrite the label.

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

my label and values are "Red" -0, "Green" -0 & "Yellow"-100

这里显示了黄色-100"和绿色-0"的工具提示，我认为它在红色-0"的上方被覆盖.如何同时显示"Red-0"和"Green-0"的工具提示.

here is shows tooltip for "Yellow-100" and "Green-0", i think it is overwriting on top of "Red-0". How to show tooltip for "Red-0" and "Green-0" both together.

html:

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

JavaScript:

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的链接.

here is the link for jsfiddle.

甜甜圈图0数据工具提示并未全部显示

图表版本:2.1.0

Chart Version : 2.1.0

请帮助.

推荐答案

您可以使用工具提示回调来检查其中包含哪些数据并将其放置在其他位置.

you could use the tooltip callbacks in order to check which data is inside and place it on a different position.

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

For example you could return the red label in the title and the green one in the footer:

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

这篇关于图表JS:甜甜圈/甜甜圈图:始终显示所有数据的工具提示.当多个数据均为0时，不显示所有工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！