选择数据集时触发更改 [Amcharts Multiple Data Sets chart] [英] Trigger change on selecting dataset [Amcharts Multiple Data Sets chart]

问题描述

是否可以在他们提供的 amcharts 多数据集图表的 select 元素上触发更改"?

is it possible to trigger a 'change' on the select element of the amcharts multiple data set chart that they have provided.?

$(".amChartsDataSetSelector").find("select").val("2").trigger("change");

这是我试过的代码，它的作用基本上是将选择选项更改为我选择的选项，但它不会相应地更改图表.

This is the code i tried,what it does basically is change the select option to the one i have selected ,but it doesn't change the chart accordingly.

此方法是否有任何其他替代方法?

这是我的小提琴:

这是 amcharts 图表的原始链接.

推荐答案

jQuery .trigger( 仅在使用 jQuery .on 函数绑定事件时有效 (或任何事件绑定函数).下面是一个简单的例子，向您展示发生了什么.

The jQuery .trigger( works only when events are bound using jQuery .on function (or any event binding function). Below is a simple example to show you what was happening.

跳转到下面的#Solution 跳过这个演示.

Jump to #Solution below to skip this demo.

$(function() {
  var el = document.getElementById('checkEvent');
  if (el.addEventListener) {
    el.addEventListener("change", checkEvent, false);
  } else {
    el.attachEvent('change', checkEvent);
  }

  function checkEvent() {
    alert('Event Check');
  }

  $('#changeDDValue').click(function() {
    $('#checkEvent').val("2").change();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="checkEvent" style="width: 180px;">
  <option value="0">first data set</option>
  <option value="1">second data set</option>
  <option value="2">third data set</option>
  <option value="3">fourth data set</option>
</select>
<button id="changeDDValue">Change DataSet</button>

添加按钮 #change 以设置不同的数据集，如下所示，

Added a button #change to set a different dataset like below,

$('#change').click(function () {
    var selectEl = $(".amChartsDataSetSelector").find("select").val("2").get(0);
    fireEvent.call(selectEl, 'change');
});

然后使用下面的fireEvent函数来触发change事件而不是trigger('change'),

And then use fireEvent function below to trigger the change event instead of trigger('change'),

//http://stackoverflow.com/a/2490876/297641
function fireEvent(eventName) {
    var event; // The custom event that will be created

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    }

    event.eventName = eventName;

    if (document.createEvent) {
        this.dispatchEvent(event);
    } else {
        this.fireEvent("on" + event.eventType, event);
    }
}

修复了 jsFiddle

这篇关于选择数据集时触发更改 [Amcharts Multiple Data Sets chart]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！