AmCharts: custom button to hide/show graph

问题

I would like to have my own buttons to hide/show lines on a linear graph. The legend is fine, but I want my own HTML/CSS. Is there a way to do this? Attaching the hide/show event maybe? Thank you

回答1:

You can call the showGraph and hideGraph methods from your buttons' events. Since they take the graph instance, you'll want to have access to the chart to pass in the desired graph instance either by accessing the graphs array directly or calling getGraphById if you set ids for your graphs, then check the graph's hidden property to know when to call showGraph or hideGraph

Assuming you have the graph index in your button's markup like <button data-graph-index="0">Toggle first graph</button>, you could do something like this:

button.addEventListener('click', function(e) {
  var graph = chart.graphs[e.currentTarget.dataset.graphIndex];
  if (graph.hidden) {
    chart.showGraph(graph);
  }
  else {
    chart.hideGraph(graph);
  }
});

Here's a demo:

var chart;
Array.prototype.forEach.call(
  document.querySelectorAll('.toggle-graph'),
  function (button) {
    button.addEventListener('click', function(e) {
      var graph = chart.graphs[e.currentTarget.dataset.graphIndex];
      if (graph.hidden) {
        chart.showGraph(graph);
      }
      else {
        chart.hideGraph(graph);
      }
    });
  }
);

chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": [{
        "year": 1994,
        "cars": 1587,
        "motorcycles": 650,
        "bicycles": 121
    }, {
        "year": 1995,
        "cars": 1567,
        "motorcycles": 683,
        "bicycles": 146
    }, {
        "year": 1996,
        "cars": 1617,
        "motorcycles": 691,
        "bicycles": 138
    }, {
        "year": 1997,
        "cars": 1630,
        "motorcycles": 642,
        "bicycles": 127
    }, {
        "year": 1998,
        "cars": 1660,
        "motorcycles": 699,
        "bicycles": 105
    }, {
        "year": 1999,
        "cars": 1683,
        "motorcycles": 721,
        "bicycles": 109
    }, {
        "year": 2000,
        "cars": 1691,
        "motorcycles": 737,
        "bicycles": 112
    }, {
        "year": 2001,
        "cars": 1298,
        "motorcycles": 680,
        "bicycles": 101
    }, {
        "year": 2002,
        "cars": 1275,
        "motorcycles": 664,
        "bicycles": 97
    }, {
        "year": 2003,
        "cars": 1246,
        "motorcycles": 648,
        "bicycles": 93
    }, {
        "year": 2004,
        "cars": 1318,
        "motorcycles": 697,
        "bicycles": 111
    }, {
        "year": 2005,
        "cars": 1213,
        "motorcycles": 633,
        "bicycles": 87
    }, {
        "year": 2006,
        "cars": 1199,
        "motorcycles": 621,
        "bicycles": 79
    }, {
        "year": 2007,
        "cars": 1110,
        "motorcycles": 210,
        "bicycles": 81
    }, {
        "year": 2008,
        "cars": 1165,
        "motorcycles": 232,
        "bicycles": 75
    }, {
        "year": 2009,
        "cars": 1145,
        "motorcycles": 219,
        "bicycles": 88
    }, {
        "year": 2010,
        "cars": 1163,
        "motorcycles": 201,
        "bicycles": 82
    }, {
        "year": 2011,
        "cars": 1180,
        "motorcycles": 285,
        "bicycles": 87
    }, {
        "year": 2012,
        "cars": 1159,
        "motorcycles": 277,
        "bicycles": 71
    }],
    "valueAxes": [{
        "gridAlpha": 0.07,
        "position": "left",
        "title": "Traffic incidents"
    }],
    "graphs": [{
        "title": "Cars",
        "valueField": "cars"
    }, {
        "title": "Motorcycles",
        "valueField": "motorcycles"
    }, {
        "title": "Bicycles",
        "valueField": "bicycles"
    }],
    "chartCursor": {
        "cursorAlpha": 0
    },
    "categoryField": "year",
    "categoryAxis": {
        "startOnAxis": true,
        "axisColor": "#DADADA",
        "gridAlpha": 0.07,
        "title": "Year"
    },
    "export": {
    	"enabled": true
     }
});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<button class="toggle-graph" data-graph-index="0">Toggle first graph</button>
<button class="toggle-graph" data-graph-index="1">Toggle second graph</button>
<button class="toggle-graph" data-graph-index="1">Toggle third graph</button>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

来源：https://stackoverflow.com/questions/43909745/amcharts-custom-button-to-hide-show-graph

标签

amcharts