markdown amCharts V4：可变高度3D饼图

Posted 2021-05-06

@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");

body {
  font-family: "Archivo Narrow";
}
#chartdiv {
  width: 100%;
  height: 98vh;
}

/**
 * --------------------------------------------------------
 * 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/
 * --------------------------------------------------------
 */
amcharts4.ready(function() {
  amcharts4.useTheme(amcharts4.themes.animated);
  var chart = amcharts4.create("chartdiv", amcharts4.pie3d.PieChart3D);
  chart.data = [
    {
      country: "Lithuania",
      litres: 501.9
    },
    {
      country: "Czech Republic",
      litres: 301.9
    },
    {
      country: "Ireland",
      litres: 201.1
    },
    {
      country: "Germany",
      litres: 165.8
    },
    {
      country: "Australia",
      litres: 139.9
    },
    {
      country: "Austria",
      litres: 128.3
    }
  ];

  chart.innerRadius = amcharts4.percent(40);
  chart.depth = 120;

  chart.legend = new amcharts4.pie3d.Legend();
  chart.legend.position = "right";

  var series = chart.series.push(new amcharts4.pie3d.PieSeries3D());
  series.dataFields.value = "litres";
  series.dataFields.depthValue = "litres";
  series.dataFields.category = "country";
  series.slices.template.cornerRadius = 5;
  series.colors.step = 3;
});

<script src="https://www.amcharts.com/lib/4/amcharts.js?x"></script>
<script src="https://www.amcharts.com/lib/4/pie3d.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

amCharts V4:  Variable height 3D pie chart
------------------------------------------


A [Pen](https://codepen.io/harunpehlivan/pen/RMdjLO) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/RMdjLO/license).