chart.js - 如何使用 ChartJS v3 创建一个简单的仪表?
问题描述
我在以前的项目中使用ChartJS v2 来创建如下所示的仪表:
在 React 集成期间,我需要做同样的事情,但要从新安装的这个库的 v3 版本开始,从 Donut 修改本身开始。
这是当前的配置:
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
}}
/>
};
注意:type
和data
propsoptions
是 ChartJS 配置本身的一部分,组件只是一个包装器。
这是我得到的:
我错过了什么?
解决方案
根据v3 中的迁移指南rotation
, andcircumference
选项以度数而不是弧度为单位,如果将它们作为度数放置,它就可以正常工作:
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);
<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>
推荐阅读
- spring - Spring Boot 调用 RedisTemplate.execute lua 脚本未连接字符串
- mapbox - Mapbox studio:如何在任何缩放级别显示建筑物
- c# - 自己编程的 LINQ 扩展方法
- python - 如何使用 Python Pillow (PIL) 获得部分灰度图像?
- go - 使用 xsdgen 解组 XML
- flutter - Dart,我无法在 foreach 中返回任何内容
- firebase - 部署少量云功能后 Firebase 云存储带宽太高
- javascript - 仅使用突变的有效负载参数来修改 Vuex 状态是否可以?
- reactjs - 用地图显示列表中的一些特定项目
- python - 如何在行中读取文件并返回到特定行以再次读取它