如何使用Gauge.js添加值

Question

我实际上正在使用gauge.js。它工作正常，但我想在画布底部添加值作为图例。在我的例子中，我只想显示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

使用HTML LABEL Tag.check演示here

Answer 2

在HTML中使用：

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

在你的javascript中：

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