markdown amCharts V4：堆积柱形图

Posted 2021-05-06

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

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

/**
 * --------------------------------------------------------
 * 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.xy.XYChart);

  chart.data = [
    {
      category: "One",
      value1: 1,
      value2: 5,
      value3: 3,
      value4: 3
    },
    {
      category: "Two",
      value1: 2,
      value2: 5,
      value3: 3,
      value4: 4
    },
    {
      category: "Three",
      value1: 3,
      value2: 5,
      value3: 4,
      value4: 4
    },
    {
      category: "Four",
      value1: 4,
      value2: 5,
      value3: 6,
      value4: 4
    },
    {
      category: "Five",
      value1: 3,
      value2: 5,
      value3: 4,
      value4: 4
    },
    {
      category: "Six",
      value1: 8,
      value2: 7,
      value3: 10,
      value4: 4
    },
    {
      category: "Seven",
      value1: 10,
      value2: 8,
      value3: 6,
      value4: 4
    }
  ];

  chart.legend = new amcharts4.xy.Legend();
  chart.colors.step = 2;

  var categoryAxis = chart.xAxes.push(new amcharts4.xy.CategoryAxis());
  categoryAxis.dataFields.category = "category";
  categoryAxis.renderer.grid.template.location = 0;

  var valueAxis = chart.yAxes.push(new amcharts4.xy.ValueAxis());  
  valueAxis.min = 0;
  valueAxis.renderer.minWidth = 35;

  var series1 = chart.series.push(new amcharts4.xy.ColumnSeries());
  series1.columns.template.width = amcharts4.percent(80);
  series1.columns.template.tooltipText = "{name}: {valueY.value}";
  series1.name = "Series 1";
  series1.dataFields.categoryX = "category";
  series1.dataFields.valueY = "value1";
  series1.stacked = true;

  var series2 = chart.series.push(new amcharts4.xy.ColumnSeries());
  series2.columns.template.width = amcharts4.percent(80);
  series2.columns.template.tooltipText = "{name}: {valueY.value}";
  series2.name = "Series 2";
  series2.dataFields.categoryX = "category";
  series2.dataFields.valueY = "value2";
  series2.stacked = true;

  var series3 = chart.series.push(new amcharts4.xy.ColumnSeries());
  series3.columns.template.width = amcharts4.percent(80);
  series3.columns.template.tooltipText = "{name}: {valueY.value}";
  series3.name = "Series 3";
  series3.dataFields.categoryX = "category";
  series3.dataFields.valueY = "value3";
  series3.stacked = true;

  var series4 = chart.series.push(new amcharts4.xy.ColumnSeries());
  series4.columns.template.width = amcharts4.percent(80);
  series4.columns.template.tooltipText = "{name}: {valueY.value}";
  series4.name = "Series 4";
  series4.dataFields.categoryX = "category";
  series4.dataFields.valueY = "value4";
  series4.stacked = true;

  chart.scrollbarX = new amcharts4.Scrollbar();
});

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

amCharts V4:  Stacked column chart
----------------------------------


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

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