jquery - High Charts、饼图定制

Question

我必须进行一些自定义，例如： 1. 将鼠标指针移到饼图上。2.在大/大切片内显示标签。3. 在 mouseover/mouseout 高亮显示相应的 div。

参考img： 这是jsfiddle，我已经努力实现3点：在鼠标悬停时我可以突出显示所选内容，但在鼠标移出时无法删除颜色

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>

jQuery

$(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代码。

谢谢

Answer 1

使用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;
}

演示