如何用 Gauge.js 添加值

Question

我实际上正在与 gauge.js 合作。它工作正常，但我想在 canvas 底部添加与图例相同的值。在我的示例中，我只想显示 41%。你知道实现这部分的方法吗？

这是 jsfiddle：http://jsfiddle.net/mopaetxp/

<canvas id="foo"></canvas>

var opts = {
lines: 12, // The number of lines to draw
angle: 0, // The length of each line
lineWidth: 0.1, // The line thickness
pointer: {
length: 0.9, // The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: '#000000' // Fill color
},
limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
colorStart: '#006EAB',   // Colors
colorStop: '#006EAB',    // just experiment with them
strokeColor: '#FFFFFF',   // to see which ones work best for you
generateGradient: true
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 10; // set animation speed (32 is default value)
gauge.set(41); // set actual value

非常感谢。

Answer 1

使用HTMLLABELTag.check演示here

Answer 2

在HTML中使用：

<canvas id="canvas" class="canvas-speedometer"></canvas> <span id="gauge-value"></span>

在你的javascript中：

gauge.setTextField(document.getElementById('gauge-value'));

如何用 Gauge.js 添加值

How to add the value with Gauge.js

javascript

gauge