javascript - 比较两个具有相同数据名称的饼图 (Highcharts)

Question

我对高排行榜非常陌生，我被困住了。我有两个具有相同数据名称但不同值的饼图。我想要实现的是在单击饼图时从两个饼图获取值，并在单击时旋转饼图。这是我的 JSFiddle，我想要实现的目标在下面的图片 URL 中。

Image Link

代码在这里

var options = {
  chart: {
    renderTo: 'chart-wrap',
    animation: false,
    type: 'pie',
    backgroundColor: null,
    height: 450,
    events: {
      load: function() {
				
      }
    }
  },
  colors: ['#0f5880', '#5db2cb', '#5c6a75', '#8aaeba', '#00b1b5', '#19315a'],
  credits: {
    enable: false
  },
  title: {
    text: null
  },
  tooltip: {
    valueSuffix: '%',
    enabled: false,
    formatter: function() {
            
    }
  },
  plotOptions: {
    pie: {
      animation: {
        duration: 500,
        easing: 'easeOutQuad'
      },
      shadow: false,
      center: ['50%', '50%'],
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      point: {
        events: {
          click: function() {          	
            moveToPoint(this);
            selectedInfo(this.name, this.y);            
          }
        }
      }
    },
    series: {
      animation: {
        duration: 750,
        easing: 'easeOutQuad'
      }
    }
  },
  series: [{
    data: [{
        name: 'Financial',
        y: 18.29
      },
      {
      	name: 'Information Technology',
        y: 16.66
      },
      {
      	name: 'Consumer Discretionary',
        y: 12.31
      },
      {
      	name: 'Health Care',
        y: 11.17
      },
      {
      	name: 'Industrials',
        y: 10.79
      },
      {
      	name: 'Consumer Staples',
        y: 9.49
      },
      {
      	name: 'Energy',
        y: 6.43
      },
      {
      	name: 'Materials',
        y: 5.28
      },
      {
      	name: 'Telecommunication Services',
        y: 3.31
      },
      {
      	name: 'Real Estate',
        y: 3.14
      },
      {
      	name: 'Utilities',
        y: 3.13      
    }],
    startAngle: 50,
    name: 'Pie 1',
    size: '104%',
    innerSize: '75%',
    center: ['20%', '50%'],
    events: {
    	click: function() {

      }
    }
  }, {
    data: [{
        name: 'Financial',
        y: 39.2
      },
      {
      	name: 'Information Technology',
        y: 1.2
      },
      {
      	name: 'Consumer Discretionary',
        y: 4.8
      },
      {
      	name: 'Health Care',
        y: 7
      },
      {
      	name: 'Industrials',
        y: 6.8
      },
      {
      	name: 'Consumer Staples',
        y: 7
      },
      {
      	name: 'Energy',
        y: 4.1
      },
      {
      	name: 'Materials',
        y: 15.5
      },
      {
      	name: 'Telecommunication Services',
        y: 3.5
      },
      {
      	name: 'Real Estate',
        y: 8.2
      },
      {
      	name: 'Utilities',
        y: 2.8      
    }],
    startAngle: -90,
    name: 'Pie 2',
    size: '37%',
    innerSize: '55%',
    center: ['80%', '50%']   
  }]
};

var initChart = new Highcharts.Chart(options);

var lastAngle = 0;
var moveToPoint = function(clickPoint) {
  var points = clickPoint.series.points;
  var startAngle = 0;
  for (var i = 0; i < points.length; i++) {
    var p = points[i];
    if (p === clickPoint) {
      break;
    }
    startAngle += (p.percentage / 100.0 * 360.0);
  }

  var newAngle = -startAngle + 90 - ((clickPoint.percentage / 100.0 * 360.0) / 2);

  $({
    angle: 0,
    target: newAngle
  }).animate({
    angle: newAngle - lastAngle
  }, {
    duration: 750,
    easing: 'easeOutQuad',
    step: function() {
      $(this).parents('.highcharts-series').css({
        transform: 'rotateZ(' + this.angle + 'deg)'
      });
    },
    complete: function() {
      $(this).parents('.highcharts-series').css({
        transform: 'rotateZ(0deg)'
      });
      clickPoint.series.update({
        startAngle: newAngle // center at 90       
      });
      lastAngle = newAngle;
    }
  });
};

var selectedInfo = function(selectName, selectVal) {
  var selectedCategory = $('#selected-slice');
  setTimeout (function() {
		selectedCategory.text(selectName +', '+ selectVal);
	}, 1000);  
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

JSFiddle

Answer 1

您应该能够使用您的两个系列并使用 point.events.click 函数更新您的两个饼图:

  point: {
    events: {
      click: function() {
        var chart = this.series.chart,
          series = chart.series,
          index = this.index,
          name = this.name;
        if (lastIndex >= 0) {
          Highcharts.each(series, function(s) {
            s.data[lastIndex].update({
              dataLabels: {
                enabled: false
              }
            });
          })
        }
        Highcharts.each(series, function(s, i) {
          s.data[index].update({
            dataLabels: {
              enabled: true
            }
          });

          moveToPoint(s.data[index], i);
        });
        lastIndex = index;
        $('.customLabel').remove();
        chart.renderer.label(name, chart.chartWidth / 2 + 50, 100).attr({
          align: 'center',
          'font-size': 24
        }).addClass('customLabel').add();
      }
    }
  }

您还应该能够使用 firePointEvent 函数以编程方式在图表加载时触发点击事件:

var initChart = new Highcharts.Chart(options, function(chart) {
  chart.series[0].data[0].firePointEvent('click');
});

实例: https://jsfiddle.net/p2wjwbeo/138/