我正在使用这个js小提琴http://jsfiddle.net/iansan5653/7EPjH/17/
我的问题是顶部的按钮。它们应在文本区域中显示信息。在我的浏览器中,按钮使页面空白。但是,可以在in控制台中执行相同的onclick代码。我究竟做错了什么?
为简洁起见,遗漏了一些代码
var abstractlog = "1 0 c\n 2 0 b\n 3 0 a\n 4 0 d\n 1 1 f\n 2 1 b\n 3 1 a\n 4 1 e\n 1 2 f\n 2 2 b\n 3 2 a\n 4 2 d";
var abstractargs = "-r ^(?<TYPE>),(?<TIME>),(?<trace>)\n 2 -m \\k<trace>" ;
var browserlog = "64.163.76.74, cache-page, 0\n 164.163.76.74, retrieve-page, 9\n 164.163.76.74, cache-image, 18\n 164.163.76.74, retrieve-image, 39\n 164.163.76.74, quit, 160 \n --\n 237.250.28.190, cache-page, 0\n 237.250.28.190, retrieve-page, 17\n 237.250.28.190, cache-image, 34\n 237.250.28.190, retrieve-image, 104 \n 237.250.28.190, quit, 274 \n --\n 130.78.242.94, cache-page, 0\n 130.78.242.94, retrieve-page, 9\n 130.78.242.94, cache-image, 118 \n 130.78.242.94, retrieve-image, 140 \n 130.78.242.94, quit, 162 \n --\n 177.176.181.25, cache-page, 0\n 177.176.181.25, retrieve-page, 17\n 177.176.181.25, cache-image, 136 \n 177.176.181.25, retrieve-image, 204 \n 177.176.181.25, quit, 272 \n --\n 195.88.181.89, cache-image, 0\n 195.88.181.89, retrieve-image, 27\n 195.88.181.89, quit, 54\n --\n 153.98.187.29, cache-image, 0\n 153.98.187.29, retrieve-image, 62\n 153.98.187.29, quit, 124";
var browserargs = "-r (?<ip>) .+:(?<DTIME>.+)\\] \"GET HTTP/1.1 /(?<TYPE>.+)\" -m \\k<ip>" ;
var connectionlog = "\"19.38.218.11 [31/May/2014:31200.0] \"GET HTTP/1.1 /test-bandwidth\"\n 19.38.218.11 [31/May/2014:31202.0] \"GET HTTP/1.1 /narrowband\"\n 19.38.218.11 [31/May/2014:31205.7] \"GET HTTP/1.1 /query\"\n 19.38.218.11 [31/May/2014:31208.9] \"GET HTTP/1.1 /query\"\n 19.38.218.11 [31/May/2014:31209.7] \"GET HTTP/1.1 /report-normal\"\n 95.39.21.28 [31/May/2014:31200.3] \"GET HTTP/1.1 /test-bandwidth\"\n 95.39.21.28 [31/May/2014:31202.3] \"GET HTTP/1.1 /narrowband\"\n 95.39.21.28 [31/May/2014:31206.0] \"GET HTTP/1.1 /query\"\n 95.39.21.28 [31/May/2014:31206.8] \"GET HTTP/1.1 /report-normal\"\n 210.82.199.247 [31/May/2014:31200.1] \"GET HTTP/1.1 /test-bandwidth\"\n 210.82.199.247 [31/May/2014:31200.8] \"GET HTTP/1.1 /broadband\"\n 210.82.199.247 [31/May/2014:31202.1] \"GET HTTP/1.1 /query\"\n 210.82.199.247 [31/May/2014:31208.3] \"GET HTTP/1.1 /query\"\n 210.82.199.247 [31/May/2014:31208.8] \"GET HTTP/1.1 /report-abnormal\"\n 130.78.242.94 [31/May/2014:31200.1] \"GET HTTP/1.1 /test-bandwidth\"\n 130.78.242.94 [31/May/2014:31200.7] \"GET HTTP/1.1 /broadband\"\n 130.78.242.94 [31/May/2014:31201.9] \"GET HTTP/1.1 /query\"\n 130.78.242.94 [31/May/2014:31208.0] \"GET HTTP/1.1 /query\"\n 130.78.242.94 [31/May/2014:31208.4] \"GET HTTP/1.1 /report-abnormal\"\n 38.151.1.182 [31/May/2014:31200.2] \"GET HTTP/1.1 /test-bandwidth\"\n 38.151.1.182 [31/May/2014:31200.8] \"GET HTTP/1.1 /broadband\"\n 38.151.1.182 [31/May/2014:31202.0] \"GET HTTP/1.1 /query\"\n 38.151.1.182 [31/May/2014:31203.3] \"GET HTTP/1.1 /query\"\n 38.151.1.182 [31/May/2014:31203.8] \"GET HTTP/1.1 /report-normal\"\n 37.161.90.108 [31/May/2014:31200.2] \"GET HTTP/1.1 /test-bandwidth\"\n 37.161.90.108 [31/May/2014:31200.9] \"GET HTTP/1.1 /broadband\"\n 37.161.90.108 [31/May/2014:31202.2] \"GET HTTP/1.1 /query\"\n 37.161.90.108 [31/May/2014:31203.6] \"GET HTTP/1.1 /query\"\n 37.161.90.108 [31/May/2014:31204.7] \"GET HTTP/1.1 /report-normal\"";
var connectionargs = "-r (?<ip>.+), (?<TYPE>.+), (?<DTIME>.+) -s ^--$";
var logstring;
var argstring;
function writeAbstractModel() {
logstring = abstractlog ;
argstring = abstractargs;K
}
function writeBrowserModel() {
logstring = browserlog ;
argstring = browserargs;
}
function writeConnectionModel() {
logstring = connectionlog ;
argstring = connectionargs;
}
function write() {
$("#logtext").val(logstring);
$("#args").val(argstring);
}
<button id="abstractform" onclick="writeAbstractModel(); write(); data = abc_model;">Abstract Example </button>
<button id="bandwithform" onclick="writeBrowserModel(); write(); data = test_bandwith_model;">Bandwith Example</button>
<button type="browserform" onclick="writeConnectionModel(); write(); data = browser_model;"> Browser Example</button>
首先,这是一个很酷的项目!
该代码的主要问题之一似乎与向HTML页面添加代码/脚本时如何google.load
使用document.write()调用有关。
但是,至少有一种方法可以使“单击按钮以显示可视化效果”这样的过程按预期工作:
尝试在JavaScript中添加常规的“文档准备就绪”部分,然后将其google.load
移入该部分,如下所示:
// prepare click event for "Draw Chart" button
$(document).ready(function() {
google.load('visualization', '1', {packages:['gauge'], callback: function () {
$('#draw_chart').click(function () {
chart();
});
}});
});
调整drawChart()
先前的调用并将其放置在内部$.getJSON()
函数中,如下所示:
$.getJSON(url,
function(data){
pressure = data.value.items[0].data[1].parameters.pressure.value;
temperature = data.value.items[0].data[1].parameters.temperature[0].value;
humidity = data.value.items[0].data[1].parameters.humidity.value;
// then call drawChart knowing that we have some sort of data
drawChart();
}
);
最后,更新HTML按钮ID,以便可以“激活”该按钮ID,以知道用户单击一次该怎么做,如下所示:
<button id="draw_chart">Draw Chart</button>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
var pressure;
var temperature;
var humidity;
function chart() {
var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=97c669df9c4795db96b39188000c1998&_render=json&lat=26.6403&lon=-81.8725';
$.getJSON(url,
function(data){
pressure = data.value.items[0].data[1].parameters.pressure.value;
temperature = data.value.items[0].data[1].parameters.temperature[0].value;
humidity = data.value.items[0].data[1].parameters.humidity.value;
// then call drawChart knowing that we have some sort of data
drawChart();
}
);
}
function drawChart() {
pressure = eval(pressure);
var barData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['C/Precip', pressure]
]);
var barOptions = {
width: 200,
height: 200,
redFrom: 28,
redTo: 29,
yellowFrom: 29,
yellowTo: 30,
greenFrom: 30,
greenTo: 31,
min: 28,
max: 31,
majorTicks: ["28","29","30","31"],
minorTicks: 10
};
var barChart = new google.visualization.Gauge(document.getElementById('barometer_div'));
barChart.draw(barData, barOptions);
temperature = eval(temperature);
var thermData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temp (F)', temperature]
]);
var thermOptions = {
width: 200,
height: 200,
redFrom: 80,
redTo: 120,
yellowFrom: 0,
yellowTo: 40,
yellowColor: '0099FF',
greenFrom: 40,
greenTo: 80,
min: 0,
max: 120,
majorTicks: ["0","10","20","30","40","50","60","70","80","90","100","110","120"],
minorTicks: 10
};
var thermChart = new google.visualization.Gauge(document.getElementById('thermometer_div'));
thermChart.draw(thermData, thermOptions);
humidity = eval(humidity);
var humidData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Humidity', humidity]
]);
var humidOptions = {
width: 200,
height: 200,
yellowFrom: 10,
yellowTo: 40,
greenFrom: 40,
greenTo: 70,
redColor: '0099FF',
redFrom: 70,
redTo: 100,
min: 10,
max: 100,
majorTicks: ["10","20","30","40","50","60","70","80","90","100"],
minorTicks: 10
};
var humidChart = new google.visualization.Gauge(document.getElementById('humidostat_div'));
humidChart.draw(humidData, humidOptions);
}
// prepare click event for "Draw Chart" button
$(document).ready(function() {
google.load('visualization', '1', {packages:['gauge'], callback: function () {
$('#draw_chart').click(function () {
chart();
});
}});
});
</script>
</head>
<body>
<button id="draw_chart">Draw Chart</button>
<div id='barometer_div'></div>
<div id='thermometer_div'></div>
<div id='humidostat_div'></div>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句