为了更改Amchart 5中图例的默认行为,可以使用以下代码示例中的选项,“下划线”和“括号”:
// 配置选项
var chart = am5core.create("chartdiv", am5charts.XYChart);
chart.legend = new am5charts.Legend();
chart.legend.itemContainers.template.events.on("hit", function(ev) {
if(ev.target.isActive){
ev.target.defaultState = {visible: false};
}
else{
ev.target.defaultState = {visible: true};
}
})
chart.legend.data = [
{name:"Series 1", fill:"#F00"},
{name:"Series 2", fill:"#0F0"},
{name:"Series 3", fill:"#00F"}
];
chart.legend.itemContainers.template.propertyFields.fill = "fill";
chart.legend.itemContainers.template.propertyFields.stroke = "fill";
chart.legend.itemContainers.template.text = "{name}:";
chart.legend.itemContainers.template.tooltipText = "{name}: {valueY}";
chart.legend.itemContainers.template.states.create("active").properties.fillOpacity=1;
chart.legend.itemContainers.template.states.create("active").properties.strokeOpacity=1;
chart.legend.itemContainers.template.states.create("disabled").properties.fillOpacity=0.3;
chart.legend.itemContainers.template.states.create("hover").properties.fillOpacity=0.7;
chart.legend.itemContainers.template.states.create("down").properties.fillOpacity=0.5;
chart.legend.itemContainers.template.states.create("toggled").properties.fillOpacity=0.7;
chart.legend.align = "center";
chart.legend.valign = "bottom";
chart.legend.useDefaultMarker = true;
chart.legend.padding(20,20,20,20);
// 将选项设置为可用
chart.legend.itemContainers.template.configurable = true;
chart.legend.itemContainers.template.cursorOverStyle = am5core.MouseCursorStyle.pointer;
chart.legend.itemContainers.template.adapter.add("fill", function(fill, target){
if(target.isActive){
return am5color.darken(fill, 0.3);
}
return fill;
})
chart.legend.itemContainers.template.adapter.add("hoverOn", function(hoverOn, target){
if(target.isActive){
return false;
}
return hoverOn;
})
使用以上代码,可以更改Amchart 5中图例默认行为以满足需求。在上述代码示例中,“hit”事件在LegendItemContainerTemplate上调用。此事件在项目被单击时触发,并检查其“当前状态”,根据所选项状态的结果来更改默认状态。在本例中,“默认状态”设置为空,以便