AmCharts：隐藏/显示图表的自定义按钮

Question

我想拥有自己的按钮来隐藏/显示线性图上的线条。 图例很好，但我想要自己的 HTML/CSS。 有没有办法做到这一点？ 附加隐藏/显示事件可能吗？ 谢谢

Answer 1

您可以从按钮的事件中调用showGraph 和hideGraph 方法。由于他们采用图表实例，因此您需要通过直接访问graphs 数组或调用getGraphById（如果您为图表设置ID）来访问图表以传递所需的图表实例，然后检查图表的hidden 属性知道何时调用 showGraph 或 hideGraph

假设您的按钮标记中有图形索引，例如 <button data-graph-index="0">Toggle first graph</button>，您可以执行以下操作：

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

这是一个演示：

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>