Question

我直接在图形上覆盖了条形图中条形图的颜色。它适用于初始加载，但如果我将鼠标悬停在栏上以显示工具提示，当我鼠标拖出时，它将恢复为默认颜色，而不是我的自定义选项。

如何在一个栏上编辑该事件的设置。

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            title: {
                text: 'Historic World Population by Region'
            },
            subtitle: {
                text: 'Source: Wikipedia.org'
            },
            xAxis: {
                categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                max:4000,
                title: {
                    text: 'Population (millions)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                formatter: function() {
                    if(this.y > (this.series.chart.yAxis[0].max))
                        return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ;
                    else
                        return this.series.name +': '+ this.y;
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 2008',
                data: [973, 914, 4054, 732, 34]
            }]
        },function(chart){

            var max = chart.yAxis[0].max,
                content = '<h2>Points</h2><br/>';

            $.each(chart.series,function(i,serie){
                $.each(serie.data,function(j,data){
                    if(data.y > max){
                       content += 'Point: '+data.y+' is bigger than max: '+max;
                       data.graphic.attr({fill:'silver'});}
                });
            });

            $('#report').html(content);

        });
    });

});

将鼠标悬停在银条上。

谢谢， MANISHA

Answer 1

Manisha，您可以使用CSS属性元素来设置系列中单个条的颜色。

使用

    data.graphic.css({color: 'silver' });

而不是

    data.graphic.attr({fill:'silver'});

Fiddled版本。

希望这有帮助。

工具提示悬停状态

1 个答案:

使用

而不是