Question

我试图弄清楚是否有可能在php和mysql的帮助下从数据库中动态获取json数据，并且可以使用过于动态自动更新的highcharts进行绘制？任何帮助，将不胜感激。

按照我尝试过的代码并且工作不正常，并希望在网站上实现10行。

    <HTML>
<HEAD>
<TITLE>highchart example</TITLE>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">




var chart;

 function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is 
                                                 // longer than 2
            // add the point
            chart.series[0].addPoint(point, true, shift);

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

    });

}

 function requestData1() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series2 = chart.series[1],
                shift = series2.data.length > 20; // shift if the series is 
                                                 // longer than 20

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

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

    });
}


$(function () {
    $(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData               
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis:

        {
        minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: '',
                margin: 80
            }
        },

        series: [
        {
            name: 'Random data',
            data: []
        },
        {
            name: ' hahaha',
            data: []
            }
        ],
    });        
});
});
</script>
</HEAD>
<BODY>
    <div id="container"
        style="min-width: 728px; height: 400px; margin: 0 auto"></div>
</BODY>
</HTML>



         *** the live-server-data.php is as followed:
    <?php
// Set the JSON header
header("Content-type: text/json");

// The x value is the current JavaScript time, which is the Unix time multiplied 
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(48,52);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>

Answer 1

您可以尝试使用

var options = {
        chart: {
            renderTo: 'chart',
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Impression/Click Overview',
            x: -20
        },
        xAxis: {
            categories: [{}]
        },
        tooltip: {
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';

                $.each(this.points, function(i, point) {
                    s += '<br/>'+point.series.name+': '+point.y;
                });

                return s;
            },
            shared: true
        },
        series: [{},{}]
    };

    $.ajax({
        url: "json.php",
        data: 'show=impression',
        type:'post',
        dataType: "json",
        success: function(data){
            options.xAxis.categories = data.categories;
            options.series[0].name = 'Impression';
            options.series[0].data = data.impression;
            options.series[1].name = 'Click';
            options.series[1].data = data.clicks;
            var chart = new Highcharts.Chart(options);          
        }
    });

Answer 2

highcharts网站上有一些关于使用动态数据的有用文章。这可能是最好的起点。

http://www.highcharts.com/docs/working-with-data/preprocessing-live-data

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database

尝试一下，如果你遇到麻烦，请回到这里，提出一个更具体的问题来展示你的尝试。就目前而言，你的问题太宽泛了，可能会被关闭。

更新数据的ajax请求类似于：

function requestData() {
$.ajax({
    url: 'live-server-data.php',
    success: function(point) {
        var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is                                                  // longer than 20
        // add the point
        chart.series[0].addPoint(point, true, shift);

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

}

带有json数据的动态高图

2 个答案: