如何向用户显示像这张图片这样的"consuming information"？

Question

抱歉，但我无法解释比展示这张照片更好的解释

消费信息

是否有已经实现的库/引导程序/代码可以显示像这张图片这样的信息？我什至不能说出它的名字...它不是饼图，我不知道如何命名，但我认为它一定已经在某处实现过。

我需要显示一个像这张图片这样的数字，无论用户在哪里消费这个值，它都应该在这个"圆形图表"中减少。

提前谢谢大家！

Answer 1

我认为"仪表"是这样的东西的最佳名称，您可以使用库创建一个：

http://bernii.github.io/gauge.js/

和下面的代码

var opts = {
angle: 0.35, // The span of the gauge arc
lineWidth: 0.1, // The line thickness
radiusScale: 1, // Relative radius
pointer: {
length: 0.6, // // Relative to gauge radius
strokeWidth: 0.035, // The thickness
color: '#000000' // Fill color
},
limitMax: false,     // If false, max value increases automatically if value > maxValue
limitMin: false,     // If true, the min value of the gauge will be fixed
colorStart: '#6F6EA0',   // Colors
colorStop: '#C0C0DB',    // just experiment with them
strokeColor: '#EEEEEE',  // to see which ones work best for you
generateGradient: true,
highDpiSupport: true,     // High resolution support
};
var target = document.getElementById('graph'); // your canvas element
var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(1250); // set actual value

不要忘记在页面中包含脚本，并在页面中添加一个ID为"graph"的元素，例如

<div id="graph"></div>