带有事件监听器的多个图表 - 如何查找哪个图表触发了监听器？附上测试用例和屏幕截图

时间：2013-06-20 11:02:34

标签： javascript javascript-events closures google-visualization

我有一个JavaScript问题 - 即使涉及Google图表。

我准备了一个简单的测试用例，您可以立即在浏览器中尝试。

我无法准备一个JSFiddle，它出于某种原因没有运行我的代码。

我的问题是：我的网页上有多个图表，每个图表都注册a "select" event listener。在听众内部，我（非常自然地）需要看到，哪个图表完全被点击（选中）。

下面我有问题的代码总是在网页上打印最后一个图表的标题。

您可以在下面的屏幕截图中看到它：我点击了GSM_1800_EDGE_EMAC_HP_H图表，但警告显示它是GSM_1800_EDGE_EMAC_HP_M：

enter image description here

我尝试过不同的方法（封闭？），但为了简洁起见，不在此处列出。

这是我的代码，请在开头忽略巨大的var data = ...赋值，其余代码非常简单：

<!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 = {"GSM_1800_EDGE_EMAC_HP_L":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.673198},{"v":1.703763},{"v":1.816869},{"v":1.850355},{"v":1.888287},{"v":2.072179},{"v":2.208197},{"v":2.040064},{"v":1.785052},{"v":1.862001},{"v":2.018309},{"v":1.713204},{"v":1.891804},{"v":2.215505},{"v":1.852155},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-55.52737},{"v":-54.60983},{"v":-52.95285},{"v":-57.21094},{"v":-55.08899},{"v":-52.80658},{"v":-54.45917},{"v":-54.47009},{"v":-55.10355},{"v":-53.616},{"v":-52.98431},{"v":-54.99429},{"v":-52.11819},{"v":-54.55518},{"v":-56.68314},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":21.76066},{"v":47.62163},{"v":21.30866},{"v":42.55275},{"v":26.76497},{"v":34.12614},{"v":18.49979},{"v":29.44469},{"v":22.63238},{"v":34.02929},{"v":38.48473},{"v":28.63755},{"v":27.99183},{"v":14.27035},{"v":11.30005},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":26.05695},{"v":26.26254},{"v":26.23032},{"v":26.21082},{"v":26.21725},{"v":26.19885},{"v":26.21213},{"v":26.19904},{"v":26.19995},{"v":26.20013},{"v":26.21317},{"v":26.20001},{"v":26.21893},{"v":26.18625},{"v":26.19437},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","type":"number"},{"p":{"role":"interval"},"label":"LSL","type":"number"},{"p":{"role":"interval"},"label":"USL","type":"number"}]},"GSM_1800_EDGE_EMAC_HP_H":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.793361},{"v":1.563394},{"v":1.737285},{"v":1.662266},{"v":2.13238},{"v":1.74495},{"v":1.730418},{"v":1.723552},{"v":1.790512},{"v":1.846552},{"v":1.807153},{"v":1.859796},{"v":1.908171},{"v":1.846123},{"v":1.750672},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-57.54144},{"v":-58.77484},{"v":-57.19012},{"v":-53.42612},{"v":-57.18826},{"v":-55.3111},{"v":-54.42715},{"v":-55.91037},{"v":-54.51541},{"v":-55.95123},{"v":-56.42453},{"v":-51.98267},{"v":-52.10809},{"v":-55.15536},{"v":-56.74002},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":28.70212},{"v":55.40252},{"v":28.86355},{"v":49.36506},{"v":35.61129},{"v":40.09902},{"v":27.18469},{"v":38.42016},{"v":29.31555},{"v":40.80931},{"v":46.03962},{"v":35.54672},{"v":38.12959},{"v":23.66553},{"v":18.53208},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":25.99338},{"v":26.19803},{"v":26.17307},{"v":26.15582},{"v":26.1507},{"v":26.12967},{"v":26.14883},{"v":26.13281},{"v":26.13333},{"v":26.12888},{"v":26.15344},{"v":26.14447},{"v":26.15091},{"v":26.11832},{"v":26.125},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","type":"number"},{"p":{"role":"interval"},"label":"LSL","type":"number"},{"p":{"role":"interval"},"label":"USL","type":"number"}]},"GSM_1800_EDGE_EMAC_HP_M":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.561868},{"v":1.73105},{"v":1.797044},{"v":1.76599},{"v":2.084661},{"v":1.728261},{"v":1.623273},{"v":1.713252},{"v":1.721168},{"v":1.67675},{"v":1.816809},{"v":1.473725},{"v":2.130508},{"v":1.753807},{"v":1.635349},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-55.58054},{"v":-54.61621},{"v":-59.66745},{"v":-54.58603},{"v":-56.94119},{"v":-57.44168},{"v":-55.79709},{"v":-56.0144},{"v":-53.07523},{"v":-58.99078},{"v":-54.67191},{"v":-58.43228},{"v":-54.7934},{"v":-53.57614},{"v":-56.65137},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":32.35042},{"v":61.47226},{"v":33.02842},{"v":54.65994},{"v":41.48732},{"v":45.49076},{"v":31.31727},{"v":46.07191},{"v":34.09386},{"v":45.36162},{"v":54.17566},{"v":40.87389},{"v":44.0379},{"v":32.18899},{"v":28.21783},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":26.08215},{"v":26.27185},{"v":26.24777},{"v":26.23657},{"v":26.23239},{"v":26.21872},{"v":26.23657},{"v":26.21646},{"v":26.21149},{"v":26.21417},{"v":26.23041},{"v":26.21982},{"v":26.23303},{"v":26.20111},{"v":26.2052},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","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,
                                chartArea: {width:"60%"}
                        };

                        var chart = new google.visualization.LineChart(document.getElementById(csv));
                        google.visualization.events.addListener(chart, 'select', function () {
                                alert(csv); // XXX prints wrong title
                        });

                        chart.draw(x, options);
                }
        }

        $(function() {
                google.setOnLoadCallback(drawCharts);
        });

</script>
</style>
</head>
<body>

<div id="GSM_1800_EDGE_EMAC_HP_H"></div>
<div id="GSM_1800_EDGE_EMAC_HP_L"></div>
<div id="GSM_1800_EDGE_EMAC_HP_M"></div>

</body>
</html>

更新：这也是我尝试过的，但结果相同：

google.visualization.events.addListener(chart, 'select', function () {
        var tmp = 'XXX ' + csv;
        var blah = function() {alert(tmp);}
        blah();
});

更新2：我也试过了：

google.visualization.events.addListener(chart, 'select', function() {
    (function(c) {
        alert(c);
    })(csv);
});

1 个答案:

答案 0 :(得分：5)

据我所知，你几乎与Update 2在一起。

尝试：

google.visualization.events.addListener(chart, 'select', (function(c) {
    return function() {
        alert(c);
    };
})(csv));
相关问题
最新问题