2015-12-15 15 views
5

Ich habe Diagramm js Bibliothek für Make Tortendiagramm verwendet. Ich möchte immer Tooltips anzeigen. Ich habe das getan. Ich habe einen Screenshot angehängt.Chart js - vermeiden Sie Überlappungen von Tooltips im Tortendiagramm

enter image description here

Aber jetzt sind die Tooltips überlappt. Wie löst man das? Tooltip Position ändern, wenn bereits eine in dieser Position

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

ich will.

Antwort

1

Eigentlich ist es sehr schwierig, überlappende Tooltips zu erkennen.

Ich habe es am Ende gelöst, indem ich die Farbe in der Toolbox deaktiviere, die Größe des Tooltips reduziere, den Tooltip näher an den äußeren Rand ziehe und alle Tooltips verberge, die weniger als 2% ausmachen. Beispiel sieht wie folgt aus: oem_history 5

ich dafür verwendet, den folgenden 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; 
     } 
     } 
    });