如何在hightcharts中添加懸停效果？

Question

可以我們添加在hightcharts懸停效果（圓環圖）..Can我們添加在圓環圖在給定的URL所示懸停效果

http://c3js.org/samples/chart_donut.html

請檢查上面的鏈接和懸停任何切片。它暗所選切片和灰色出傳說中的另一個作爲同樣的效果

可我們highcharts

這裏做的是代碼 http://jsfiddle.net/sk0603wj/

$(function() { 
    Highcharts.chart('container', { 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser<br>shares<br>2015', 
      align: 'center', 
      verticalAlign: 'middle', 
      y: 40 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       dataLabels: { 
        enabled: true, 
        distance: -50, 
        style: { 
         fontWeight: 'bold', 
         color: 'white' 
        } 
       }, 
       startAngle: -90, 
       endAngle: 90, 
       center: ['50%', '75%'] 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      innerSize: '50%', 
      data: [ 
       ['Firefox', 10.38], 
       ['IE',  56.33], 
       ['Chrome', 24.03], 
       ['Safari', 4.77], 
       ['Opera',  0.91], 
       { 
        name: 'Proprietary or Undetectable', 
        y: 0.2, 
        dataLabels: { 
         enabled: false 
        } 
       } 
      ] 
     }] 
    }); 
}); 

Answer 1

它可以完成，但它不是非常簡單。在這裏，你可以看到這個積木：

http://jsfiddle.net/3ehrgge7/2/

1），你需要記住的參考圖表

var hc = Highcharts.chart(... 

2）然後你可以使用鼠標懸停和鼠標移開事件上修改系列點的元素。這是一個鼠標懸停事件的例子，除了懸停物品之外，所有物體都將顏色更新爲某種東西。

plotOptions: { 
     pie: { 
      point:{ 
      events:{ 
       mouseOver:function(ev){ 
        hc.series[0].points.forEach(
         function(i){ 
          if(ev.target !== i){ 
           i.update({color:'rgba(150,100,50,0.1)'}); 
          } 
         } 
       ) 
       } 
      } 
      }, 
      states: { 
       hover: { 
        halo: { 
         size: 9, 
         opacity: 0.75 
        } 
       } 
      } 
     } 
    } 

3）爲了使預期的效果，你必須有，你會被分配給你點顏色的表格。

我希望這會有所幫助。

Answer 2

$(function() { 

var hc = Highcharts.chart('container', { 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: 0, 
     plotShadow: false 
    }, 
    title: { 
     text: 'Browser<br>shares<br>2015', 
     align: 'center', 
     verticalAlign: 'middle', 
     y: 40 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
     pie: { 
      point:{ 
      events:{ 
       mouseOver:function(ev){ 
        hc.series[0].points.forEach(
        function(i){ 
         if(ev.target !== i){ 
         if(i.color.indexOf('rgba') < 0) { 
         i.update({color: convertHex(i.color) + ",0.1)"}); 
         }else{ 
         i.update({color: i.color.replace('1)', '0.1)')}); 
         } 
         } 
        } 
       ) 
       }, 
       mouseOut:function(ev){ 
       hc.series[0].points.forEach(
        function(i){ 
        i.update({color: i.color.replace('0.1','1')}); 

        } 
       ) 
       } 
      } 
      }, 
      states: { 
       hover: { 
        halo: { 
         size: 9, 
                opacity: 0.75 
        } 
       } 
      }, 

      dataLabels: { 
       enabled: true, 
       distance: -50, 
       style: { 
        fontWeight: 'bold', 
        color: 'white' 
       } 
      }, 
      startAngle: -90, 
      endAngle: 90, 
      center: ['50%', '75%'] 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Browser share', 
     innerSize: '50%', 
     data: [ 
      ['Firefox', 10.38], 
      ['IE',  56.33], 
      ['Chrome', 24.03], 
      ['Safari', 4.77], 
      ['Opera',  0.91], 
      { 
       name: 'Proprietary or Undetectable', 
       y: 0.2, 
       dataLabels: { 
        enabled: false 
       } 
      } 
     ], 
     color: ['rgba(12,181,236,1)', 'rgba(247,181,236,1)', 'rgba(128,133,233,1)', 'rgba(241,92,128,1)', 'rgba(241,181,236,1)', 'rgba(247,181,236,1)'] 
    }] 
}); 

function convertHex(hex){ 
    hex = hex.replace('#',''); 
    r = parseInt(hex.substring(0,2), 16); 
    g = parseInt(hex.substring(2,4), 16); 
    b = parseInt(hex.substring(4,6), 16); 

    result = 'rgba('+r+','+g+','+b+''; 
    return result; 
} 
}); 

http://jsfiddle.net/3ehrgge7/6/

Answer 3

這裏是你想只使用Highcharts庫純JavaScript實現什麼一個完整的例子。

const chart = Highcharts.chart('container', { 
 
\t chart: { 
 
    \t events: { 
 
    \t load() { 
 
     \t colorAllGray.call(this) 
 
     } 
 
    } 
 
    }, 
 
    plotOptions: { 
 
    series: { 
 
     point: { 
 
     events: { 
 
      mouseOver(e) { 
 
      colorAllGray.call(chart) 
 
      e.target.update({ 
 
       color: Highcharts.getOptions().colors[e.target.index] 
 
      }) 
 
      }, 
 
      mouseOut() { 
 
      colorAllGray.call(chart) 
 
      } 
 
     } 
 
     }, 
 
    }, 
 
    }, 
 
    series: [{ 
 
    type: 'pie', 
 
    name: 'Browser share', 
 
    innerSize: '50%', 
 
    data: [ 
 
     ['Firefox', 10.38], 
 
     ['IE', 56.33], 
 
     ['Chrome', 24.03], 
 
     ['Safari', 4.77], 
 
     ['Opera', 0.91], { 
 
     name: 'Proprietary or Undetectable', 
 
     y: 0.2, 
 
     dataLabels: { 
 
      enabled: false 
 
     } 
 
     } 
 
    ] 
 
    }] 
 
}) 
 

 
function colorAllGray() { 
 
    this.series[0].points.forEach(function(point) { 
 
    point.update({ 
 
     color: 'rgba(150,100,50,0.1)' 
 
    }) 
 
    }) 
 
}

<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px; width: 500"></div>

活生生的例子 https://jsfiddle.net/5eq6vx3f/