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

Question

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

我试图使用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';
};

还有一个工作实例 。