使用 json 文件将实时数据添加到 highstock答案

【问题标题】：adding live data to highstock Using json file使用 json 文件将实时数据添加到 highstock
【发布时间】：2014-01-06 15:50:01
【问题描述】：

我正在尝试使用服务器上 json 文件中的实时数据更新 highcharts highstock 图表。

现在我有一个图表，它从一个 json 文件（我用 php 创建的它从我的 MySQL 数据库中请求数据）获取它的数据，如下所示：

<!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 文件中得到了一个图表。但是，如果有新数据可用，它当然不会更新（仅当我重新加载页面时）。

我想要做的是在加载此图表后，将实时数据添加到它变得可用。

类似于this example，但图表将使用来自我的网络服务器上的（第二个）实时更新 json 文件的数据进行更新，而不是随机数据。 json 文件将由 php 创建（这部分工作得很好）但我不知道如何将 json 文件中的数据添加到我现有的 highstock 图表中。

我还发现 this highcharts.com 上的这个例子，它或多或少做了我想做的事情，但我无法将“requestData”函数集成到我现有的图表中。

所以我想做的是使用第二个示例中的“requestData”函数和我已经拥有的高库存图表。我的第二个 json 文件（带有实时数据）看起来与第二个示例（时间戳、价格）相同：

[1389022968000,173.3]

谁能帮帮我？

【问题讨论】：

标签： json highcharts highstock live-update

【解决方案1】：

没关系，我自己想出来的......

这是我的解决方案：

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

    <title>OKCoin LTCCNY Price</title>

    <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    var chart; // global

    function requestData() {
        $.ajax({
            url: 'tickOkCoinLTCCNY.json', 
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 2; // shift if the series is longer than 20

                // add the point
                chart.series[0].addPoint(eval(point), true, shift);

                // call it again after one second
                setTimeout(requestData, 10000); 
            },
            cache: false
        });
    }


$(function() {
$.getJSON('../okcoin/json/lastTradesOkcoinLTCCNY.json', function(data) {


    // set the allowed units for data grouping
    var groupingUnits = [[
        'minute',                         // unit name
        [1,5,15,30]                             // allowed multiples
    ], [
        'hour',
        [1, 2, 3, 4, 6]
    ]];

    // create the chart
    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            events: {
                    load: requestData
                }


        },

        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
        },

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

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


        yAxis: [{
            title: {
                text: 'LTCCNY'
            },

            lineWidth: 2
        }],

        series: [{
            name: 'LTCCNY',
            data: data,
            dataGrouping: {
                units: groupingUnits
            }
        }]

      });
   });
});

    </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>

【讨论】：