Question

我想问一下在这个jsfiddle中有一个条形图，它的颜色根据值而变化，但是如果条形图已经用光标/指针突出显示，颜色又变成了初始颜色，你如何保持颜色基于价值？

这是jsfiddle的链接：http://jsfiddle.net/upz5q2fd/7/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        series: [{
            name: 'Year 1800',
            color: 'yellow',
            data: [107, 31, 635, 203, 2]
        }]
    },function(chart){
    
        var max = 200;
        
        $.each(chart.series[0].data,function(i,data){
            
            if(data.y > max)
                data.graphic.attr({
                    fill:'red'
                });
            
        });
    
    });
});

Answer 1

不是通过属性改变颜色，而是在数据的点级别上定义它，例如：

    var data = [107, 31, 635, 203, 2];
    var processedData = data.map(function(dataEl, index){
        return {x: index, y : dataEl, color: dataEl > 200 ? 'red' : 'yellow'}
    });

    $('#container').highcharts({
        ...,
        series: [{
            ...,
            data: processedData
        }]
    });

现场演示： http://jsfiddle.net/BlackLabel/L7wgcmd1/

API 参考： https://api.highcharts.com/highcharts/series.bar.data.color

根据值更改条形图的颜色

1 个答案: