Question

＆＃13;

 $(document).ready(function(){
 function call() {
   $.ajax({
	url: "chartjs/tempdata.php",
	method:"GET",
	cache: false,
	success: function(data) {
   		console.log(data);
		var difference=[];
		var percentage=[];
		var finaldata=[];
		
		for(var i in data) {
			//time.push( data[i].timeid+"hr");
			percentage.push(data[i].soc);
			percentage[0]=(percentage[0]/1000);
percentage[0]=Number(Math.round(percentage[0]+'e2')+'e-2');
				  }
	difference[0]=100-percentage[0];
	finaldata[0]=difference[0];
	finaldata[1]=percentage[0];
		var data = {
    labels: [
        "uncharged",
        
        "charged"
    ],
    datasets: [
        {
            data: finaldata,
            backgroundColor: [
                "#282828",
               
                "#FFFFFF"
            ],
            /*hoverBackgroundColor: [
                "#282828",
               
                "#FFFFFF "
             ]*/
        }]
};

var options = {        
     cutoutPercentage: 80
};


//var option = {scales: { yAxis:}}
				    //Chart.defaults.global.defaultFontColor = '#fff';

				var ctx = $("#candnut");
				var lineGraph = new Chart(ctx, {
					type: 'doughnut',
					data: data,
					options: options

				});
Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx,
        type = chart.config.type;

    if (type == 'doughnut')
    {
    	var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) /
                    (chart.config.data.datasets[0].data[0] +
                    chart.config.data.datasets[0].data[1]));
			var oldFill = ctx.fillStyle;
      var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2);
      
      ctx.restore();
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle"

      var text = percentage[0] + "%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = (height + chart.chartArea.top) / 2;
			
      ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[1];
      ctx.fillText(text, textX, textY);
      ctx.fillStyle = oldFill;
      ctx.save();

    }
  }
});

	},
	error: function(data) {
		console.log(data);
	}

   });
}
call();
setInterval(call, 10000);
});

＆＃13;

我正在尝试使用chartjs在甜甜圈哈特的中心显示标签并显示良好但是当百分比值改变时它会重叠。我在网上搜索它，在github上的圆环图＃707中有类似的标签。

我无法弄清楚为什么会这样。

现在我添加了我的代码。在您的情况下，当用户将鼠标悬停在它上面时，只有它是可见的。但在我的图表中，我只有两个字段，我想在其中心显示其中一个。

Answer 1

我认为问题在于您正在使用先前的状态，因为您正在使用public class MainActivity extends AppCompatActivity { private TextView warningText; private final long TIME_TO_CHANGE = 3000; private Handler handler = new Handler(); private int counter = 0; private int[] R = {0, 200}, G = {0, 200}, B = {200, 0}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); warningText = (TextView) findViewById(R.id.warning); warningText.setTextColor(Color.rgb(0,0,0)); handler.postDelayed(new Runnable() { @Override public void run() { updateTextColor(); handler.postDelayed(this, TIME_TO_CHANGE); } }, TIME_TO_CHANGE); } private void updateTextColor(){ runOnUiThread(new Runnable() { @Override public void run() { counter = (counter+1)%2; warningText.setTextColor(Color.rgb(R[counter],G[counter],B[counter])); } }); } @Override public void onPause(){ super.onPause(); handler.removeCallbacksAndRunnables(null); } }和ctx.restore()围绕画布绘制逻辑。尝试删除它，它应该工作。另外，您可能希望将逻辑放在ctx.save()回调中（而不是afterDraw）。

此外，这是实现相同行为的另一种方法，但它使用自定义工具提示。这很好，因为它可以让你通过html / css更灵活地改变外观。您的方法仅限于了解画布API以绘制像素。

基本上，您使用位于图表中间的外部自定义工具提示，这是在图表片段悬停时触发的。

以下是相关代码

beforeDraw

还有一个working example。

使用chartjs在圆环图中标记问题

1 个答案: