Javascript 如何制作虚线和实线圆环图.js

如何在chart.js或任何其他框架中制作类似此图表的内容

---

两个不需要任何框架的想法：

1.二次曲线梯度 我想知道你是否可以使用CSS圆锥渐变来实现这一点。可以使用a表示虚线，使用正则表达式表示填充值

注意：这种方法在IE中不起作用，因为IE

概念证明：

正文{
/*
设置两个自定义属性以指定颜色。
如果愿意，您可以硬编码，但这样可以避免
必须在不同的地方重复相同的颜色
以后换衣服比较容易
*/
--fgcolor:#346b79；
--bgcolor:#04151f；
/*设置页面的背景色*/
背景：var（--bgcolor）；
}
.演示{
/*使div成为一个圆。400px是任意的*/
宽度：400px；
高度：400px；
边界半径：50%；
/*
这里是神奇的部分。一个圆锥梯度来填充“值”区域
还有第二个，重复的圆锥梯度，用来做破折号。破折号
到处走，但被填充物覆盖。
*/
背景图像：
圆锥梯度（var（--fgcolor）0度，var（--fgcolor）204度，透明204度），
重复圆锥梯度（var（--fgcolor）0度0.5度，var（--bgcolor）0.5度2度）；
/*将内容放在两个轴的中心*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
/*在页面上给它一些空间，使其居中*/
保证金：1rem自动；
}
.demo>span{
/*“价值”要素*/
/*设置内圈的大小*/
宽度：70%；
身高：70%；
/*用背景色填充中心*/
背景：var（--bgcolor）；
/*围成一个圈*/
边界半径：50%；
/*将值在两个轴上居中*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
/*文本处理*/
颜色：白色；
字体大小：5rem；
字体系列：无衬线；
字体大小：粗体；
}

64%

如果您使用的是框架，则可以使用诸如recharts或highcharts之类的库。选中此项。这在chart.js中默认情况下是不可能的，您必须为其编写自己的绘图函数。