Question

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

Answer 1

我认为你忘了包含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>内。

JavaScript不会运行但可以在jsFiddle中运行

1 个答案: