在amchart v4中创建响应条形图

<script src="amcharts4/core.js"></script>
<script src="amcharts4/charts.js"></script>
<link rel="stylesheet" href="amcharts4/core.css">
<link rel="stylesheet" href="amcharts4/charts.css">

<div id="chartContainer" style="width: 100%; height: 400px;"></div>

var chart = am4core.create("chartContainer", am4charts.XYChart);

chart.data = [{
  "category": "Category 1",
  "value": 10
}, {
  "category": "Category 2",
  "value": 20
}, {
  "category": "Category 3",
  "value": 15
}];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 35;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";

chart.padding(40, 40, 40, 40);
chart.background.fill = am4core.color("#ffffff");
chart.legend = new am4charts.Legend();
chart.legend.position = "right";

chart.render();