markdown amCharts V4:嵌套饼图 Posted 2021-05-06
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown amCharts V4:嵌套饼图相关的知识,希望对你有一定的参考价值。
@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");
body {
font-family: "Archivo Narrow";
}
#chartdiv {
width: 100%;
height: 400px;
}
/**
* --------------------------------------------------------
* This demo was created using amCharts V4 preview release.
*
* V4 is the latest installement in amCharts data viz
* library family, to be released in the first half of
* 2018.
*
* For more information and documentation visit:
* https://www.amcharts.com/docs/v4/
* --------------------------------------------------------
*/
// Set theme
amcharts4.useTheme(amcharts4.themes.animated);
// Create chart instance
var chart = amcharts4.create("chartdiv", amcharts4.pie.PieChart);
// Let's cut a hole in our Pie chart the size of 40% the radius
chart.innerRadius = amcharts4.percent(40);
// Add data
chart.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
}];
// Add and configure Series
var pieSeries = chart.series.push(new amcharts4.pie.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.stroke = amcharts4.color("#fff");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
// Disabling labels and ticks on inner circle
pieSeries.labels.template.disabled = true;
pieSeries.ticks.template.disabled = true;
// Disable sliding out of slices
pieSeries.slices.template.states.getKey("hover").properties.shiftRadius = 0;
pieSeries.slices.template.states.getKey("hover").properties.scale = 0.9;
// Add second series
var pieSeries2 = chart.series.push(new amcharts4.pie.PieSeries());
pieSeries2.dataFields.value = "bottles";
pieSeries2.dataFields.category = "country";
pieSeries2.slices.template.stroke = amcharts4.color("#fff");
pieSeries2.slices.template.strokeWidth = 2;
pieSeries2.slices.template.strokeOpacity = 1;
pieSeries2.slices.template.states.getKey("hover").properties.shiftRadius = 0;
pieSeries2.slices.template.states.getKey("hover").properties.scale = 1.1;
<script src="https://www.amcharts.com/lib/4/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/4/pie.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
amCharts V4: Nested Pie chart
------------------------------
A [Pen](https://codepen.io/harunpehlivan/pen/GxeMyG) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).
[License](https://codepen.io/harunpehlivan/pen/GxeMyG/license).
以上是关于markdown amCharts V4:嵌套饼图的主要内容,如果未能解决你的问题,请参考以下文章
markdown amCharts V4:可变高度3D饼图
markdown amCharts V4:国家变身为饼图
markdown amCharts V4:带Legend的简单饼图
markdown amCharts V4:堆积柱形图
markdown amCharts V4:垂直Sankey图
markdown amCharts V4:雷达时间线图