Amchart5中图例默认行为的更改问题
创始人
2024-09-30 04:30:21
0

为了更改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上调用。此事件在项目被单击时触发,并检查其“当前状态”,根据所选项状态的结果来更改默认状态。在本例中,“默认状态”设置为空,以便

相关内容

热门资讯

安卓换鸿蒙系统会卡吗,体验流畅... 最近手机圈可是热闹非凡呢!不少安卓用户都在议论纷纷,说鸿蒙系统要来啦!那么,安卓手机换上鸿蒙系统后,...
app安卓系统登录不了,解锁登... 最近是不是你也遇到了这样的烦恼:手机里那个心爱的APP,突然就登录不上了?别急,让我来帮你一步步排查...
安卓系统拦截短信在哪,安卓系统... 你是不是也遇到了这种情况:手机里突然冒出了很多垃圾短信,烦不胜烦?别急,今天就来教你怎么在安卓系统里...
安卓系统要维护多久,安卓系统维... 你有没有想过,你的安卓手机里那个陪伴你度过了无数日夜的安卓系统,它究竟要陪伴你多久呢?这个问题,估计...
windows官网系统多少钱 Windows官网系统价格一览:了解正版Windows的购买成本Windows 11官方价格解析微软...
安卓系统如何卸载app,轻松掌... 手机里的App越来越多,是不是感觉内存不够用了?别急,今天就来教你怎么轻松卸载安卓系统里的App,让...
怎么复制照片安卓系统,操作步骤... 亲爱的手机控们,是不是有时候想把自己的手机照片分享给朋友,或者备份到电脑上呢?别急,今天就来教你怎么...
安卓系统应用怎么重装,安卓应用... 手机里的安卓应用突然罢工了,是不是让你头疼不已?别急,今天就来手把手教你如何重装安卓系统应用,让你的...
iwatch怎么连接安卓系统,... 你有没有想过,那款时尚又实用的iWatch,竟然只能和iPhone好上好?别急,今天就来给你揭秘,怎...
iphone系统与安卓系统更新... 最近是不是你也遇到了这样的烦恼?手机更新系统总是失败,急得你团团转。别急,今天就来给你揭秘为什么iP...