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/

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

Answer 1

这里有几个问题。

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

2) 完成此操作后，您会发现您的乐队完全不正常。

你有反向指定的开始/结束值：开始应该是较小的数字，结束应该是较高的。

Example：

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

Answer 2

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

见下面的脚本

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>