JavaScript に関する質問があります - Google チャートが関係していますが。
ブラウザーですぐに試すことができる簡単なテスト ケースを用意しました。
JSFiddle を準備できませんでした。何らかの理由でコードが実行されませんでした。
私の問題は、Web ページに複数のグラフがあり、それぞれに「選択」イベント リスナーを登録することです。リスナーの内部では、どのチャートが正確にクリック (選択) されたかを (非常に自然に) 確認する必要があります。
以下の問題のあるコードは、Web ページの最後のチャートのタイトルを常に出力します。
GSM_1800_EDGE_EMAC_HP_H下のスクリーンショットで確認できますGSM_1800_EDGE_EMAC_HP_M。
私はさまざまなアプローチ (クロージャ?) を試しましたが、簡潔にするためにここにはリストしません。
これが私のコードです。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);
});