堆栈内存溢出
  简体   繁体   English

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

[英]Multiple charts with event listeners - how to find which chart has fired the listener? Test case and screenshot are attached

 原文  2013-06-20 11:02:33  1   1    javascript/ google-visualization/ closures/ dom-events

问题描述

I have a JavaScript question - even though Google Charts are involved.我有一个 JavaScript 问题 - 即使涉及到谷歌图表。

I have prepared a simple test case, which you can try in a browser instantly.我准备了一个简单的测试用例，您可以立即在浏览器中试用。

I couldn't prepare a JSFiddle, it didn't run my code for some reason.我无法准备 JSFiddle，它由于某种原因没有运行我的代码。

My problem is: I have multiple charts at my web page and for each of them I register a "select" event listener .我的问题是：我的网页上有多个图表，我为每个图表注册了一个“选择”事件侦听器。 Inside of the listener I have (a very natural) need to see, which chart exactly has been clicked (selected).在侦听器内部，我（非常自然地）需要查看已单击（选择）哪个图表。

My problematic code below always prints the title of the last chart at the web page.我下面有问题的代码总是在网页上打印最后一个图表的标题。

You can see it in the screenshot below: I click the GSM_1800_EDGE_EMAC_HP_H chart, but the alert says it is GSM_1800_EDGE_EMAC_HP_M :您可以在下面的屏幕截图中看到它：我单击了GSM_1800_EDGE_EMAC_HP_H图表，但警报显示它是GSM_1800_EDGE_EMAC_HP_M ：

在此处输入图片说明

I've tried different approaches (closure?), but not listing them here for brevity.我尝试了不同的方法（关闭？），但为了简洁起见，我没有在这里列出它们。

Here is my code, please ignore the huge var data = ... assignment at the beginning, the rest of the code is really simple:这是我的代码，请忽略开头巨大的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>

UPDATE: This is what I tried too, but with same wrong result:更新：这也是我尝试过的，但结果同样错误：

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

UPDATE 2: Also I've tried this:更新2：我也试过这个：

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

1 个解决方案

解决方案1
 5 已采纳  2013-06-20 22:04:36

As far as I can tell, you are very nearly there with Update 2.据我所知，更新 2 已经快到了。

Try :尝试：

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何找出触发了哪个事件监听器 - How to find out which event listener has fired 如何查找在集合上触发了哪个事件 - How to find which event has fired on the collection 如何避免附加多个事件侦听器？ - How to avoid multiple event listeners from being attached? Javascript DOM，如何确定触发了哪个事件侦听器？ - Javascript DOM, How to figure out which event listener fired? 检查组件是否附加了事件侦听器 - Check if a component has an event listener attached to it 如何测试在触发事件后是否调用了函数？ - How to test that a function has been called after an event was fired? 如何使用 JavaScript 查找所有具有事件侦听器的元素？ - How to use JavaScript to find all elements which have event listeners? 附加到一键事件侦听器的多个元素 - multiple elements attached to one click event listener jQuery - 如何在事件触发后暂时禁用onclick事件侦听器？ - jQuery - How can I temporarily disable the onclick event listener after the event has been fired? 如何找到以编程方式触发的 Javascript 事件的起源？ - How can I find the origin of a Javascript event which was fired programmatically?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM