图表js - 避免饼图中工具提示的重叠

问题描述：

我已经使用图表js库来制作饼图。我想要始终显示工具提示。我已经做到了。我附上了截图。图表js - 避免饼图中工具提示的重叠

但现在的提示重叠。如何解决这个问题？

这是我的代码

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

我想改变工具提示的位置，如果已经在该位置的一个存在。

答

其实要检测重叠的工具提示是非常困难的。

我最终通过停用工具箱中的颜色解决了这个问题，缩小了工具提示的大小，将工具提示移动到了更接近外部边框的位置，并隐藏了所有工具提示，这些工具提示的代表不到2％。实施例看起来像这样： oem_history 5

我用于下面的代码：

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 - 避免饼图中工具提示的重叠

相关推荐