案例1
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<style>
#chartdiv {
width: 650PX;
height: 350px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
root.container.set("layout", root.verticalLayout);
// Create container to hold charts
var chartContainer = root.container.children.push(am5.Container.new(root, {
layout: root.horizontalLayout,
width: am5.p100,
height: am5.p100
}));
// Create the 1st chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = chartContainer.children.push(
am5percent.PieChart.new(root, {
endAngle: 270,
innerRadius: am5.percent(60)
})
);
var series = chart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
endAngle: 270,
alignLabels: false
})
);
series.children.push(am5.Label.new(root, {
centerX: am5.percent(50),
centerY: am5.percent(50),
text: "First: {valueSum}",
populateText: true,
fontSize: "1.5em"
}));
series.slices.template.setAll({
cornerRadius: 8
})
series.states.create("hidden", {
endAngle: -90
});
series.labels.template.setAll({
textType: "circular"
});
// Create the 2nd chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart2 = chartContainer.children.push(
am5percent.PieChart.new(root, {
endAngle: 270,
innerRadius: am5.percent(60)
})
);
var series2 = chart2.series.push(
am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
endAngle: 270,
alignLabels: false,
tooltip: am5.Tooltip.new(root, {}) // a separate tooltip needed for this series
})
);
series2.children.push(am5.Label.new(root, {
centerX: am5.percent(50),
centerY: am5.percent(50),
text: "Second: {valueSum}",
populateText: true,
fontSize: "1.5em"
}));
series2.slices.template.setAll({
cornerRadius: 8
})
series2.states.create("hidden", {
endAngle: -90
});
series2.labels.template.setAll({
textType: "circular"
});
// Duplicate interaction
// Must be added before setting data
series.slices.template.events.on("pointerover", function(ev) {
var slice = ev.target;
var dataItem = slice.dataItem;
var otherSlice = getSlice(dataItem, series2);
if (otherSlice) {
otherSlice.hover();
}
});
series.slices.template.events.on("pointerout", function(ev) {
var slice = ev.target;
var dataItem = slice.dataItem;
var otherSlice = getSlice(dataItem, series2);
if (otherSlice) {
otherSlice.unhover();
}
});
series.slices.template.on("active", function(active, target) {
var slice = target;
var dataItem = slice.dataItem;
var otherSlice = getSlice(dataItem, series2);
if (otherSlice) {
otherSlice.set("active", active);
}
});
// Same for the 2nd series
series2.slices.template.events.on("pointerover", function(ev) {
var slice = ev.target;
var dataItem = slice.dataItem;
var otherSlice = getSlice(dataItem, series);
if (otherSlice) {
otherSlice.hover();
}
});
series2.slices.template.events.on("pointerout", function(ev) {
var slice = ev.target;
var dataItem = slice.dataItem;
var otherSlice = getSlice(dataItem, series);
if (otherSlice) {
otherSlice.unhover();
}
});
series2.slices.template.on("active", function(active, target) {
var slice = target;
var dataItem = slice.dataItem;
var otherSlice = getSlice(dataItem, series);
if (otherSlice) {
otherSlice.set("active", active);
}
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([{
category: "Lithuania",
value: 501
}, {
category: "Czechia",
value: 301
}, {
category: "Ireland",
value: 201
}, {
category: "Germany",
value: 165
}]);
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series2.data.setAll([{
category: "Lithuania",
value: 201
}, {
category: "Czechia",
value: 101
}, {
category: "Ireland",
value: 51
}, {
category: "Germany",
value: 15
}]);
function getSlice(dataItem, series) {
var otherSlice;
am5.array.each(series.dataItems, function(di) {
if (di.get("category") === dataItem.get("category")) {
otherSlice = di.get("slice");
}
});
return otherSlice;
}
// Create legend
var legend = root.container.children.push(am5.Legend.new(root, {
x: am5.percent(50),
centerX: am5.percent(50)
}));
// Trigger all the same for the 2nd series
legend.itemContainers.template.events.on("pointerover", function(ev) {
var dataItem = ev.target.dataItem.dataContext;
var slice = getSlice(dataItem, series2);
slice.hover();
});
legend.itemContainers.template.events.on("pointerout", function(ev) {
var dataItem = ev.target.dataItem.dataContext;
var slice = getSlice(dataItem, series2);
slice.unhover();
});
legend.itemContainers.template.on("disabled", function(disabled, target) {
var dataItem = target.dataItem.dataContext;
var slice = getSlice(dataItem, series2);
if (disabled) {
series2.hideDataItem(slice.dataItem);
}
else {
series2.showDataItem(slice.dataItem);
}
});
legend.data.setAll(series.dataItems);
series.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>
点击查看详情
案例2
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<style>
#chartdiv {
width: 650PX;
height: 350px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Create custom theme
// https://www.amcharts.com/docs/v5/concepts/themes/#Quick_custom_theme
var myTheme = am5.Theme.new(root);
myTheme.rule("Label").set("fontSize", "0.8em");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
myTheme
]);
// Create wrapper container
var container = root.container.children.push(am5.Container.new(root, {
width: am5.p100,
height: am5.p100,
layout: root.horizontalLayout
}));
// Create first chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart0 = container.children.push(am5percent.PieChart.new(root, {
innerRadius: am5.p50,
tooltip: am5.Tooltip.new(root, {})
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series0 = chart0.series.push(am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
alignLabels: false
}));
series0.labels.template.setAll({
textType: "circular",
templateField: "dummyLabelSettings"
});
series0.ticks.template.set("forceHidden", true);
var sliceTemplate0 = series0.slices.template;
sliceTemplate0.setAll({
draggable: true,
templateField: "settings",
cornerRadius: 5
});
// Separator line
container.children.push(am5.Line.new(root, {
layer: 1,
height: am5.percent(60),
y: am5.p50,
centerY: am5.p50,
strokeDasharray: [4, 4],
stroke: root.interfaceColors.get("alternativeBackground"),
strokeOpacity: 0.5
}));
// Label
container.children.push(am5.Label.new(root, {
layer: 1,
text: "Drag slices over the line",
y: am5.p50,
textAlign: "center",
rotation: -90,
isMeasured: false
}));
// Create second chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart1 = container.children.push(am5percent.PieChart.new(root, {
innerRadius: am5.p50,
tooltip: am5.Tooltip.new(root, {})
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series1 = chart1.series.push(am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
alignLabels: false
}));
series1.labels.template.setAll({
textType: "circular",
radius: 20,
templateField: "dummyLabelSettings"
});
series1.ticks.template.set("forceHidden", true);
var sliceTemplate1 = series1.slices.template;
sliceTemplate1.setAll({
draggable: true,
templateField: "settings",
cornerRadius: 5
});
var previousDownSlice;
// change layers when down
sliceTemplate0.events.on("pointerdown", function (e) {
if (previousDownSlice) {
// previousDownSlice.set("layer", 0);
}
e.target.set("layer", 1);
previousDownSlice = e.target;
});
sliceTemplate1.events.on("pointerdown", function (e) {
if (previousDownSlice) {
// previousDownSlice.set("layer", 0);
}
e.target.set("layer", 1);
previousDownSlice = e.target;
});
// when released, do all the magic
sliceTemplate0.events.on("pointerup", function (e) {
series0.hideTooltip();
series1.hideTooltip();
var slice = e.target;
if (slice.x() > container.width() / 4) {
var index = series0.slices.indexOf(slice);
slice.dataItem.hide();
var series1DataItem = series1.dataItems[index];
series1DataItem.show();
series1DataItem.get("slice").setAll({ x: 0, y: 0 });
handleDummy(series0);
handleDummy(series1);
} else {
slice.animate({
key: "x",
to: 0,
duration: 500,
easing: am5.ease.out(am5.ease.cubic)
});
slice.animate({
key: "y",
to: 0,
duration: 500,
easing: am5.ease.out(am5.ease.cubic)
});
}
});
sliceTemplate1.events.on("pointerup", function (e) {
var slice = e.target;
series0.hideTooltip();
series1.hideTooltip();
if (slice.x() < container.width() / 4) {
var index = series1.slices.indexOf(slice);
slice.dataItem.hide();
var series0DataItem = series0.dataItems[index];
series0DataItem.show();
series0DataItem.get("slice").setAll({ x: 0, y: 0 });
handleDummy(series0);
handleDummy(series1);
} else {
slice.animate({
key: "x",
to: 0,
duration: 500,
easing: am5.ease.out(am5.ease.cubic)
});
slice.animate({
key: "y",
to: 0,
duration: 500,
easing: am5.ease.out(am5.ease.cubic)
});
}
});
// data
var data = [
{
category: "Dummy",
value: 1000,
settings: {
fill: am5.color(0xdadada),
stroke: am5.color(0xdadada),
fillOpacity: 0.3,
strokeDasharray: [4, 4],
tooltipText: null,
draggable: false
},
dummyLabelSettings: {
forceHidden: true
}
},
{
category: "Lithuania",
value: 501.9
},
{
category: "Estonia",
value: 301.9
},
{
category: "Ireland",
value: 201.1
},
{
category: "Germany",
value: 165.8
},
{
category: "Australia",
value: 139.9
},
{
category: "Austria",
value: 128.3
}
];
// show/hide dummy slice depending if there are other visible slices
function handleDummy(series) {
// count visible data items
var visibleCount = 0;
am5.array.each(series.dataItems, function (dataItem) {
if (!dataItem.isHidden()) {
visibleCount++;
}
});
// if all hidden, show dummy
if (visibleCount == 0) {
series.dataItems[0].show();
} else {
series.dataItems[0].hide();
}
}
// set data
series0.data.setAll(data);
series1.data.setAll(data);
// hide all except dummy
am5.array.each(series1.dataItems, function (dataItem) {
if (dataItem.get("category") != "Dummy") {
dataItem.hide(0);
}
});
// hide dummy
series0.dataItems[0].hide(0);
// reveal container
container.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>
点击查看详情
案例3
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<style>
#chartdiv {
width: 750PX;
height: 350px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
var container = root.container.children.push(
am5.Container.new(root, {
width: am5.p100,
height: am5.p100,
layout: root.horizontalLayout
})
);
// Create main chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = container.children.push(
am5percent.PieChart.new(root, {
tooltip: am5.Tooltip.new(root, {})
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
alignLabels: false
})
);
series.labels.template.setAll({
textType: "circular",
radius: 4
});
series.ticks.template.set("visible", false);
series.slices.template.set("toggleKey", "none");
// add events
series.slices.template.events.on("click", function(e) {
selectSlice(e.target);
});
// Create sub chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var subChart = container.children.push(
am5percent.PieChart.new(root, {
radius: am5.percent(50),
tooltip: am5.Tooltip.new(root, {})
})
);
// Create sub series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var subSeries = subChart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category"
})
);
subSeries.data.setAll([
{ category: "A", value: 0 },
{ category: "B", value: 0 },
{ category: "C", value: 0 },
{ category: "D", value: 0 },
{ category: "E", value: 0 },
{ category: "F", value: 0 },
{ category: "G", value: 0 }
]);
subSeries.slices.template.set("toggleKey", "none");
var selectedSlice;
series.on("startAngle", function() {
updateLines();
});
container.events.on("boundschanged", function() {
root.events.once("frameended", function() {
updateLines();
})
});
function updateLines() {
if (selectedSlice) {
var startAngle = selectedSlice.get("startAngle");
var arc = selectedSlice.get("arc");
var radius = selectedSlice.get("radius");
var x00 = radius * am5.math.cos(startAngle);
var y00 = radius * am5.math.sin(startAngle);
var x10 = radius * am5.math.cos(startAngle + arc);
var y10 = radius * am5.math.sin(startAngle + arc);
var subRadius = subSeries.slices.getIndex(0).get("radius");
var x01 = 0;
var y01 = -subRadius;
var x11 = 0;
var y11 = subRadius;
var point00 = series.toGlobal({ x: x00, y: y00 });
var point10 = series.toGlobal({ x: x10, y: y10 });
var point01 = subSeries.toGlobal({ x: x01, y: y01 });
var point11 = subSeries.toGlobal({ x: x11, y: y11 });
line0.set("points", [point00, point01]);
line1.set("points", [point10, point11]);
}
}
// lines
var line0 = container.children.push(
am5.Line.new(root, {
position: "absolute",
stroke: root.interfaceColors.get("text"),
strokeDasharray: [2, 2]
})
);
var line1 = container.children.push(
am5.Line.new(root, {
position: "absolute",
stroke: root.interfaceColors.get("text"),
strokeDasharray: [2, 2]
})
);
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
{
category: "Lithuania",
value: 500,
subData: [
{ category: "A", value: 200 },
{ category: "B", value: 150 },
{ category: "C", value: 100 },
{ category: "D", value: 100 }
]
},
{
category: "Czechia",
value: 300,
subData: [
{ category: "A", value: 150 }
]
},
{
category: "Ireland",
value: 200,
subData: [
{ category: "A", value: 110 },
{ category: "B", value: 60 },
{ category: "C", value: 30 }
]
},
{
category: "Germany",
value: 150,
subData: [
{ category: "A", value: 80 },
{ category: "B", value: 40 },
{ category: "C", value: 30 }
]
},
{
category: "Australia",
value: 140,
subData: [
{ category: "A", value: 90 },
{ category: "B", value: 40 },
{ category: "C", value: 10 }
]
},
{
category: "Austria",
value: 120,
subData: [
{ category: "A", value: 60 },
{ category: "B", value: 30 },
{ category: "C", value: 30 }
]
}
]);
function selectSlice(slice) {
selectedSlice = slice;
var dataItem = slice.dataItem;
var dataContext = dataItem.dataContext;
if (dataContext) {
var i = 0;
subSeries.data.each(function(dataObject) {
var dataObj = dataContext.subData[i];
if(dataObj){
if(!subSeries.dataItems[i].get("visible")){
subSeries.dataItems[i].show();
}
subSeries.data.setIndex(i, dataObj);
}
else{
subSeries.dataItems[i].hide();
}
i++;
});
}
var middleAngle = slice.get("startAngle") + slice.get("arc") / 2;
var firstAngle = series.dataItems[0].get("slice").get("startAngle");
series.animate({
key: "startAngle",
to: firstAngle - middleAngle,
duration: 1000,
easing: am5.ease.out(am5.ease.cubic)
});
series.animate({
key: "endAngle",
to: firstAngle - middleAngle + 360,
duration: 1000,
easing: am5.ease.out(am5.ease.cubic)
});
}
container.appear(1000, 10);
series.events.on("datavalidated", function() {
selectSlice(series.slices.getIndex(0));
});
}); // end am5.ready()
</script>
</body>
</html>
点击查看详情
