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

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颜色，您可以对 SVG 元素使用css方法，例如在 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/

接口参考：

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

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