0

サーバー上のjsonファイルからのライブデータでhighcharts highstockチャートを更新しようとしています。

これで、json ファイル (MySQL データベースからデータを要求する php で作成したもの) からデータを取得するチャートができました。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>OKcoin Price LTCCNY</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
$(function() {
$.getJSON('json/lastTradesOkcoinLTCCNY.json', function(data) {

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    // create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'OkCoin Price LTCCNY'
        },

        rangeSelector: {
            buttons: [{
                type: 'hour',
                count: 1,
                text: '1h'
            }, {
                type: 'hour',
                count: 6,
                text: '6h'
            }, {
                type: 'hour',
                count: 12,
                text: '12h'
            }, {
                type: 'hour',
                count: 24,
                text: '24h'
            }, {
                type: 'day',
                count: 3,
                text: '3d'
            }, {
                type: 'day',
                count: 7,
                text: '7d'
            }, {
                type: 'all',
                text: 'All'
            }],             
            selected: 2
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                enabled: true,
                text: 'Time',
                style: {
                fontWeight: 'normal'
                }
            }
        },


        yAxis: [{
            title: {
                text: 'Price LTCCNY'
            },
            gridLineWidth: 1,
            minorTickInterval: 'auto',
            minorTickColor: '#FEFEFE',
            labels: {
                align: 'right'
            }               
        }],

        plotOptions: {
            series: {
                lineWidth: 1
            }
        },

    tooltip: {
        valueDecimals: 5,
        valuePrefix: '$ '
    },  

        series : [{
            name : 'LTCCNY Price',
            data : data,
            dataGrouping : {
                units : [
                    ['minute',
                        [1, 5, 10, 15, 30]
                    ], ['hour', // unit name
                        [1] 
                    ]
                ]
            }
        }]
    });

});
});

    </script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>

これまでのところ問題はありません。json ファイルからグラフを取得します。ただし、もちろん、新しいデータが利用可能になった場合は更新されません (ページをリロードした場合のみ)。

私がやりたいことは、このチャートをロードした後、ライブデータが利用可能になったときに追加することです。

この例のようなものですが、ランダムなデータの代わりに、ウェブサーバー上の (2 番目の) ライブ更新 json ファイルからのデータでグラフが更新されます。json ファイルは php によって作成されます (この部分は正常に動作しています)。しかし、json ファイルのデータを既存のハイストック チャートに追加する方法がわかりません。

また、highcharts.com でこの例を見つけまし た。多かれ少なかれ、私がやろうとしていることは実行されますが、「requestData」関数を既存のチャートに統合することはできません。

したがって、私がやりたいことは、2 番目の例の 'requestData' 関数を、私が既に持っている高株価チャートで使用することです。私の 2 番目の json ファイル (ライブ データを含む) は、2 番目の例 (タイムスタンプ、価格) と同じように見えます。

[1389022968000,173.3]

誰かが私を少し助けることができますか？

4

1 に答える 1