AmCharts：自定義按鈕隱藏/顯示圖形

Question

我想有我自己的按鈕來隱藏/顯示線性圖形上的線條。 傳說很好，但我想要我自己的HTML/CSS。 有沒有辦法做到這一點？ 附加hide/show事件可能嗎？ 謝謝

Answer 1

您可以從按鈕的事件中調用showGraph和hideGraph方法。由於他們採用圖形實例，因此如果您爲圖形設置了ID，則可以直接訪問graphs陣列，或者調用getGraphById，然後查看圖形的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": { 
 
    \t "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>