在AmCharts中,可以使用labelFunction属性来定义垂直轴堆叠图中的标签名称。以下是一个包含代码示例的解决方法:
// 创建一个垂直轴堆叠图的图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置数据源
chart.data = [{
category: "Category 1",
value1: 10,
value2: 15,
value3: 5
}, {
category: "Category 2",
value1: 20,
value2: 10,
value3: 15
}, {
category: "Category 3",
value1: 5,
value2: 10,
value3: 20
}];
// 创建类别轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建堆叠柱状图
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "category";
series1.name = "Series 1";
series1.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "category";
series2.name = "Series 2";
series2.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "value3";
series3.dataFields.categoryX = "category";
series3.name = "Series 3";
series3.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
// 设置标签名称的显示函数
valueAxis.renderer.labels.template.adapter.add("text", function(text) {
if (text.indexOf("value1") !== -1) {
return "Value 1";
}
if (text.indexOf("value2") !== -1) {
return "Value 2";
}
if (text.indexOf("value3") !== -1) {
return "Value 3";
}
return text;
});
// 添加图例
chart.legend = new am4charts.Legend();
// 刷新图表
chart.invalidateData();
在上面的代码中,我们首先创建了一个垂直轴堆叠图的图表实例,并设置了数据源。然后创建了类别轴和值轴,并分别将它们添加到图表中。接下来,创建了三个堆叠柱状图系列,并分别设置了相应的数值字段和类别字段。然后,通过使用adapter函数来定义值轴标签名称的显示函数,根据标签名称中的关键字来返回相应的名称。最后,添加了图例,并刷新了图表。
运行上述代码,将会得到一个垂直轴堆叠图,其中每个柱状图系列的标签名称分别为"Value 1"、"Value 2"和"Value 3"。