Javascript 比较两个具有相同数据名称的饼图（Highcharts）

我对排行榜很陌生，我被困住了。我有两个饼图，数据名称相同，但值不同。我试图实现的是在单击饼图切片时从两个饼图中获取值，并在单击时旋转饼图。这是我的JSFIDLE，我试图实现的是下面的图像URL

代码在这里

var选项={
图表：{
renderTo:“图表换行”，
动画：错，
键入“pie”，
背景颜色：空，
身高：450，
活动：{
加载：函数（）{
}
}
},
颜色：[“0f5880”、“5db2cb”、“5c6a75”、“8aaeba”、“00b1b5”、“19315a”]，
学分：{
启用：false
},
标题：{
文本：空
},
工具提示：{
valueSuffix:“%”，
启用：false，
格式化程序：函数（）{
}
},
打印选项：{
馅饼：{
动画：{
持续时间：500，
放松：“easeOutQuad”
},
影子：错，
中心：['50%，'50%']，
光标：“指针”，
数据标签：{
已启用：false
},
要点：{
活动：{
单击：函数（）{
移动点（本）；
选择信息（this.name，this.y）；
}
}
}
},
系列：{
动画：{
持续时间：750，
放松：“easeOutQuad”
}
}
},
系列：[{
数据：[{
名称：'金融'，
y:18.29
},
{
名称:"资讯科技",，
y:16.66
},
{
名称：'非必需消费者'，
y:12.31
},
{
名称：'保健'，
y:11.17
},
{
名称：“工业公司”，
y:10.79
},
{
名称：“消费品主食”，
y:9.49
},
{
名称：'能源'，
y:6.43
},
{
名称：“材料”，
y:5.28
},
{
名称:"电讯服务",，
y:3.31
},
{
名称：'房地产'，
y:3.14
},
{
名称：'实用程序'，
y:3.13
}],
startAngle:50，
名称：'Pie 1'，
大小：“104%”，
内部尺寸：“75%”，
中心：['20%，'50%，]，
活动：{
单击：函数（）{
}
}
}, {
数据：[{
名称：'金融'，
y:39.2
},
{
名称:"资讯科技",，
y:1.2
},
{
名称：'非必需消费者'，
y:4.8
},
{
名称：'保健'，
y:7
},
{
名称：“工业公司”，
y:6.8
},
{
名称：“消费品主食”，
y:7
},
{
名称：'能源'，
y:4.1
},
{
名称：“材料”，
y:15.5
},
{
名称:"电讯服务",，
y:3.5
},
{
名称：'房地产'，
y:8.2
},
{
名称：'实用程序'，
y:2.8
}],
startAngle:-90，
名称：“馅饼2”，
尺寸：37%，
内部尺寸：“55%”，
中间：['80%，'50%']
}]
};
var initChart=新的Highcharts.Chart（选项）；
var lastAngle=0；
var moveToPoint=函数（点击点）{
var points=clickPoint.series.points；
var-startAngle=0；
对于（变量i=0；i
您应该能够同时使用这两个系列并使用point.events更新两个饼图。单击功能：

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

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

您还应该能够使用firePointEvent功能，通过编程在图表加载上触发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();
      }
    }
  }

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

实例：
此图表是否符合您的要求？如果是，我会将其作为answer@GrzegorzBlachli谢谢，这正是我想要的。但有没有一种方法可以让我们在加载时显示第一个切片数据，而不是在单击之后？如果有办法，那将非常有帮助，否则请将此作为答案发布。：）非常感谢@grzegorzblachlinski对您的帮助。这正是我需要的。：）