个人中心
gpt4 book ai didi

javascript - 带有 json 数据的动态图表

转载 作者：行者123 更新时间：2023-11-29 21:59:50 25 4
gpt4 key购买 nike

我想弄清楚是否有可能在 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);
?>

最佳答案

你可以试试

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);          
        }
    });

关于javascript - 带有 json 数据的动态图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24444001/

25 4 0
文章推荐： android - 自恢复出厂设置 android 以来的时间
文章推荐： mysql - 实现 Mysql 连接。如何获得同一行的结果？
文章推荐： android - 和引擎扩展错误
文章推荐： mysql - 如何使用非root账户登录MySQL命令行客户端？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com