要在amCharts 4中设置ColumnSeries的固定宽度,您可以使用column.width属性。以下是一个包含代码示例的解决方案:
// 导入amCharts库
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
// 注册主题
am4core.useTheme(am4themes_animated);
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 添加数据
chart.data = [{
"category": "Category 1",
"value": 100
}, {
"category": "Category 2",
"value": 200
}, {
"category": "Category 3",
"value": 300
}];
// 创建类别轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建ColumnSeries
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";
// 设置固定宽度
series.columns.template.width = am4core.percent(50); // 在这里设置宽度百分比
// 刷新图表
chart.invalidateData();
这个示例中,我们首先导入amCharts库,并注册主题,然后创建一个XYChart实例。然后,我们添加数据,并创建类别轴和值轴。接下来,我们创建一个ColumnSeries,并使用columns.template.width属性来设置列的宽度为50%。最后,我们使用chart.invalidateData()方法刷新图表以显示更改。
请确保在使用此代码之前正确安装amCharts库,并将chartdiv作为图表容器的ID。