将图表添加到Amcharts中的第一个面板

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv"></div>

// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);

// 添加数据
chart.data = [{
  "category": "类别1",
  "value": 10
}, {
  "category": "类别2",
  "value": 20
}, {
  "category": "类别3",
  "value": 15
}];

// 创建一个类别轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;

// 创建一个值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// 创建一个柱状图系列
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
series.name = "值";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

// 添加动画效果
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;

// 应用主题
chart.theme = am4themes_animated;