如何繼續前進chart.js之餅標籤的位置

我使用chart.js之，我想我的餅圖上的移動標籤的餅圖區域外（見紅X的）：如何繼續前進chart.js之餅標籤的位置

這是我的代碼現在：

<div class="container" id="pieContainer"> 
    <h4 class="title">Title</h4> 
    <center><canvas id="pie"></canvas></center> 
</div> 

<script>         
    var pieData = [ 
    { 
     value: 39, 
     color:"#335478", 
     label: "Blue" 
    }, 
    { 
     value : 4, 
     color : "#7f7f7f", 
     label: "Grey" 
    }, 
    { 
     value : 57, 
     color : "#99cb55", 
     label: "Green" 
    } 
    ]; 

    var optionsPie = { 
     responsive : true, 
     tooltipEvents: [], 
     showTooltips: true, 
     onAnimationComplete: function() { 
      this.showTooltip(this.segments, true); 
     }, 
     tooltipTemplate: "<%= label %> - <%= value %>%" 
    }; 
    new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData, optionsPie); 
</script>

我不想用傳說和我找不到一個內置的方法移動標籤。有沒有辦法做到這一點，而不會改變chart.js？什麼是實現我的目標的最佳方式？

來源

2016-03-24 DMEM

只是延長圖表來做到這一點。如果您的標籤是靜態的，那麼只需更改tooltipPosition方法可能會更簡單。

預覽

腳本

Chart.types.Pie.extend({ 
    name: "PieAlt", 
    initialize: function(data){ 
     Chart.types.Pie.prototype.initialize.apply(this, arguments); 

     var requiredSpace = 0; 
     for (var i = 0; i < data.length; i++) 
      requiredSpace = Math.max(ctx.measureText(Chart.helpers.template(this.options.tooltipTemplate, data[i])).width, requiredSpace); 
     this.outerRadius -= (requiredSpace + 20); 
    }, 
    draw: function(data){ 
     Chart.types.Pie.prototype.draw.apply(this, arguments); 

     var self = this; 
     ctx.save(); 
     ctx.font = Chart.helpers.fontString(self.options.scaleFontSize, self.options.scaleFontStyle, self.options.scaleFontFamily); 
       ctx.textBaseline = "middle"; 
     self.segments.forEach(function (segment) { 
      var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({ 
       x: this.chart.width/2, 
       y: this.chart.height/2, 
       startAngle: segment.startAngle, 
       endAngle: segment.endAngle, 
       outerRadius: segment.outerRadius * 2 + 20, 
       innerRadius: 0 
      }) 

      var normalizedAngle = (segment.startAngle + segment.endAngle)/2; 
      while (normalizedAngle > 2 * Math.PI) { 
       normalizedAngle -= (2 * Math.PI) 
      } 

      if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5)) 
       ctx.textAlign = "start"; 
      else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) { 
       outerEdge.y += 5; 
       ctx.textAlign = "center"; 
      } 
      else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) { 
       outerEdge.y - 5; 
       ctx.textAlign = "center"; 
      } 
      else 
       ctx.textAlign = "end"; 

      ctx.fillText(Chart.helpers.template(self.options.tooltipTemplate, segment), outerEdge.x, outerEdge.y); 
     }); 

     ctx.restore(); 
    } 
});

然後

new Chart(ctx).PieAlt(data, { 
    showTooltips: false 
});

小提琴 - http://jsfiddle.net/h8rggkhp/

來源

2016-03-25 11:00:49 potatopeelings

它看起來像你控制的工具提示的X和Y位置：

var myPieChart = new Chart(ctx).Pie(data, { 
    customTooltips: function(tooltip) { 

     // tooltip will be false if tooltip is not visible or should be hidden 
     if (!tooltip) { 
      return; 
     } 

     // Otherwise, tooltip will be an object with all tooltip properties like: 

     // tooltip.caretHeight 
     // tooltip.caretPadding 
     // tooltip.chart 
     // tooltip.cornerRadius 
     // tooltip.fillColor 
     // tooltip.font... 
     // tooltip.text 
     // tooltip.x 
     // tooltip.y 
     // etc... 

    }; 
});

看看http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options

來源

2016-03-24 20:22:29

如何繼續前進chart.js之餅標籤的位置

回答

相關問題