Amcharts 5 条形图竞赛-值轴(在图表重放时重置)
以下是使用 Amcharts 5 生成条形图竞赛并在图表重放时重置值轴的代码示例。首先,在 HTML 文件中加入以下 div 元素:
然后,在 JavaScript 文件中加入以下代码:
// 绘制条形图
var chart = am5core.create("chartdiv", am5charts.XYChartRace);
chart.padding(40, 40, 40, 40);
// 设置数据源
chart.dataSource.url = "data.json";
// 将值轴重置为最小值
chart.events.on("replayed", function() {
chart.valueAxes.getIndex(0).min = Number.MAX_SAFE_INTEGER;
});
// 创建标签
var categoryLabel = chart.raceAxes.createChild(am5charts.CategoryAxisBreak);
categoryLabel.categoryAxis.dataFields.category = "category";
categoryLabel.startCategory = "";
categoryLabel.endCategory = "";
// 绘制条形图
var series = chart.series.push(
new am5charts.ColumnSeries()
);
series.columns.template.width = am5core.percent(80);
series.columns.template.adapter.add("fill", function(fill, target) {
return chart.colors.getIndex(target.dataItem.index);
});
series.dataFields.valueX = "value";
series.dataFields.categoryY = "category";
series.raceField = "value";
// 提供数据源
chart.dataSource.adapter.add("parsedData", function(data) {
// 预先处理数据以便图表正常工作
for (var i = 0; i < data.length; i++) {
var item = data[i];
item.value = Number(item.value);
}
return data;
});
chart.dataSource.load();
最后,创建 data.json 文件并加入以下示例数据:
[{
"category": "A",
"value": 100
},{
"category": "B",
"value": 200