图表JS-避免饼图中的工具提示重叠 [英] Chart js - avoid overlapping of tooltips in pie chart

问题描述

我已使用Chart js库制作饼图.我想一直显示工具提示.我已经做到了我已经附上了屏幕截图.

I've used chart js library for make pie chart. I want to display tooltips always. I've done this. I've attached screenshot.

但是现在工具提示已经重叠了.该如何解决?

But now the tooltips are overlapped . How to solve this?

这是我的代码

myPieChart = new Chart(pie_chart).Pie(data_results.comp.pie, {
          tooltipTemplate: "<%= value %> %",
          scaleFontSize: 14,
          scaleFontColor: "#333",
          tooltipFillColor: "rgba(0,0,0,0)",
          onAnimationComplete: function()
          {
              this.showTooltip(this.segments, true);
          },

          tooltipEvents: [],
          tooltipFontColor: "#000",
          });

如果工具提示位置中已经存在一个工具，我想更改它.

I want to change tooltip position if already one present in that position.

推荐答案

实际上很难检测到重叠的工具提示.

Actually to detect overlapping tooltips is very difficult.

最后，我通过禁用工具箱中的颜色，减小了工具提示的大小，将工具提示移至更靠近外边界并隐藏了所有少于2％的工具提示来解决了该问题.示例如下所示:

I solved it in the end by deactivating the color in the toolbox, reducing the size of the tooltip, moving the tooltip closer to the outer border and hiding all tooltips, which represent less than 2%. Example looks like that:

我为此使用了以下代码:

I used for that the following code:

Chart.Tooltip.positioners.outer = function(elements) {
    if (!elements.length) {
        return false;
    }

    var i, len;
    var x = 0;
    var y = 0;

    for (i = 0, len = elements.length; i < len; ++i) {
        var el = elements[i];
        if (el && el.hasValue()) {
            var elPosX = el._view.x+0.95*el._view.outerRadius*Math.cos((el._view.endAngle-el._view.startAngle)/2+el._view.startAngle);
            var elPosY = el._view.y+0.95*el._view.outerRadius*Math.sin((el._view.endAngle-el._view.startAngle)/2+el._view.startAngle);
            if (x < elPosX) {
                x = elPosX;
            }
            if (y < elPosY) {
                y = elPosY;
            }
        }
    }

    return {
        x: Math.round(x),
        y: Math.round(y)
    };
},

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) {
                    if ((sector._view.endAngle-sector._view.startAngle) > 2*Math.PI*0.02) {
                        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._options.position = "outer";
                tooltip._options.displayColors = false;
                tooltip._options.bodyFontSize = tooltip._chart.height*0.025;
                tooltip._options.yPadding = tooltip._options.bodyFontSize*0.30;
                tooltip._options.xPadding = tooltip._options.bodyFontSize*0.30;
                tooltip._options.caretSize = tooltip._options.bodyFontSize*0.5;
                tooltip._options.cornerRadius = tooltip._options.bodyFontSize*0.50;
                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;
        }
      }
    });

这篇关于图表JS-避免饼图中的工具提示重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！