Javascript 高度表用于负值

我想创建一个这样的仪表图

$(function () {

var rate_data = {
    "ranges":[
        {"name":"Maintain","start":0, "end":0.12147311428571},        
        {"name":"Slow", "start":0.12147311428571, "end":0.21491397142857},          
        {"name":"Adequate", "start":0.21491397142857, "end":0.8503118}, 
        {"name":"Too Fast",  "start":0.8503118, "end":1.4109569429}
], 
"value":0.4177
};

   $('#container').highcharts({

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },        
    title: {
        text: 'Weight Oscillation Rate'
    },
    credits: {
        enabled: false
    },
    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 1.4109569429,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'side',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: ''
        },
        plotBands: [{
            from: rate_data['ranges'][0]['start'],
            to: rate_data['ranges'][0]['end'],
            color: '#FF8000' // orange
        }, {
            from: rate_data['ranges'][1]['start'],
            to: rate_data['ranges'][1]['end'],
            color: '#DDDF0D' // yellow
        }, {
            from: rate_data['ranges'][2]['start'],
            to: rate_data['ranges'][2]['end'],
            color: '#01DF01' // green
        }, {
            from: rate_data['ranges'][3]['start'],
            to: rate_data['ranges'][3]['end'],
            color: '#DF5353' // red
        }]        
    },

    series: [{
        name: 'Speed',
        data: [80],            
        tooltip: {
            valueSuffix: ' '
        }
    }]

}, 

// Add some life
function (chart) {
    if (!chart.renderer.forExport) {

        var point = chart.series[0].points[0],
            newVal,
            inc = Math.round((Math.random() - 0.5) * 20);

        point.update(rate_data['value']);  

    }
});
});

所以我尝试了highchart库。我可以用正值绘制图表

像这样

$(function () {

var rate_data = {
    "ranges":[
        {"name":"Maintain","start":0, "end":0.12147311428571},        
        {"name":"Slow", "start":0.12147311428571, "end":0.21491397142857},          
        {"name":"Adequate", "start":0.21491397142857, "end":0.8503118}, 
        {"name":"Too Fast",  "start":0.8503118, "end":1.4109569429}
], 
"value":0.4177
};

   $('#container').highcharts({

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },        
    title: {
        text: 'Weight Oscillation Rate'
    },
    credits: {
        enabled: false
    },
    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 1.4109569429,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'side',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: ''
        },
        plotBands: [{
            from: rate_data['ranges'][0]['start'],
            to: rate_data['ranges'][0]['end'],
            color: '#FF8000' // orange
        }, {
            from: rate_data['ranges'][1]['start'],
            to: rate_data['ranges'][1]['end'],
            color: '#DDDF0D' // yellow
        }, {
            from: rate_data['ranges'][2]['start'],
            to: rate_data['ranges'][2]['end'],
            color: '#01DF01' // green
        }, {
            from: rate_data['ranges'][3]['start'],
            to: rate_data['ranges'][3]['end'],
            color: '#DF5353' // red
        }]        
    },

    series: [{
        name: 'Speed',
        data: [80],            
        tooltip: {
            valueSuffix: ' '
        }
    }]

}, 

// Add some life
function (chart) {
    if (!chart.renderer.forExport) {

        var point = chart.series[0].points[0],
            newVal,
            inc = Math.round((Math.random() - 0.5) * 20);

        point.update(rate_data['value']);  

    }
});
});

但它对负值感到不安。这是我的新阵列

var rate_data = {
    "ranges":[
        {"name":"Maintain","start":0, "end":-0.12147311428571},        
        {"name":"Slow", "start":-0.12147311428571, "end":-0.21491397142857},          
        {"name":"Adequate", "start":-0.21491397142857, "end":-0.8503118}, 
        {"name":"Too Fast",  "start":-0.8503118, "end":-1.4109569429}
], 
"value":-0.4177
};

请查收

---

我在网上找不到解决办法。（我还需要在数组中添加名称作为标签。可能吗？

这里有几个问题

1） 您已将yAxis最小值设置为0。它不会以这种方式显示负数。调整最小值和最大值以反映所需的实际值

2） 这样做之后，你会发现你的乐队都不正常了

以相反的方式指定开始/结束值：开始值应为较小的数字，结束值应为较大的数字

示例

：

---

对于希望获得相同外观和感觉的人，这将有所帮助

请参阅下面的脚本

Highcharts.chart（'container'{
图表：{
类型：“仪表”，
背景颜色：“透明”
},
标题：{
文本：“”
},
窗格：{
背景：空，
startAngle:-90，
端角：90，
中心：['50%，'50%']，
},
//价值轴
亚克斯：{
线宽：0，
最小值：-1.4，
最高：0，
minorTickInterval:“自动”，
minorTickWidth:1，
minorTickLength:10，
minorTickPosition:“内部”，
minorTickColor:“#666”，
像素间隔：0.1，
宽度：2，
位置：'侧'，
长度：10，
勾选颜色：'#666'，
标签：{
步骤：2，
y:20，
风格：{
颜色：“#000”，
游标：'default'，
字体大小：'14px'
}
},
标题：{
正文：“进展”，
风格：{
颜色：“#FFF”，
fontWeight:“粗体”
},
y:60
},
绘图带：[{
从：-1.40开始，
至：-0.85，
颜色：'#3285167d'，//绿色
厚度：50，
标签：{
文字：“太快了！”，
textAlign:'中心'，
x:160
}
}, {
从：-0.85开始，
至：-0.21，
颜色：'#DDDF0D'，//黄色
厚度：50
}, {
从：-0.21开始，
至：-0.12，
颜色：'#DF5353'，//红色
厚度：50
}, {
从：-0.12开始，
至:0,，
颜色：'蓝色'，//蓝色
厚度：50
}]
},
系列：[{
名称：'进度'，
数据：[-0.1]，
工具提示：{
valueSuffix:“进度”
}
}]
},
//增添活力
功能（图表）{
});
#容器{
高度：400px；
}
.highcharts图、.highcharts数据表{
最小宽度：310px；
最大宽度：500px；
保证金：1em自动；
}
.海图数据表{
字体系列：Verdana，无衬线；
边界塌陷：塌陷；
边框：1px实心#ebebebeb；
利润率：10px自动；
文本对齐：居中；
宽度：100%；
最大宽度：500px；
}
.highcharts数据表标题{
填充：1em 0；
字体大小：1.2米；
颜色：#555；
}
.海图数据表th{
字号：600；
填充：0.5em；
}
.highcharts数据表td、.highcharts数据表th、.highcharts数据表标题{
填充：0.5em；
}
.highcharts数据表thead tr、.highcharts数据表tr:n个子项（偶数）{
背景：#f8f8；
}
.highcharts数据表tr：悬停{
背景#f1f7ff；
}