案例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: 550PX;
height: 280px;
}
</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)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
// start and end angle must be set both for chart and series
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
layout: root.verticalLayout
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
// start and end angle must be set both for chart and series
var series0 = chart.series.push(
am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category",
alignLabels: false,
radius: am5.percent(100),
innerRadius: am5.percent(80)
})
);
series0.states.create("hidden", {
startAngle: 180,
endAngle: 180
});
series0.slices.template.setAll({
fillOpacity: 0.5,
strokeOpacity: 0,
templateField: "settings"
});
series0.slices.template.states.create("hover", { scale: 1 });
series0.slices.template.states.create("active", { shiftRadius:0 });
series0.labels.template.setAll({
templateField: "settings"
});
series0.ticks.template.setAll({
templateField: "settings"
});
series0.labels.template.setAll({
textType: "circular",
radius: 30
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series0.data.setAll([
{
category: "First + Second",
value: 60
},
{
category: "Unused",
value: 30,
settings: { forceHidden: true }
}
]);
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
// start and end angle must be set both for chart and series
var series1 = chart.series.push(
am5percent.PieSeries.new(root, {
radius: am5.percent(95),
innerRadius: am5.percent(85),
valueField: "value",
categoryField: "category",
alignLabels: false
})
);
series1.states.create("hidden", {
startAngle: 180,
endAngle: 180
});
series1.slices.template.setAll({
templateField: "sliceSettings",
strokeOpacity: 0
});
series1.labels.template.setAll({
textType: "circular"
});
series1.labels.template.adapters.add("radius", function (radius, target) {
var dataItem = target.dataItem;
var slice = dataItem.get("slice");
return -(slice.get("radius") - slice.get("innerRadius")) / 2 - 10;
});
series1.slices.template.states.create("hover", { scale: 1 });
series1.slices.template.states.create("active", { shiftRadius:0 });
series1.ticks.template.setAll({
forceHidden: true
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series1.data.setAll([{
category: "First",
value: 30
}, {
category: "Second",
value: 30
}, {
category: "Remaining",
value: 30,
sliceSettings: { fill: am5.color(0xdedede) }
}]);
}); // 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: 550PX;
height: 280px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
<script>
am5.ready(function() {
// Define data for each year
var chartData = {
"1995": [
{ sector: "Agriculture", size: 6.6 },
{ sector: "Mining and Quarrying", size: 0.6 },
{ sector: "Manufacturing", size: 23.2 },
{ sector: "Electricity and Water", size: 2.2 },
{ sector: "Construction", size: 4.5 },
{ sector: "Trade (Wholesale, Retail, Motor)", size: 14.6 },
{ sector: "Transport and Communication", size: 9.3 },
{ sector: "Finance, real estate and business services", size: 22.5 } ],
"1996": [
{ sector: "Agriculture", size: 6.4 },
{ sector: "Mining and Quarrying", size: 0.5 },
{ sector: "Manufacturing", size: 22.4 },
{ sector: "Electricity and Water", size: 2 },
{ sector: "Construction", size: 4.2 },
{ sector: "Trade (Wholesale, Retail, Motor)", size: 14.8 },
{ sector: "Transport and Communication", size: 9.7 },
{ sector: "Finance, real estate and business services", size: 22 } ],
"1997": [
{ sector: "Agriculture", size: 6.1 },
{ sector: "Mining and Quarrying", size: 0.2 },
{ sector: "Manufacturing", size: 20.9 },
{ sector: "Electricity and Water", size: 1.8 },
{ sector: "Construction", size: 4.2 },
{ sector: "Trade (Wholesale, Retail, Motor)", size: 13.7 },
{ sector: "Transport and Communication", size: 9.4 },
{ sector: "Finance, real estate and business services", size: 22.1 } ]
};
// 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)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5percent.PieChart.new(root, {
innerRadius: 100,
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "size",
categoryField: "sector"
}));
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
{ sector: "Agriculture", size: 6.6 },
{ sector: "Mining and Quarrying", size: 0.6 },
{ sector: "Manufacturing", size: 23.2 },
{ sector: "Electricity and Water", size: 2.2 },
{ sector: "Construction", size: 4.5 },
{ sector: "Trade (Wholesale, Retail, Motor)", size: 14.6 },
{ sector: "Transport and Communication", size: 9.3 },
{ sector: "Finance, real estate and business services", size: 22.5 }
]);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);
// Add label
var label = root.tooltipContainer.children.push(am5.Label.new(root, {
x: am5.p50,
y: am5.p50,
centerX: am5.p50,
centerY: am5.p50,
fill: am5.color(0x000000),
fontSize: 50
}));
// Animate chart data
var currentYear = 1995;
function getCurrentData() {
var data = chartData[currentYear];
currentYear++;
if (currentYear > 2014)
currentYear = 1995;
return data;
}
function loop() {
label.set("text", currentYear);
var data = getCurrentData();
for(var i = 0; i < data.length; i++) {
series.data.setIndex(i, data[i]);
}
chart.setTimeout( loop, 4000 );
}
loop();
}); // 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: 700PX;
height: 700px;
}
</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)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout,
innerRadius: am5.percent(50)
}));
// 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",
centerX: 0,
centerY: 0
});
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series.data.setAll([
{ value: 10, category: "One" },
{ value: 9, category: "Two" },
{ value: 6, category: "Three" },
{ value: 5, category: "Four" },
{ value: 4, category: "Five" },
{ value: 3, category: "Six" },
{ value: 1, category: "Seven" },
]);
// Create legend
// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15,
}));
legend.data.setAll(series.dataItems);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>
点击查看详情
案例4
<!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)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
// start and end angle must be set both for chart and series
var chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout,
innerRadius: am5.percent(40)
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
// start and end angle must be set both for chart and series
var series0 = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "bottles",
categoryField: "country",
alignLabels: false
}));
var bgColor = root.interfaceColors.get("background");
series0.ticks.template.setAll({ forceHidden: true });
series0.labels.template.setAll({ forceHidden: true });
series0.slices.template.setAll({
stroke: bgColor,
strokeWidth: 2,
tooltipText:
"{category}: {valuePercentTotal.formatNumber('0.00')}% ({value} bottles)"
});
series0.slices.template.states.create("hover", { scale: 0.95 });
var series1 = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "litres",
categoryField: "country",
alignLabels: true
}));
series1.slices.template.setAll({
stroke: bgColor,
strokeWidth: 2,
tooltipText:
"{category}: {valuePercentTotal.formatNumber('0.00')}% ({value} litres)"
});
var data = [{
country: "Lithuania",
litres: 501.9,
bottles: 1500
}, {
country: "Czech Republic",
litres: 301.9,
bottles: 990
}, {
country: "Ireland",
litres: 201.1,
bottles: 785
}, {
country: "Germany",
litres: 165.8,
bottles: 255
}, {
country: "Australia",
litres: 139.9,
bottles: 452
}, {
country: "Austria",
litres: 128.3,
bottles: 332
}, {
country: "UK",
litres: 99,
bottles: 150
}, {
country: "Belgium",
litres: 60,
bottles: 178
}, {
country: "The Netherlands",
litres: 50,
bottles: 50
}];
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
series0.data.setAll(data);
series1.data.setAll(data);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series0.appear(1000, 100);
series1.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>
点击查看详情
