highcharts 衡量负值的使用

Question

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

所以我尝试了 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
};

请检查http://jsfiddle.net/fWvCT/

我在互联网上找不到解决方案。 （我还需要将数组中的名称添加为标签。这可能吗？）

Answer 1

这里有几个问题。

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

2) 这样做之后，你会发现你的乐队已经不正常了。

您可以反向指定开始/结束值：开始应该是较低的数字，而结束应该是较高的。

Example ：

• http://jsfiddle.net/jlbriggs/YNwvn/

Answer 2

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

看下面的脚本

 Highcharts.chart('container', { chart: { type: 'gauge', backgroundColor: 'transparent' }, title: { text: '' }, pane: { background:null, startAngle: -90, endAngle: 90, center: ['50%', '50%'], }, // the value axis yAxis: { lineWidth: 0, min: -1.4, max: 0, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#666', tickPixelInterval: 0.1, tickWidth: 2, tickPosition: 'side', tickLength: 10, tickColor: '#666', labels: { step: 2, y:20, style:{ color:'#000', cursor:'default', fontSize:'14px' } }, title: { text: 'Progress', style: { color: '#FFF', fontWeight: 'bold' }, y:60 }, plotBands: [{ from: -1.40, to: -0.85, color: '#3285167d', // green thickness:50, label:{ text:'Too fast!', textAlign: 'center', x: 160 } }, { from: -0.85, to: -0.21, color: '#DDDF0D', // yellow thickness:50 }, { from: -0.21, to: -0.12, color: '#DF5353', // red thickness:50 }, { from: -0.12, to: 0, color: 'blue', // blue thickness:50 }] }, series: [{ name: 'Progress', data: [-0.1], tooltip: { valueSuffix: ' Progress' } }] }, // Add some life function (chart) { });

 #container { height: 400px; } .highcharts-figure, .highcharts-data-table table { min-width: 310px; max-width: 500px; margin: 1em auto; } .highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #EBEBEB; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; } .highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; } .highcharts-data-table th { font-weight: 600; padding: 0.5em; } .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; } .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; } .highcharts-data-table tr:hover { background: #f1f7ff; }

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <figure class="highcharts-figure"> <div id="container"></div> </figure>