Question

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

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

Question which explain the tooltip to be shown always

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

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

我的标签和价值观是 “红色”-0， “绿色”-0＆amp; “黄色” -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);
                }
            }

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

1 个答案: