ClickMarker 在 XY Amcharts 中不起作用答案

【问题标题】：ClickMarker is not working in XY AmchartsClickMarker 在 XY Amcharts 中不起作用
【发布时间】：2018-10-24 02:01:09
【问题描述】：

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

我已经实现了它们，但是当我向这些图例添加事件侦听器时，该函数没有被触发。我不知道原因，谁能纠正我的错误。

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

jsfiddle.net/u371jyjs/3/

【问题讨论】：

标签： javascript graph legend amcharts

【解决方案1】：

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>

【讨论】：

你能帮我解决我发布的另一个问题吗，stackoverflow.com/questions/50323661/…
我有个小问题，当我点击一个和两个图例时如何隐藏数据
第二个问题 - 数据元素不与自定义图例标记相关联。您是否有理由使用自定义图例标记而不是内置标记？您无需编写自定义代码即可使内置标记起作用，而且看起来您所做的任何事情都需要数据数组而不是内置标记。
如果您想在单击时隐藏/删除自定义标记上的元素，您可以根据需要调整this knowledge base article 中的代码。它适用于串行图表，但概念与 XY 图表相同，但使用内置标记并相应地调整配置可能更容易。
是的，我需要显示一些不是标签的其他数据。作为一个原因，我需要自定义图例。