如何在AMCharts5中通过下拉复选框获取ID并控制图表系列显示

我熟悉Python，但Java相关知识不多，现在尝试在AMCharts5里实现一个需求：根据下拉复选框的选中状态，获取事件对象ev里的item.id，然后根据这个ID执行对应函数，控制图表系列的显示和隐藏。

控制台打印的ev对象结果 #

checked: false
item:{id: 'activities', label: 'Display activities', form: 'checkbox', 
value: '', checked: true}
target: et {uid: 153, _settings: {…}, _privateSettings: {…}, 
_settingEvents: {…}, _privateSettingEvents: {…}, …}
type: 'changed'
value: false
[[Prototype]]: Object

我尝试的事件处理代码（无法正确获取ID） #

myDropdown.getPrivate("dropdown").events.on("changed", function (ev) {
    tooltiptoggle = !tooltiptoggle;
    console.log(ev);
    console.log(tooltiptoggle);
    if (ev['id'] == "emotion") {
        if (tooltiptoggle == true) {
            series.show();
            //yaxis.show();

        }
        if (tooltiptoggle == false) {
            series.hide();
            //  yaxis.hide();
        }
    }
});

完整的下拉框代码 #

var myDropdown = am5stock.DropdownListControl.new(root, {
      stockChart: stockChart,
      name: "Options",
      fixedLabel: true,
      items: [{
          id: "emotion",
          label: "Display emotion result",
          form: "checkbox",
          value: "",
          checked: true
      },
      {
          id: "activities",
          label: "Display activities",
          form: "checkbox",
          value: "",
          checked: true
      }
      ]
  });


  myDropdown.getPrivate("dropdown").events.on("changed", function (ev) {
      tooltiptoggle = !tooltiptoggle;
      console.log(ev);
      console.log(tooltiptoggle);
      if (ev['id'] == "emotion") {
          if (tooltiptoggle == true) {
              series.show();
              //yaxis.show();

          }
          if (tooltiptoggle == false) {
              series.hide();
              //  yaxis.hide();
          }
      }

  });


  var toolbar = am5stock.StockToolbar.new(root, {
      container: document.getElementById("chartcontrols"),
      stockChart: stockChart,
      controls: [


          am5stock.DrawingControl.new(root, {
              stockChart: stockChart
          }),
          am5stock.ResetControl.new(root, {
              stockChart: stockChart
          }),
          myDropdown,
      ]
  })

问题核心是获取ID的路径错误，同时不需要手动维护状态变量：

1. 从控制台输出可知，id属于ev.item对象，而非直接挂载在ev上，所以要通过ev.item.id获取
2. 事件对象ev自带当前复选框的选中状态ev.checked，无需自己维护tooltiptoggle变量，避免状态不同步

修改后的事件处理函数如下：

myDropdown.getPrivate("dropdown").events.on("changed", function (ev) {
  // 获取当前操作的复选框项ID
  const itemId = ev.item.id;
  // 获取当前复选框的选中状态
  const isChecked = ev.checked;

  // 处理emotion系列的显示/隐藏
  if (itemId === "emotion") {
    isChecked ? series.show() : series.hide();
    // 如果需要操作对应Y轴，取消注释下面的代码
    // isChecked ? yaxis.show() : yaxis.hide();
  }
  // 处理activities系列的显示/隐藏（假设你有对应的activitiesSeries变量）
  else if (itemId === "activities") {
    isChecked ? activitiesSeries.show() : activitiesSeries.hide();
    // 对应Y轴操作同理
    // isChecked ? activitiesYaxis.show() : activitiesYaxis.hide();
  }
});

关键说明 #

• 直接通过ev.item.id定位到目标复选框的ID，符合控制台输出的对象结构
• 使用ev.checked直接获取当前选中状态，逻辑更简洁且不会出现状态不一致问题
• 可以通过else if扩展更多复选框项的处理逻辑

内容的提问来源于stack exchange，提问作者Maas goudswaard