首页 文章

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

提问于
浏览
0

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

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

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

请帮忙 .

1 回答

  • 0

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

    例如,您可以返回 Headers 中的红色标签和页脚中的绿色标签:

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

相关问题