javascript - ClickMarker在XY Amcharts中不起作用

我有一个需要在XY Amcharts中使用customlegends的要求。

我已经实现了它们，但是当我向这些图例添加事件侦听器时，不会触发该函数。我不知道原因，任何人都可以纠正我的错误。

您可以检查以下链接的输出：

jsfiddle.net/u371jyjs/3/

最佳答案

clickMarker是图例特定的事件，而不是顶级图表事件。将其侦听器放入图例对象中：

legend: {
  // ...
  listeners: [{
    "event": "clickMarker",
    "method": function(event) {
      // toggle the marker state
      event.dataItem.hidden = !event.dataItem.hidden;
      event.chart.validateNow();
    }
  }]
}

演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "xy",
  "path": "https://www.amcharts.com/lib/3/",
  "theme": "light",
  "dataProvider": [{
    "y": 10,
    "x": 2,
    "value": 59,
    "y2": 5,
    "x2": 3,
    "value2": 44,
    "label": "Hello",
    "category": "0",
    "column-1": 32
  }, {
    "y": 5,
    "x": 8,
    "value": 50,
    "y2": 15,
    "x2": 8,
    "value2": 12,
    "label": "Hi",
    "category": "1000",
    "column-1": 14
  }, {
    "y": 10,
    "x": 8,
    "value": 19,
    "y2": 4,
    "x2": 6,
    "value2": 35,
    "label": "Yo"
  }, {
    "y": 6,
    "x": 5,
    "value": 65,
    "y2": 5,
    "x2": 6,
    "value2": 168,
    "label": "Howdy"
  }, {
    "y": 15,
    "x": 4,
    "value": 92,
    "y2": 13,
    "x2": 8,
    "value2": 102,
    "label": "Hi there"
  }, {
    "y": 13,
    "x": 1,
    "value": 8,
    "y2": 2,
    "x2": 0,
    "value2": 41,
    "label": "Morning"
  }, {
    "y": 1,
    "x": 6,
    "value": 35,
    "y2": 0,
    "x2": 3,
    "value2": 16,
    "label": "Afternoon"
  }],
  "valueAxes": [{
    "position": "bottom",
    "axisAlpha": 0,

    "integersOnly": true,
    //"labelRotation": 45,
    "labelFunction": function(value) {

      // define categories
      var cats = [
        "Nick",
        "Sarah",
        "Kevin",
        "Dominick",
        "Christy",
        "Kate",
        "Julian",
        "Anita",
        "Mike",
        "Kyle",
        "Tyrese"
      ];
      return cats[value];
    }
  }, {
    "axisAlpha": 0,
    "position": "left"
  }],
  "startDuration": 1.5,
  "graphs": [{
    "balloonText": "[[label]]",
    "bullet": "circle",
    "bulletBorderAlpha": 0.2,
    "bulletAlpha": 0.8,
    "lineAlpha": 0,
    "fillAlphas": 0,
    "valueField": "value",
    "xField": "x",
    "yField": "y",
    "maxBulletSize": 100
  }, {
    "balloonText": "[[label]]",
    "bullet": "diamond",
    "bulletBorderAlpha": 0.2,
    "bulletAlpha": 0.8,
    "lineAlpha": 0,
    "fillAlphas": 0,
    "valueField": "value2",
    "xField": "x2",
    "yField": "y2",
    "maxBulletSize": 100
  }],
  "legend": {
    "switchable": true,
    "textClickEnabled": true,
    "data": [{
      title: "One",
      color: "#3366CC",
      hidden: true
    }, {
      title: "Two",
      color: "#FFCC33"
    }],
    "listeners": [{
      "event": "clickMarker",
      "method": function(event) {
        event.dataItem.hidden = !event.dataItem.hidden;
        event.chart.validateNow()
      }
    }]
  }
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="clicked">
</div>