要使具有不同长度的ValueAxis标签的图表宽度相等,可以使用amCharts 4的自定义适应性功能。
以下是一个示例代码,其中使用了amCharts 4的自定义适应性功能来调整图表的宽度:
// 创建图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置数据
chart.data = [{
"category": "Category 1",
"value": 10
}, {
"category": "Category 2",
"value": 20
}, {
"category": "Category 3",
"value": 30
}, {
"category": "Category 4",
"value": 40
}];
// 创建分类轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
// 创建值轴
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.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
// 设置图表宽度适应性
chart.events.on("datavalidated", function () {
// 获取最长标签的宽度
var maxWidth = 0;
categoryAxis.renderer.labels.each(function (label) {
maxWidth = Math.max(label.measuredWidth, maxWidth);
});
// 设置图表宽度为标签宽度的总和
var chartWidth = maxWidth * categoryAxis.renderer.labels.length;
chart.width = chartWidth;
});
// 绘制图表
chart.responsive.enabled = true;
chart.responsive.useDefault = false;
chart.responsive.rules.push({
relevant: function (target) {
if (target.pixelWidth <= chart.pixelWidth) {
return true;
}
return false;
},
state: function (target, stateId) {
return target;
}
});
在这个示例中,我们使用了amCharts 4的自定义适应性功能来调整图表的宽度。我们监听了datavalidated事件,并在事件处理程序中获取最长标签的宽度,然后设置图表的宽度为标签宽度的总和。
最后,我们还使用了自定义适应性规则,以便在目标图表宽度小于等于容器宽度时应用适应性。
请注意,这只是一个示例代码,具体实现要根据您的需求进行适当调整。