Высокие диаграммы, круговая диаграмма customaization

Question

Я должен сделать некоторые настройки, такие как: 1. удалить указатель мыши на мышь над кусочками пирога. 2. покажите этикетку внутри большого/большого ломтика. 3. На мышечной/мышечной подсветке соответствующий свет.

ссылочного 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> 

jQquery

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

demo