我在jsFiddle jsFiddle中有以下测试项目,它按预期运行,JSLint报告代码有效.
然后我将html复制并粘贴到记事本中的空白文本文件中并保存为randomfilename.html
当我单击html文件时,我看到文件选择器,我可以选择文件,但图表不会呈现.有什么想法吗？我尝试过IE,Chrome和Firefox,其中任何一个都没有图表.
谢谢
编辑:这是我现在在名为randomfilename.html的文本文件中
它不起作用
Chrome 21.0.1180.89 m 还是最新的firefox/IE对我来说？
<!DOCTYPE html>
<html>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="file" id="files" name="file" />
<div id="container" style="height: 500px; min-width: 500px"></div>
<div id="testString"></div>
<script>
var dataString = new Array (
[1341187200000,592.52],[1341273600000,599.41],[1341446400000,609.94],[1341532800000,605.88],[1341792000000,613.89],[1341878400000,608.21],
[1341964800000,604.43],[1342051200000,598.90],[1342137600000,604.97],[1342396800000,606.91],[1342483200000,606.94],[1342569600000,606.26],
[1342656000000,614.32],[1342742400000,604.30],[1343001600000,603.83]);
function handleFileSelect(evt)
{
var files = evt.target.files; // FileList object
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
reader.onload = (function(reader)
{
return function()
{
var contents = reader.result;
document.getElementById('testString').innerHTML=contents;
var gx;
gx=dataString;
renderChart(gx);
}
})(reader);
reader.readAsText(f);
}
}
function renderChart(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
};
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</html>
我想你忘了包含jQuery库.使用jsFiddle时,它允许您指定一个自动包含在HTML中的JS库(您实际上没有看到).从jsFiddle复制/粘贴HTML时,不会复制包含jQuery库的内容.尝试添加以下内容:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
在其他<script>标签的正上方(仅在您复制/粘贴的文本文件中...您不需要在jsFiddle中执行此操作,因为它会自动"完成").
这不会打破它,但你也错过了HTML中的一个<head>和<body>部分.我不确定HTML5是否可选,但你可能想要添加它们.即使<head></head>是空的,也应该包含它......并且当前的所有代码<html></html>都应该在嵌套的内部<body></body>.