Добавьте класс к заголовку, чтобы изменить цвет в соответствии со значением данных старшей диаграммы.

Question

Можем ли мы добавить класс или изменить цвет заголовка в соответствии со значениями от и до в верхних диаграммах колеи

Я работаю над следующим кодом:

$('#container').highcharts({

    chart: {
        type: 'gauge',
        borderWidth: 0,
    },

    title: {
        useHTML: true,
        verticalAlign: 'middle',
        floating: false,
        text: '<div style="text-align:center"><span class="gauge-count">80</span><span class="gauge-category-title">mg/L</span></div>'

    },

    pane: {
        startAngle: -160,
        endAngle: 160,
        background: null
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 100,
        minorTickPosition: 'inside',
        minorTickColor: 'transparent',
        tickPosition: 'inside',
        tickColor: 'transparent',
        labels: {
            enabled: false
        },

        plotBands: [{
            from: 0,
            to: 30,
            className: 'red-band'
        }, {
            from: 30,
            to: 60,
            className: 'yellow-band'
        }, {
            from: 60,
            to: 100,
            className: 'green-band'
        }]
    },
    plotOptions: {
        gauge: {
            dataLabels: {
                formatter: function() {
                    return null;
                },
                y: 80,
                borderWidth: 0,
                useHTML: false
            },

        }
    },
    series: [{
        name: 'Speed',
        data: [80]
    }]

}, );

Живой пример: https://codepen.io/qadeershaikh/pen/MRmJwP?editors=0010

Answer 1

Чтобы динамически установить цвет title диаграммы, вы можете использовать метод css для элементов SVG, например, в render функция события:

chart: {
    type: 'gauge',
    borderWidth: 0,
    events: {
        render: function() {
            var value = this.series[0].yData[0],
                color;

            if (value < 30) {
                color = '#DF5353';
            } else if (value < 60) {
                color = '#DDDF0D';
            } else {
                color = '#55BF3B';
            }

            this.title.css({
                color: color
            });
        }
    }
}

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/fj7mLrxa/

Справочник по API:

https://api.highcharts.com/highcharts/chart.events.render

https://api.highcharts.com/class-reference/Highcharts.SVGElement#css