Блог

Главная - Вопросы по программированию - Калибровочная диаграмма с использованием Chart.js В3

Калибровочная диаграмма с использованием Chart.js В3

#angular #chart.js #gauge #chart.js3

Вопрос:

Кто-нибудь делал калибровочную диаграмму, используя последнюю версию 3.X Chart.js?

Я видел, как люди изменяли диаграммы пончиков в версии 2.X.

Интересно, делал ли кто-нибудь это с помощью 3.X или просто искал несколько советов

Комментарии:

1. Пожалуйста, проясните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы точно указать, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.

Ответ №1:

Вы можете использовать API ядра плагина, который предлагает ряд крючков, которые можно использовать для выполнения пользовательского кода. afterDraw Крючок, например, можно использовать для того, чтобы провести иглу непосредственно по canvas сквозному CanvasRenderingContext2D отверстию .

Пожалуйста, взгляните на приведенный ниже исполняемый код и посмотрите, как это можно сделать с помощью Chart.js версия 3.

 new Chart('myChart', {
  type: 'doughnut',
  plugins: [{
    afterDraw: chart => {
      var needleValue = chart.config.data.datasets[0].needleValue;
      var dataTotal = chart.config.data.datasets[0].data.reduce((a, b) => a   b, 0);
      var angle = Math.PI   (1 / dataTotal * needleValue * Math.PI);
      var ctx = chart.ctx;
      var cw = chart.canvas.offsetWidth;
      var ch = 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: {
    responsive: false,
    aspectRatio: 2,
    layout: {
      padding: {
        bottom: 3
      }
    },
    rotation: -90,
    cutout: '50%',
    circumference: 180,
    legend: {
      display: false
    },
    animation: {
      animateRotate: false,
      animateScale: true
    }
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>
Метки: