我在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 中执行此操作，因为它会自动“完成”)。
并不是说这会破坏它，但你还缺少一个 <head>和<body> HTML 中的部分。我不确定 HTML5 是否将此选项设为可选，但您可能想要添加这些。即使<head></head>是空的，应该包含它......以及当前 <html></html> 内的所有代码应该位于嵌套 <body></body> 内部.
关于JavaScript 无法运行，但可以在 jsFiddle 中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12395812/