Question

对不起，但是我不能比显示这张图片更好地解释

docs

是否已经实现了可以显示如下图所示信息的库/引导程序/代码？我什至无法命名...它不是饼图，我不知道如何命名，但是我认为它必须已经在某个地方实现。

我需要显示一个类似于此图像的数字，无论用户在何处使用此值，它都应在此“圆形图表”中减小。

谢谢大家！

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>

如何向用户显示像这样的“消费信息”？

1 个答案: