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

Question

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

Answer 1

您可以调用 showGraph 和 hideGraph 按钮事件中的方法。由于它们采用图形实例，因此您需要访问图表以通过访问 graphs 传递所需的图形实例。直接数组或调用 getGraphById 如果您为图表设置了 id，请检查图表的 hidden 属性(property)知道什么时候打电话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>