我对javascript比较陌生。最近，我受命创建一个仪表板，因此我开始使用amcharts.js进行可视化。
因此，我想寻求指导以创建饼图的饼图（基本上是在amcharts https://www.amcharts.com/demos/pie-of-a-pie/提供的示例中添加另一层。
我已经尝试了一段时间，但未成功，如此处https://codepen.io/zxlow/pen/wvvJrZJ
// 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);
});
非常感谢您的帮助。
答案 0 :(得分：0)
请找到这个小提琴Working Fiddle
您需要复制selectslice和updatelines函数或使用参数进行修改，并且需要新行以在单击立陶宛A的第三个饼图上单击时重画第三图馅饼
答案 1 :(得分：0)
抱歉，有点晚了，我带走了您的代码，并修改了一些内容，其中有一个基于您的3饼图的示例。
drawerStyleconst BottomTabNavigation = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused }) => {
let iconName;
if (route.name === 'Checkout') {
return <TSLIcon width={30} height={30} isColored={focused} />;
}
if (route.name === 'Feed') {
return (
<FeedIcon
width={40}
height={40}
style={{ marginTop: 6 }}
isColored={focused}
/>
);
}
switch (route.name) {
case 'Purchases':
iconName = 'tags';
break;
case 'Notifications':
iconName = 'bell';
break;
case 'Orders':
iconName = 'dollar';
break;
case 'Menu':
iconName = 'navicon';
break;
}
return (
<Icon
name={iconName}
size={20}
color={focused ? '#00bcd7' : 'grey'}
/>
);
},
})}
tabBarOptions={{
showLabel: false,
}}>
<Tab.Screen name="Feed" component={LandingStack} />
<Tab.Screen name="Purchases" component={PurchasesStack} />
<Tab.Screen name="Notifications" component={NotificationsStack} />
<Tab.Screen name="Checkout" component={CheckoutStack} />
<Tab.Screen name="Orders" component={OrdersStack} />
<Tab.Screen
name="Menu"
component={DrawerNavigation}
listeners={({ navigation, focused }) => ({
tabPress: (e) => {
e.preventDefault();
navigation.toggleDrawer();
navigation.setOptions({
tabBarIcon: () => {
return (
<Icon
name={'navicon'}
size={20}
color={useIsDrawerOpen() ? '#00bcd7' : 'grey'}
/>
);
},
});
},
})}
/>
</Tab.Navigator>
);
};
const CustomDrawerContent = (props) => {
return (
<DrawerContentScrollView {...props}>
{/* https://sunriseintegration.atlassian.net/browse/TSLMA-59*/}
{/* https://sunriseintegration.atlassian.net/browse/TSLMA-60*/}
{/*<DrawerItemList {...props} />*/}
</DrawerContentScrollView>
);
};
const DrawerNavigation = () => {
return (
<Drawer.Navigator
screenOptions={{
headerStyle: {
display: 'none',
},
}}
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen
name="BottomTabNavigation"
component={BottomTabNavigation}
options={{
drawerLabel: () => null,
title: null,
drawerIcon: () => null,
}}
/>
</Drawer.Navigator>
);
};
am4core.ready(function() {
// Themes end
var container = am4core.create("pie_chart", 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 = [{
"exist": "yes",
"number": 500,
"subData": [{ name: "A", value: 200,"subData":
[{ name: "X", value: 20 },
{ name: "Y", value: 15 },
{ name: "Z", value: 10 }, { name: "U", value: 5 }
]
}, { name: "B", value: 150, "subData":
[{ name: "X", value: 20 },
{ name: "Y", value: 15 },
{ name: "Z", value: 10 }, { name: "U", value: 5 }
] },
{ name: "C", value: 100,"subData":
[{ name: "X", value: 20 },
{ name: "Y", value: 15 },
{ name: "Z", value: 10 }, { name: "U", value: 5 }
] },
{ name: "D", value: 100,"subData":
[{ name: "X", value: 20 },
{ name: "Y", value: 15 },
{ name: "Z", value: 10 }, { name: "U", value: 5 }
] }
]
}, {
"exist": "No",
"number": 300
}];
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "number";
pieSeries.dataFields.category = "exist";
pieSeries.slices.template.states.getKey("active").properties.shiftRadius = 0;
pieSeries.labels.template.disabled = false;
pieSeries.ticks.template.disabled = false;
//pieSeries.labels.template.text = "{category}\n{value.percent.formatNumber('#.#')}%";
//Override original colors
/*pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 1.5;
pieSeries.slices.template.strokeOpacity = 1;*/
pieSeries.slices.template.events.on("hit", function(event) {
selectSlice(event.target.dataItem);
})
var chart2 = container.createChild(am4charts.PieChart);
chart2.width = am4core.percent(80);
chart2.radius = am4core.percent(70);
// 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 = false;
pieSeries2.ticks.template.disabled = false;
pieSeries2.alignLabels = false;
pieSeries2.events.on("positionchanged", updateLines);
//pieSeries2.slices.template.stroke = am4core.color("#fff");
//pieSeries2.slices.template.strokeWidth = 1.5;
//pieSeries2.slices.template.strokeOpacity = 1;
//update
pieSeries2.slices.template.events.on("hit", function(event) {
selectSlice2(event.target.dataItem);
})
pieSeries2.slices.template.events.on("hit", function(ev) {
var series = ev.target.dataItem.component;
series.slices.each(function(item) {
if (item.isActive && item != ev.target) {
item.isActive = false;
}
})
});
pieSeries2.events.on("positionchanged", updateLines);
var chart3 = container.createChild(am4charts.PieChart);
chart3.width = am4core.percent(70);
chart3.radius = am4core.percent(70);
// Add and configure Series
var pieSeries3 = chart3.series.push(new am4charts.PieSeries());
pieSeries3.dataFields.value = "value";
pieSeries3.dataFields.category = "name";
pieSeries3.slices.template.states.getKey("active").properties.shiftRadius = 0;
pieSeries3.slices.template.stroke = am4core.color("#fff");
pieSeries3.slices.template.strokeWidth = 1.5;
pieSeries3.slices.template.strokeOpacity = 1;
pieSeries3.labels.template.disabled = true;
pieSeries3.ticks.template.disabled = true;
pieSeries3.events.on("positionchanged", updateLines2);
//endupdate
var interfaceColors = new am4core.InterfaceColorSet();
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 interfaceColors2 = new am4core.InterfaceColorSet();
var line3 = container.createChild(am4core.Line);
line3.strokeDasharray = "2,2";
line3.strokeOpacity = 0.5;
line3.stroke = interfaceColors2.getFor("alternativeBackground");
line3.isMeasured = false;
var line4 = container.createChild(am4core.Line);
line4.strokeDasharray = "2,2";
line4.strokeOpacity = 0.5;
line4.stroke = interfaceColors2.getFor("alternativeBackground");
line4.isMeasured = false;
var selectedSlice;
function selectSlice(dataItem) {
selectedSlice = dataItem.slice;
var fill = selectedSlice.fill;
var count = dataItem.dataContext.subData.length;
pieSeries2.colors.list = ["#cb2542", "#f2c33a", "#63c66e"].map(function(color) {
return new am4core.color(color);
});
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)
}
//update
var selectedSlice2;
function selectSlice2(dataItem) {
selectedSlice2 = dataItem.slice;
var fill = selectedSlice2.fill;
var count = dataItem.dataContext.subData.length;
pieSeries3.colors.list = [];
for (var i = 0; i < count; i++) {
pieSeries3.colors.list.push(fill.brighten(i * 2.5 / count));
}
chart3.data = dataItem.dataContext.subData;
pieSeries3.appear();
var middleAngle2 = selectedSlice2.middleAngle + 10;
var firstAngle2 = pieSeries2.slices.getIndex(0).startAngle + 10;
var animation2 = pieSeries2.animate([{ property: "startAngle", to: firstAngle2 - middleAngle2 }, { property: "endAngle", to: firstAngle2 - middleAngle2 + 360 }], 600, am4core.ease.sinOut);
animation2.events.on("animationprogress", updateLines2);
selectedSlice2.events.on("transformed", updateLines2);
}
function updateLines2() {
if (selectedSlice2) {
var p11 = { x: selectedSlice2.radius * am4core.math.cos(selectedSlice2.startAngle), y: selectedSlice2.radius * am4core.math.sin(selectedSlice2.startAngle) };
var p12 = { x: selectedSlice2.radius * am4core.math.cos(selectedSlice2.startAngle + selectedSlice2.arc), y: selectedSlice2.radius * am4core.math.sin(selectedSlice2.startAngle + selectedSlice2.arc) };
p11 = am4core.utils.spritePointToSvg(p11, selectedSlice2);
p12 = am4core.utils.spritePointToSvg(p12, selectedSlice2);
var p21 = { x: 0, y: -pieSeries3.pixelRadius };
var p22 = { x: 0, y: pieSeries3.pixelRadius };
p21 = am4core.utils.spritePointToSvg(p21, pieSeries3);
p22 = am4core.utils.spritePointToSvg(p22, pieSeries3);
line3.x1 = p11.x;
line3.x2 = p21.x;
line3.y1 = p11.y;
line3.y2 = p21.y;
line4.x1 = p12.x;
line4.x2 = p22.x;
line4.y1 = p12.y;
line4.y2 = p22.y;
}
}
//endupdate
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() {
//$("#jsonData").html( "pieSeries.dataItems.getIndex(0)");
//alert("msg " + JSON.stringify(pieSeries.dataItems.getIndex(0)));
setTimeout(function() {
selectSlice(pieSeries.dataItems.getIndex(0));
}, 1000);
});
}); // end am4core.ready