如何在自定义圆环图上绘制针并将数据点添加到针？

Question

我使用 Chart.js、Laravel 和 Bootstrap 3 创建了一个自定义仪表图表，现在我正在尝试绘制针并用针显示数据集。这是我到目前为止所做的，我可以显示仪表，但是我无法显示针头，我不确定如何将数据附加到针头上。提前谢谢大家。

var oilCanvas = document.getElementById("oilChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var oilData = {
  labels: [],
  datasets: [{
    data: [35, 35, 35],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(63, 191, 63, 0.2)'
    ],

    borderWidth: ""
  }]
};

var chartOptions = {
  rotation: -Math.PI,
  cutoutPercentage: 30,
  circumference: Math.PI,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false,
    animateScale: true
  }
};

function drawNeedle(radius, radianAngle) {
  var canvas = document.getElementById("oilChart");
  var ctx = canvas.getContext('2d');
  var cw = canvas.offsetWidth;
  var ch = canvas.offsetHeight;
  var cx = cw / 2;
  var cy = ch - (ch / 4);

  ctx.translate(cx, cy);
  ctx.rotate(radianAngle);
  ctx.beginPath();
  ctx.moveTo(0, -5);
  ctx.lineTo(radius, 0);
  ctx.lineTo(0, 5);
  ctx.fillStyle = 'rgba(0, 76, 0, 0.8)';
  ctx.fill();
  ctx.rotate(-radianAngle);
  ctx.translate(-cx, -cy);
  ctx.beginPath();
  ctx.arc(cx, cy, 7, 0, Math.PI * 2);
  ctx.fill();
}

var pieChart = new Chart(oilCanvas, {
  type: 'doughnut',
  data: oilData,
  options: chartOptions
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
  <canvas id="oilChart"></canvas>
</div>

Answer 1

您可以使用Plugin Core API，它提供了一系列可用于执行自定义代码的挂钩。 afterDraw 挂钩可用于直接在canvas 到CanvasRenderingContext2D 上画针。

首先我们需要在数据集中定义属性needleValue。

datasets: [{
  data: [35, 35, 35],
  needleValue: 580,
  ...
}],

解决方案基于Konstantin S.提供的code sample。请在下面查看您修改后的代码。

new Chart('oilChart', {
  type: 'doughnut',
  plugins: [{
    afterDraw: chart => {
      var needleValue = chart.chart.config.data.datasets[0].needleValue;
      var dataTotal = chart.chart.config.data.datasets[0].data.reduce((a, b) => a + b, 0);
      var angle = Math.PI + (1 / dataTotal * needleValue * Math.PI);
      var ctx = chart.chart.ctx;
      var cw = chart.chart.canvas.offsetWidth;
      var ch = chart.chart.canvas.offsetHeight;
      var cx = cw / 2;
      var cy = ch - 6;

      ctx.translate(cx, cy);
      ctx.rotate(angle);
      ctx.beginPath();
      ctx.moveTo(0, -3);
      ctx.lineTo(ch - 20, 0);
      ctx.lineTo(0, 3);
      ctx.fillStyle = 'rgb(0, 0, 0)';
      ctx.fill();
      ctx.rotate(-angle);
      ctx.translate(-cx, -cy);
      ctx.beginPath();
      ctx.arc(cx, cy, 5, 0, Math.PI * 2);
      ctx.fill();
    }
  }],
  data: {
    labels: [],
    datasets: [{
      data: [35, 35, 35],
      needleValue: 27,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(63, 191, 63, 0.2)'
      ]
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 3
      }
    },
    rotation: -Math.PI,
    cutoutPercentage: 30,
    circumference: Math.PI,
    legend: {
      position: 'left'
    },
    animation: {
      animateRotate: false,
      animateScale: true
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="oilChart" height="80"></canvas>