как добавить эффект наведения в hightcharts?

можно ли добавить эффект наведения в hightcharts (donut chart) ..Можно ли добавить эффект наведения в диаграмму пончика, показанную в данном 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
                    }
                }
            ]
        }]
    });
});

3 ответа

  1. Это можно сделать, но не очень прямолинейно. Здесь вы можете увидеть строительные блоки этого:

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

    1) Необходимо запомнить ссылку на диаграмму

    var hc = Highcharts.chart(...
    

    2) Затем можно использовать события mouseOver и mouseOut на элементах для изменения точек ряда. Вот пример мыши над событием, что для всех, кроме зависшего элемента обновляет цвет к чему-то.

        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) чтобы сделать желаемый эффект, у вас должна быть таблица цветов, которые вы будете назначать своим точкам.

    Надеюсь, это поможет.

  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/

  3. Вот полный пример того, чего вы хотели достичь в чистом JavaScript, используя только библиотеку Highcharts.

    const chart = Highcharts.chart('container', {
    	chart: {
      	events: {
        	load () {
          	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/