AmCharts:用于隐藏/显示图形的自定义按钮 [英] AmCharts: custom button to hide/show graph

问题描述

我想有自己的按钮来隐藏/显示线性图上的线.传说很好，但是我想要我自己的HTML/CSS.有没有办法做到这一点?可能附加了隐藏/显示事件?谢谢

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

推荐答案

您可以调用 showGraph 和 hideGraph 方法.由于它们采用了图实例，因此您将希望可以通过直接访问 graphs 数组或调用

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

假设您的按钮标记中包含图形索引，例如< button data-graph-index ="0">切换第一个图形</button> ，您可以执行以下操作:

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);
  }
});

这是一个演示:

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>

这篇关于AmCharts:用于隐藏/显示图形的自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！