是否有可能在Google Line Chart中混合(隐藏)一行?
我们有许多折线图,其中包含多个系列的近似数据值,我的老板要求我添加隐藏系列的方法(最好用鼠标点击线条或图例)。
我在下面的一个非常简单的测试用例中添加了一个select
事件监听器(只需在浏览器中打开它就可以了),但我不知道下一步该怎么做:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":-42.9},{"v":-42.4},{"v":-80},{"v":-35}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":-49.4},{"v":-39.9},{"v":-80},{"v":-32}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":-48.9},{"v":-48.6},{"v":-80},{"v":-32}]},
{"c":[{"v":"UTRA_1_UP"},{"v":-49.5},{"v":-49.4},{"v":-80},{"v":-35}]},
{"c":[{"v":"UTRA_2_UP"},{"v":-58.9},{"v":-58.9},{"v":-80},{"v":-38}]}],
"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"Row A","type":"number"},
{"p":{"role":"data"},"label":"Row B","type":"number"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"}]}};
function drawCharts() {
for (var csv in data) {
var x = new google.visualization.DataTable(data[csv]);
var options = {
title: csv,
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById(csv));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(x, options);
}
}
function selectHandler(e) {
alert('How to hide a row in the chart?');
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>