要使用外部自定义按钮而不是图例来切换系列,可以使用amCharts的事件处理功能。以下是一个使用外部按钮切换系列的示例代码:
HTML代码:
JavaScript代码:
// 创建图表
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 添加数据
chart.data = [{
"category": "一月",
"value1": 100,
"value2": 200,
"value3": 300
}, {
"category": "二月",
"value1": 150,
"value2": 250,
"value3": 350
}, {
"category": "三月",
"value1": 200,
"value2": 300,
"value3": 400
}];
// 创建类别轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建系列1
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "category";
series1.name = "Series 1";
// 创建系列2
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "category";
series2.name = "Series 2";
// 创建系列3
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "value3";
series3.dataFields.categoryX = "category";
series3.name = "Series 3";
// 隐藏图例
chart.legend = new am4charts.Legend();
// 外部按钮事件处理
document.getElementById("series1").addEventListener("click", function() {
series1.hidden = !series1.hidden;
});
document.getElementById("series2").addEventListener("click", function() {
series2.hidden = !series2.hidden;
});
document.getElementById("series3").addEventListener("click", function() {
series3.hidden = !series3.hidden;
});
这段代码首先创建了一个包含三个系列的柱状图,并将数据添加到图表中。然后,通过addEventListener函数将点击事件添加到每个按钮上。当按钮被点击时,切换相应系列的hidden属性,从而显示或隐藏该系列。