HighCharts Gauge从-100％到100％

Question

我试图弄清楚如何定义一个规格，可能是solidgauge类型，介于-100％和100％之间。 -100％为纯红色，0％为纯黄色，100％为纯绿色。我想让图表来自0％，然后转到任何一方。我想让图表显示一条线（就像一个速度表，从中心点到图形弧的末端反射（但不是必需的）。

这将是页面上的静态图表，一旦计算出它不会被更新的页面，除非页面被刷新。

我认为像固体活动量表这样的东西是我正在寻找的东西。但是，我需要将图表放在两个不同的方向，我无法弄清楚如何定义它。我希望仪表有一个从0到-90的图形，而另一个从0到90.我希望它们的0为相同的终点，正面为渐变绿色，并且负面呈红色渐变。

样本量表显示正面和负面

量表显示正面结果

量表显示负面结果

Answer 1

感谢团队成员，我得到了答案。

var gaugeOptions = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['71%', '80%'],
        size: '140%',
        startAngle: -90,
        endAngle: 0,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#DF5353'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions2 = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['10%', '85%'],
        size: '140%',
        startAngle: 0,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#55BF3B'], // yellow
            [0.9, '#55BF3B'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions3 = {

    chart: {
           backgroundColor: 'transparent',
        type: 'solidgauge'

    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{

        data: [0],


    }]

}));

// The RPM gauge
var chartRPM = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions2, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{
        name: '',
        data: [0],

        tooltip: {
            valueSuffix: ''
        }
    }]

}));


var chartTitle = Highcharts.chart('container-title', Highcharts.merge(gaugeOptions3, {
    yAxis: {
        min: -100,
        max: 100,
        title: {
            text: 'Progress'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Progress',
        data: [0],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">%</span></div>'
        },
        tooltip: {
            valueSuffix: ' %'
        }
    }]

}));

// Bring life to the dials
setInterval(function () {
    // Speed
    var point,
            point2,
                point3,
        newVal,
        newVal2,
        inc;


        point = chartSpeed.series[0].points[0];
        point2 = chartRPM.series[0].points[0];
        point3 = chartTitle.series[0].points[0];

        inc = Math.round((Math.random() - 0.5) * 100);
      //  newVal = point.y + inc;

        if (inc > 0 ) {
            newVal2 =  inc;
            newVal = 0;
        }else{
            newVal =  inc;
            newVal2 =0;
        }

        point.update(Math.abs(newVal));
    point2.update(newVal2);
     point3.update(inc);

}, 2000);