如何使用reactjs在chart.js的甜甜圈图上显示车速表

IT技术 reactjs chart.js
2021-05-04 09:30:51

我创建了一个半圆环图，想像速度计一样显示，但无法做到。我已经浏览了这个链接我想显示我的图表 类似于上面的链接或片段按照这个片段

这是我的代码：

import React, { Component } from "react";
import { Doughnut } from "react-chartjs-2";
import Data from "./Data.json";
const data = {
  // labels: ["Red", "Green", "Yellow"],
  datasets: [
    {
      data: [500, 500, 500],
      backgroundColor: ["red", "#FFCE56", "lightgreen"],
      hoverBackgroundColor: ["red", "#FFCE56", "lightgreen"]
    }
  ],
  options: {
    rotation: 1 * Math.PI,
    circumference: 1 * Math.PI,
    legend: {
      display: false
    },
    tooltip: {
      enabled: false
    },
    cutoutPercentage: 70
  }
};

export default class DonutChart extends Component {
  render() {
    return (
      <div>
        <h2>Sample</h2>
        <Doughnut height="100px" data={data} options={data.options} />
      </div>
    );
  }
}

这是示例代码

任何人都可以在此查询中帮助我以这种格式实现吗？

1个回答

根据Konstantin S.的代码示例，您可以在方法内全局注册一个插件并实现如下功能：componentDidMount()afterDraw

componentDidMount() {
  Chart.pluginService.register({
    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 - 10, 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();
    }
  });
}

这期望needleValue在数据集内定义属性。

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

请查看您修改后的CodeSandbox

其它你可能感兴趣的问题
上一篇如何在 Material-UI DataGrid 中删除多个选定的行？ 下一篇AppBar Material UI 问题