1

私は次のようなカスタマイズを行う必要があります。2. 大/大スライス内にラベルを表示します。3. マウスオーバー/マウスアウトでそれぞれの div をハイライトします。

参照 画像：ここに画像の説明を入力 これは私が3点を実装するために取り組んだjsfiddleです：マウスオーバーで選択したものを強調表示できますが、マウスアウトでは色を削除できません

HTML

    <div class="grid_5">
<div class="grid_4" id="top_states_chart" style="min-width: 200px; height: 200px; margin: 0 auto"></div>
<div class="grid_4 right">
    <div class="Others level1">Maharastra</div>
    <div class="Firefox level2">Karnataka</div>
    <div class="level3">Gujarat</div>
    <div class="level4">Tamil Nadu</div>
    <div class="level5">Madhya Pradesh</div>
</div>
</div>

jQクエリ 

$(function () {
    var chart;
    Highcharts.setOptions({
        colors: ['#fffccc', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
       });
    $(document).ready(function () {

        // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'top_states_chart',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ''
            },
            tooltip: {
                //pointFormat: '',//{series.name}: <b>{point.percentage}%</b>
                //percentageDecimals: 1
                formatter: function() {
                    return false;
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: false,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: false,
                    point: {
                        events: {
                            mouseOver: function(event) {
                                var point = this;


                                $('div.'+point.name).css({'background-color':'green', 'cursor':'pointer'});
                             }
                        }
                    },
                    events: {
                        mouseOut: function() {
                            //pieChart.tooltip.hide();
                            var point = this;

                            $('div.'+point.name).css({'background-color':'none', 'cursor':'pointer'});
                        }
                    }
                }
            },
            series: [{
                type: 'pie',

                data: [
                    ['Firefox',   45.0],
                    ['Others',   55.7]
                ]
            }]
        });
    });

});

http://jsfiddle.net/XErNG/135/

このjsコードを見てください。

ありがとう

4

1 に答える 1

0

イベントとして使用mouseOverしmouseOutます。スタイルを切り替えるために
使用します。togleClass

pie: {
    allowPointSelect: false,
    stickTracking: false,

    // solves problem 1
    cursor: 'normal',

    // the following solves problem 2
    dataLabels: {
        enabled: false,
        formatter: function () {
            return this.y;
        },
        distance: -30
    },

    // the following solves problem 3
    point: {
        events: {
            mouseOver: function() {
                $('div.' + this.name).addClass('highlight');
            },
            mouseOut: function() {
                $('div.' + this.name).removeClass('highlight');
            }
        }
    }
}

次に、シリーズの日付は次のようになります。

data: [
    ['Firefox', 45.0],
    {
        name: 'Others',
        y: 55.7,
        dataLabels: {
            enabled: true
        }
    }
]

Css

.highlight {
    background-color: red;
}

デモ

于 2013-01-24T16:45:09.063 に答える