標籤問題chartjs

Question

$(document).ready(function(){ 
 
function call() { 
 
    $.ajax({ 
 
\t url: "chartjs/tempdata.php", 
 
\t method:"GET", 
 
\t cache: false, 
 
\t success: function(data) { 
 
    \t \t console.log(data); 
 
\t \t var difference=[]; 
 
\t \t var percentage=[]; 
 
\t \t var finaldata=[]; 
 
\t \t 
 
\t \t for(var i in data) { 
 
\t \t \t //time.push(data[i].timeid+"hr"); 
 
\t \t \t percentage.push(data[i].soc); 
 
\t \t \t percentage[0]=(percentage[0]/1000); 
 
percentage[0]=Number(Math.round(percentage[0]+'e2')+'e-2'); 
 
\t \t \t \t } 
 
\t difference[0]=100-percentage[0]; 
 
\t finaldata[0]=difference[0]; 
 
\t finaldata[1]=percentage[0]; 
 
\t \t var data = { 
 
    labels: [ 
 
     "uncharged", 
 
     
 
     "charged" 
 
    ], 
 
    datasets: [ 
 
     { 
 
      data: finaldata, 
 
      backgroundColor: [ 
 
       "#282828", 
 
       
 
       "#FFFFFF" 
 
      ], 
 
      /*hoverBackgroundColor: [ 
 
       "#282828", 
 
       
 
       "#FFFFFF " 
 
      ]*/ 
 
     }] 
 
}; 
 

 
var options = {   
 
    cutoutPercentage: 80 
 
}; 
 

 

 
//var option = {scales: { yAxis:}} 
 
\t \t \t \t  //Chart.defaults.global.defaultFontColor = '#fff'; 
 

 
\t \t \t \t var ctx = $("#candnut"); 
 
\t \t \t \t var lineGraph = new Chart(ctx, { 
 
\t \t \t \t \t type: 'doughnut', 
 
\t \t \t \t \t data: data, 
 
\t \t \t \t \t options: options 
 

 
\t \t \t \t }); 
 
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') 
 
    { 
 
    \t 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])); 
 
\t \t \t 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; 
 
\t \t \t 
 
     ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[1]; 
 
     ctx.fillText(text, textX, textY); 
 
     ctx.fillStyle = oldFill; 
 
     ctx.save(); 
 

 
    } 
 
    } 
 
}); 
 

 
\t }, 
 
\t error: function(data) { 
 
\t \t console.log(data); 
 
\t } 
 

 
    }); 
 
} 
 
call(); 
 
setInterval(call, 10000); 
 
});

我試圖用chartjs和顯示良好，但是當百分比值的變化它就會重疊在甜甜圈哈特中心顯示標籤。我在網上搜索它，並在github上的圓環圖問題＃78中有類似的標籤。

我無法弄清楚它爲什麼會發生。

現在我添加了我的代碼。 在你的情況下，當用戶將鼠標懸停在它上面時，只有它是可見的。 但在我的圖表中我只有兩個字段，我想在中心顯示其中的一個。

Answer 1

我認爲問題在於，您正在使用以前狀態的頂部，因爲您正在使用圍繞您的畫布繪製邏輯的ctx.restore()和ctx.save()。嘗試刪除它，它應該工作。此外，你可能想把你的邏輯放在afterDraw的回調中（而不是beforeDraw）。

此外，這是實現相同行爲的另一種方法，但它使用自定義工具提示。這很好，因爲它可以讓你更靈活地通過html/css改變外觀和感覺。您的方法僅限於瞭解畫布API以繪製像素。

基本上，您使用位於圖表中間的外部自定義工具提示，該工具提示在圖表段懸停時觸發。

下面是相關代碼

Chart.defaults.global.tooltips.custom = function(tooltip) { 
    // Tooltip Element 
    var tooltipEl = document.getElementById('chartjs-tooltip'); 

    // Hide if no tooltip 
    if (tooltip.opacity === 0) { 
    tooltipEl.style.opacity = 0; 
    return; 
    } 

    // Set Text 
    if (tooltip.body) { 
    var total = 0; 

    // get the value of the datapoint 
    var value = this._data.datasets[tooltip.dataPoints[0].datasetIndex].data[tooltip.dataPoints[0].index].toLocaleString(); 

    // calculate value of all datapoints 
    this._data.datasets[tooltip.dataPoints[0].datasetIndex].data.forEach(function(e) { 
     total += e; 
    }); 

    // calculate percentage and set tooltip value 
    tooltipEl.innerHTML = '<h1>' + (value/total * 100) + '%</h1>'; 
    } 

    // calculate position of tooltip 
    var centerX = (this._chartInstance.chartArea.left + this._chartInstance.chartArea.right)/2; 
    var centerY = ((this._chartInstance.chartArea.top + this._chartInstance.chartArea.bottom)/2); 

    // Display, position, and set styles for font 
    tooltipEl.style.opacity = 1; 
    tooltipEl.style.left = centerX + 'px'; 
    tooltipEl.style.top = centerY + 'px'; 
    tooltipEl.style.fontFamily = tooltip._fontFamily; 
    tooltipEl.style.fontSize = tooltip.fontSize; 
    tooltipEl.style.fontStyle = tooltip._fontStyle; 
    tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; 
}; 

而一個working example爲好。