如何使用 ChartJS v3 创建一个简单的仪表？

Question

如何使用 ChartJS v3 创建一个简单的仪表？

我在以前的项目中使用ChartJS v2 创建如下所示的仪表：

在 React 集成期间，我需要做同样的事情，但需要从 Donut 修改本身开始，新安装的该库的 v3 版本。

这是当前的配置：

export const GaugeChart: VFC<GaugeChartProps> = ({
  value,
  max = 100,
})  => {
  const percent = value / max;

  return <ChartJS
    type="doughnut"
    data={{
      datasets: [
        {
          backgroundColor: [
            'rgb(255, 99, 132)',
            '#ccc',
          ],
          data: [
            percent * 100,
            100 - (percent * 100),
          ],
        },
      ],
    }}
    options={{
      rotation: -1.0 * Math.PI, // start angle in radians
      circumference: Math.PI, // sweep angle in radians
    }}
  />
};

Run Code Online (Sandbox Code Playgroud)

注意：type、data和optionsprops 是 ChartJS 配置本身的一部分，该组件只是一个包装器。

这是我得到的：

我缺少什么？

Answer 1

Lee*_*lee 22

根据v3 中的迁移指南，rotation和circumference选项以度数而不是弧度为单位，如果将它们放置为度数，则效果很好：

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    rotation: 270, // start angle in degrees
    circumference: 180, // sweep angle in degrees
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

Run Code Online (Sandbox Code Playgroud)

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，1 月前
查看次数：	19928 次
最近记录：	4 年，1 月前