0

この例に従って 、サーバーからのデータを使用してハイチャートをロードしています (ここではテスト目的でファイルを使用しています)。サーバーからデータをロードするだけでなく、全体をロードできるようにしたいと考えています。私が理解しているように、この単純なチャートの例は、チャート全体が json オブジェクトであることを示しているので、このように json コードを作成し、それをオブジェクトにロードしてチャートに渡すとうまくいくと思いました。それをしようとして、次のコードを思いつきました。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.getJSON('data.json', function(data) {
                    var chart = new Highcharts.Chart(data);
                });
            }); 
        </script>
    </head>
    <body>
        <div id="container" style="width:100%; height:100%;"></div>    
    </body>
</html>

そして、これは私の data.json ファイルです:

{
    chart: {
        type: 'bar',
        renderTo: 'container'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [
        {
            name: 'Jane',
            data: [1, 0, 4]
        }, 
        {
            name: 'John',
            data: [5, 7, 3]
        }
    ],
}

エラーは発生していませんが、グラフは読み込まれません。助けていただければ幸いです。

4

2 に答える 2

0

dataオブジェクトには、チャートを実際にレンダリングするために必要なrenderToのプロパティがありません。これも問題になる可能性があります。chart

document.bodyたとえば、次のように設定すると、チャートが適切にレンダリングされます。

Fiddle

于 2013-09-15T20:59:44.103 に答える