चार्ट जेएस - पाई चार्ट

Question

में टूलटिप्स के ओवरलैपिंग से बचें मैंने पाई चार्ट बनाने के लिए चार्ट जेएस लाइब्रेरी का उपयोग किया है। मैं हमेशा टूलटिप्स प्रदर्शित करना चाहता हूं। मैंने यह किया है मैंने स्क्रीनशॉट संलग्न किया है।

लेकिन अब टूलटिप्स ओवरलैप हो रहे हैं। इसे कैसे हल करें?

यह मैं अगर पहले से ही उस स्थिति में एक वर्तमान टूलटिप स्थिति बदलना चाहते हैं मेरे कोड

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

है।

Answer 1

वास्तव में ओवरलैपिंग टूलटिप्स का पता लगाने के लिए बहुत मुश्किल है।

मैंने टूलबॉक्स में रंग को निष्क्रिय करके, टूलटिप के आकार को कम करने, टूलटिप को बाहरी सीमा के करीब ले जाने और सभी टूलटिप्स को छिपाने के साथ अंत में हल किया, जो 2% से कम का प्रतिनिधित्व करता है। उदाहरण है कि तरह लग रहा है:

मुझे लगता है कि के लिए इस्तेमाल किया निम्नलिखित कोड:

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