Chart js - avoid overlapping of tooltips in pie chart

问题

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?

This is my code

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.

回答1:

Actually to detect overlapping tooltips is very difficult.

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

来源：https://stackoverflow.com/questions/34282538/chart-js-avoid-overlapping-of-tooltips-in-pie-chart