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 に答える