Question

我如何调整 yAxis 停止值，以便根据温度值显示不同的颜色？

最好的如下：
-30到0 =蓝色
0到12 =浅蓝色
12至25 =绿色
25至30 =橙色
30至60 =红色

这是我的代码：

＆＃13;

$(function () {
    var gaugeOptions = {
        chart: {type: 'solidgauge'},
        title: null,
        pane: {
            size: '90%',
            startAngle: -180,
            endAngle: 90,
            background: {
                backgroundColor: '#EEE',
                innerRadius: '95%',
                outerRadius: '100%',
                shape: 'arc'
                        }
            },
        tooltip: {enabled: false},
       
        // the value axis
        yAxis: {
            stops: [
                [0.1, '#00f'],
                [0.2, '#0f0'],
                [0.3, '#f00']
                   ],
            lineWidth: 0,
            minorTickInterval: 0,
            tickPixelInterval: 50,
            tickWidth: 1,
            labels: {
               enabled: true,
               distance: 10
                    }
              },
        plotOptions: {
            solidgauge: {
                innerRadius: '95%',
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };
  
    
    
    
    $('#temp001').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: -30, 
            max: 60
               },
        credits: {
            enabled: false
                 },
        series: [{
            name: 'inTemp',
            data: [-15.5], /////// Temp Value //////////
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} &deg;C</span><br/>' + '<span style="font-size:12px;color:silver">abcde</span></div>'
            }
         }]
    }));
 
 

});

＆＃13;

抱歉我的英语不好......德语不错

Answer 1

在这里您可以找到有关yAxis.stops的API： http://api.highcharts.com/highcharts#yAxis.stops

stop中的值介于0和1之间，其中0是轴的最小值，1是最大值。 0到1之间的值与轴的值成比例。

如果您的轴最小值为-30且最大值为60且您希望从30停止，则停止的值将为 60 /（60 - （ - 30））

您应该以RGB格式设置颜色＆＃34;＃XXYYZZ＆＃34;如果你想在止损的颜色之间平滑过渡。

stops: [
                [0, '#000088'],
                [29 / 90, '#000088'],
                [30 / 90, '#5555ff'],
                [41 / 90, '#5555ff'],
                [42 / 90, '#00ff00'],
                [54 / 90, '#00ff00'],
                [55 / 90, '#ff8c00'],
                [59 / 90, '#ff8c00'],
                [60 / 90, '#ff0000']
],

例如： http://jsfiddle.net/izothep/o35xLwbk/6/

Highcharts Solid Gauge（温度计）......颜色从-30到+60

1 个答案: