Grafico js - evitare sovrapposizioni di descrizioni comandi nel grafico a torta

Question

Ho usato la libreria js chart per creare un grafico a torta. Voglio visualizzare sempre i suggerimenti. L'ho fatto. Ho allegato screenshot.

Ma ora le descrizioni comandi sono sovrapposti. Come risolvere questo?

Questo è il mio codice

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

voglio cambiare posizione tooltip se già uno presente in quella posizione.

Answer 1

In realtà per rilevare le descrizioni dei comandi sovrapposte è molto difficile.

L'ho risolto alla fine disattivando il colore nella casella degli strumenti, riducendo la dimensione del suggerimento, spostando il suggerimento più vicino al bordo esterno e nascondendo tutti i suggerimenti, che rappresentano meno del 2%. Esempio sembra che:

ho usato per che il seguente codice:

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