将类添加到标题中以根据仪表高图的数据值更改颜色

Question

我们可以根据gauge highcharts中的from和to颜色值添加类或更改标题的颜色

我正在处理以下代码：

$('#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