highcharts儀表使用負值

我想創建一個像這樣的測量圖表。highcharts儀表使用負值

enter image description here

這就是我一直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/

我無法找到互聯網的解決方案。（另外我需要在數組中添加名稱作爲標籤。是否有可能？）

來源

2014-07-03 Dinuka Thilanga