如何在自定义甜甜圈图表上绘制指针并添加数据点？

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>

- Simona Buga

---

这个 和 这个 可能有帮助。 - shrys

Answer 1

你可以使用插件核心 API，它提供了一系列钩子，可用于执行自定义代码。 afterDraw 钩子可用于直接在 CanvasRenderingContext2D 中绘制指针。

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

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

该解决方案基于Konstantin S.提供的代码示例。请查看下面修改后的代码。

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>

- uminder