ClickMarker не работает в XY Amcharts - PullRequest
Новая
       21

ClickMarker не работает в XY Amcharts

0 голосов
/ 14 мая 2018

У меня есть требование, где мне нужно использовать пользовательские легенды в XY Amcharts.

Я реализовал их, но когда я добавил слушателей событий к этим легендам, функция не сработала. Я не знаю причину, может кто-нибудь исправить меня, что я сделал ошибку.

Вы можете проверить следующую ссылку для вывода: 

jsfiddle.net/u371jyjs/3/

1 Ответ

0 голосов
/ 14 мая 2018

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>
...