Javascript （Amcharts.js）创建饼图中的饼图

我对javascript比较陌生。最近我的任务是创建一个仪表板，因此我开始使用amcharts.js进行可视化

因此，我想寻求指导，以便创建饼图的饼图（基本上是向这个示例添加另一层，如amcharts提供的）

我自己也尝试了很长一段时间，但如图所示，没有成功

//主题开始
am4core.useTheme（am4themes_dataviz）；
am4core.useTheme（am4themes_动画）；
//主题结束
var container=am4core.create（“chartdiv”，am4core.container）；
容器宽度=AM4芯百分比（100）；
容器高度=AM4核心百分比（100）；
container.layout=“水平”；
var chart=container.createChild（am4charts.PieChart）；
//添加数据
chart.data=[{
“国家”：“立陶宛”，
“升”：500，
“子数据”：[{name:“A”，值：200}，
{名称：“B”，值：150}，
{名称：“C”，值：100}，
{名称：“D”，值：50，
子数据：[{name:“D2”，值：35，
名称：“D3”，值：15}]
}]
}, {
“国家”：“捷克共和国”，
“升”：300
}, {
“国家”：“爱尔兰”，
“升”：200
}, {
“国家”：“德国”，
“升”：150
}, {
“国家”：“澳大利亚”，
“升”：140
}, {
“国家”：“奥地利”，
“升”：120
}];
//添加和配置系列
var piesteries=chart.series.push（新的am4charts.piesteries（））；
pieSeries.dataFields.value=“升”；
pieSeries.dataFields.category=“国家”；
pieSeries.slices.template.states.getKey（“活动”）.properties.shiftRadius=0；
pieSeries.labels.template.disabled=true；
//pieSeries.labels.template.text=“{category}\n{value.percent.formatNumber（'#.#'）}%”；
pieSeries.slices.template.events.on（“点击”，函数（事件）{
选择Slice（event.target.dataItem）；
})
var chart2=container.createChild（am4charts.PieChart）；
图表2.width=AM4核心百分比（30）；
图表2.2半径=AM4中心百分比（80）；
//添加和配置系列
var pieSeries2=chart2.series.push（新的am4charts.PieSeries（））；
pieSeries2.dataFields.value=“value”；
pieSeries2.dataFields.category=“name”；
pieSeries2.slices.template.states.getKey（“活动”）.properties.shiftRadius=0；
//pieSeries2.labels.template.radius=AM4核心百分比（50）；
//pieSeries2.labels.template.inside=true；
//pieSeries2.labels.template.fill=am4core.color（“#ffffffff”）；
pieSeries2.labels.template.disabled=true；
pieSeries2.ticks.template.disabled=true；
pieSeries2.alignLabels=false；
pieSeries2.事件（位置更改，更新线）；
var interfaceColors=新的am4core.InterfaceColorSet（）；
var chart3=container.createChild（am4charts.PieChart）；
图表3.宽度=AM4核心百分比（30）；
图表3.半径=AM4中心百分比（80）；
//添加和配置系列
var pieSeries3=chart3.series.push（新的am4charts.PieSeries（））；
pieSeries3.dataFields.value=“升”；
pieSeries3.dataFields.category=“国家”；
pieSeries3.slices.template.states.getKey（“活动”）.properties.shiftRadius=0；
pieSeries3.labels.template.disabled=true；
//pieSeries.labels.template.text=“{category}\n{value.percent.formatNumber（'#.#'）}%”；
pieSeries.slices.template.events.on（“点击”，函数（事件）{
选择Slice（event.target.dataItem）；
})
var line1=container.createChild（am4core.Line）；
line1.strokeDasharray=“2,2”；
line1.strokeOpacity=0.5；
line1.stroke=接口颜色.getFor（“可选背景”）；
line1.isMeasured=假；
var line2=container.createChild（am4core.Line）；
line2.strokeDasharray=“2,2”；
line2.strokeOpacity=0.5；
line2.stroke=接口颜色.getFor（“可选背景”）；
line2.isMeasured=假；
var选择切片；
函数selectSlice（数据项）{
selectedSlice=dataItem.slice；
var fill=selectedSlice.fill；
var count=dataItem.dataContext.subData.length；
pieSeries2.colors.list=[]；
对于（变量i=0；i

非常感谢您的帮助。

请找到这把小提琴

您需要复制

selectslice

和

updatelines

函数，或者使用参数进行修改，并且您需要在第三个饼图上单击新的行来重新绘制。单击立陶宛的一个饼图，您可以看到第三个饼图

// Themes begin
am4core.useTheme(am4themes_dataviz);
am4core.useTheme(am4themes_animated);
// Themes end

var container = am4core.create("chartdiv", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "horizontal";


var chart = container.createChild(am4charts.PieChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 500,
  "subData": [{ name: "A", value: 200 }, 
              { name: "B", value: 150 }, 
              { name: "C", value: 100 },
              { name: "D", value: 50,
                subData: [{name: "D2", value: 35,
                      name: "D3", value: 15}]
              }]
}, {
  "country": "Czech Republic",
  "litres": 300
}, {
  "country": "Ireland",
  "litres": 200
}, {
  "country": "Germany",
  "litres": 150
}, {
  "country": "Australia",
  "litres": 140
}, {
  "country": "Austria",
  "litres": 120
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.states.getKey("active").properties.shiftRadius = 0;
pieSeries.labels.template.disabled = true;
//pieSeries.labels.template.text = "{category}\n{value.percent.formatNumber('#.#')}%";

pieSeries.slices.template.events.on("hit", function(event) {
  selectSlice(event.target.dataItem);
})

var chart2 = container.createChild(am4charts.PieChart);
chart2.width = am4core.percent(30);
chart2.radius = am4core.percent(80);

// Add and configure Series
var pieSeries2 = chart2.series.push(new am4charts.PieSeries());
pieSeries2.dataFields.value = "value";
pieSeries2.dataFields.category = "name";
pieSeries2.slices.template.states.getKey("active").properties.shiftRadius = 0;
//pieSeries2.labels.template.radius = am4core.percent(50);
//pieSeries2.labels.template.inside = true;
//pieSeries2.labels.template.fill = am4core.color("#ffffff");
pieSeries2.labels.template.disabled = true;
pieSeries2.ticks.template.disabled = true;
pieSeries2.alignLabels = false;
pieSeries2.events.on("positionchanged", updateLines);

var interfaceColors = new am4core.InterfaceColorSet();

var chart3 = container.createChild(am4charts.PieChart);
chart3.width = am4core.percent(30);
chart3.radius = am4core.percent(80);

// Add and configure Series
var pieSeries3 = chart3.series.push(new am4charts.PieSeries());
pieSeries3.dataFields.value = "litres";
pieSeries3.dataFields.category = "country";
pieSeries3.slices.template.states.getKey("active").properties.shiftRadius = 0;
pieSeries3.labels.template.disabled = true;
//pieSeries.labels.template.text = "{category}\n{value.percent.formatNumber('#.#')}%";

pieSeries.slices.template.events.on("hit", function(event) {
  selectSlice(event.target.dataItem);
})

var line1 = container.createChild(am4core.Line);
line1.strokeDasharray = "2,2";
line1.strokeOpacity = 0.5;
line1.stroke = interfaceColors.getFor("alternativeBackground");
line1.isMeasured = false;

var line2 = container.createChild(am4core.Line);
line2.strokeDasharray = "2,2";
line2.strokeOpacity = 0.5;
line2.stroke = interfaceColors.getFor("alternativeBackground");
line2.isMeasured = false;

var selectedSlice;

function selectSlice(dataItem) {

  selectedSlice = dataItem.slice;

  var fill = selectedSlice.fill;

  var count = dataItem.dataContext.subData.length;
  pieSeries2.colors.list = [];
  for (var i = 0; i < count; i++) {
    pieSeries2.colors.list.push(fill.brighten(i * 2 / count));
  }

  chart2.data = dataItem.dataContext.subData;
  pieSeries2.appear();

  var middleAngle = selectedSlice.middleAngle;
  var firstAngle = pieSeries.slices.getIndex(0).startAngle;
  var animation = pieSeries.animate([{ property: "startAngle", to: firstAngle - middleAngle }, { property: "endAngle", to: firstAngle - middleAngle + 360 }], 600, am4core.ease.sinOut);
  animation.events.on("animationprogress", updateLines);

  selectedSlice.events.on("transformed", updateLines);

//  var animation = chart2.animate({property:"dx", from:-container.pixelWidth / 2, to:0}, 2000, am4core.ease.elasticOut)
//  animation.events.on("animationprogress", updateLines)
}


function updateLines() {
  if (selectedSlice) {
    var p11 = { x: selectedSlice.radius * am4core.math.cos(selectedSlice.startAngle), y: selectedSlice.radius * am4core.math.sin(selectedSlice.startAngle) };
    var p12 = { x: selectedSlice.radius * am4core.math.cos(selectedSlice.startAngle + selectedSlice.arc), y: selectedSlice.radius * am4core.math.sin(selectedSlice.startAngle + selectedSlice.arc) };

    p11 = am4core.utils.spritePointToSvg(p11, selectedSlice);
    p12 = am4core.utils.spritePointToSvg(p12, selectedSlice);

    var p21 = { x: 0, y: -pieSeries2.pixelRadius };
    var p22 = { x: 0, y: pieSeries2.pixelRadius };

    p21 = am4core.utils.spritePointToSvg(p21, pieSeries2);
    p22 = am4core.utils.spritePointToSvg(p22, pieSeries2);

    line1.x1 = p11.x;
    line1.x2 = p21.x;
    line1.y1 = p11.y;
    line1.y2 = p21.y;

    line2.x1 = p12.x;
    line2.x2 = p22.x;
    line2.y1 = p12.y;
    line2.y2 = p22.y;
  }
}

chart.events.on("datavalidated", function() {
  setTimeout(function() {
    selectSlice(pieSeries.dataItems.getIndex(0));
  }, 1000);
});