要将AmCharts的柱状图方向相反,可以使用以下代码示例:
HTML:
JavaScript:
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 将柱状图方向设置为相反
chart.reverseCategories = true;
// 添加数据
chart.data = [{
"category": "A",
"value": 10
}, {
"category": "B",
"value": 20
}, {
"category": "C",
"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 = "Value";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
// 添加柱状图的列模板
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
// 渲染图表
chart.render();
通过将chart.reverseCategories属性设置为true,可以实现柱状图方向相反的效果。