0

我在 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>
4

1 回答 1

5

我认为您忘记包含 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>and<body>部分。我不确定 HTML5 是否将其设为可选，但您可能想要添加这些。即使<head></head>是空的，它也应该被包含在内......并且您在 current 中的所有代码<html></html>都应该在嵌套的<body></body>.

于 2012-09-12T20:38:06.407 回答