自定义标签gauge.js

时间:2018-02-23 14:03:03

标签: javascript html css css3 html5-canvas

我在使用标尺周围的标签显示单位'%'时遇到问题。我使用gauge.js库来绘制仪表。 I want to add a % next to the numbers

例如:5,10,15,20 - > 5%,10%,15%,20%......

/* - main.js - */

var gauge_credit_bail = new Gauge(document.getElementById('gauge_credit_bail')).setOptions({
            angle: 0,
            lineWidth: 0.2,
            radiusScale: .9,
            pointer: {
                length: 0.56,
                strokeWidth: 0.035,
                color: '#111111'
            },
            limitMax: true,
            limitMin: true,
            strokeColor: '#aaa',
            generateGradient: false,
            highDpiSupport: true,
            staticZones: [
                {strokeStyle: "#d30000", min: 1, max: 5},
                {strokeStyle: "#f6db2d", min: 5, max: 10},
                {strokeStyle: "#f6db2d", min: 10, max: 15},
                {strokeStyle: "#f6db2d", min: 15, max: 20},
                {strokeStyle: "#f6db2d", min: 20, max: 25},
                {strokeStyle: "#f6db2d", min: 25, max: 40},
                {strokeStyle: "#3eea34", min: 40, max: 45},
                {strokeStyle: "#3eea34", min: 45, max: 50},
                {strokeStyle: "#3eea34", min: 50, max: 55},
                {strokeStyle: "#3eea34", min: 55, max: 60},
                {strokeStyle: "#45caff", min: 60, max: 65},
                {strokeStyle: "#45caff", min: 65, max: 70}
            ],
            staticLabels: {
                font: "11px sans-serif",
                labels: [1, 5, 10,15, 20, 25,30,35,40,45,50,55,60,65,70],
                color: "#000000",
                fractionDigits: 0
            }
        });
         gauge_credit_bail.setMinValue(1);
         gauge_credit_bail.maxValue = 70;
         gauge_credit_bail.animationSpeed = 10;
    ....
    var index = arr.indexOf(parseFloat(obj.val()));
            if ($(this).data('event') === 'max') {
                if (index < arr.length - 1) {
                    obj.val(arr[index + 1]);
                }
            } else if ($(this).data('event') === 'min') {
                if (index > 0) {
                    obj.val(arr[index - 1]);
                }
            }
    .....
            if (target === 'input_cb_oa') {
                gauge_credit_bail.set(parseFloat(obj.val()));

这是我的仪表标签代码, 谢谢。

0 个答案:

没有答案