1

グラフィックを直接操作して、棒グラフの棒の色をオーバーライドしました。初期ロードでは機能しますが、バーの上にカーソルを置いてツールチップを表示すると、マウスアウトすると、カスタムの選択ではなくデフォルトの色に戻ります。

1 つのバーだけでそのイベントの設定を編集するにはどうすればよいでしょうか。

参照: http://jsfiddle.net/WQkeQ/4/

$(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);

        });
    });

});

銀のバーにカーソルを合わせます。

ありがとう、マニシャ

4

1 に答える 1

1

マニシャ、要素CSSのプロパティを使用して、シリーズ内の単一のバーの色を設定できます.

使用する

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

それ以外の

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

Fiddledバージョン。

お役に立てれば。

于 2013-03-02T05:42:56.160 に答える