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);