Question

我正在尝试使用Google Line Chart创建 AJAX 。

我想设置刷新数据的间隔，我希望每次页面调整后都会绘制图表。

所以，我所做的是 -

的index.html -

<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <!-- <div id="piechart"> -->
          <div id="chart_div" style="width: 100%; height: 100%;">
            <!-- Chart goes here -->
          </div>
        </div>
      </div>
    </div>
  </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript" src="js/chart.js"> </script>
</html>

JS / chart.js之 -

google.load('visualization', '1.1', {packages: ['line', 'corechart']});


function get_ajax_data_for_total_user()
{
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time');
    data.addColumn('number', "Total Users");

    var jsonData = $.ajax({
                              url: "ajax.php",
                              dataType: "json",
                              async: false
                            }).responseText;
    var temp_AJAX_data=[];
    $.each($.parseJSON(jsonData), function(index, element)
    {
        var time_year=0,time_month=0,time_day=0,time_hour=0,time_min=0,time_sec=0,total_user_no=0;
        //console.log(index+" Start");
        $.each(element,function(key,value)
        {
            if(key.localeCompare('time_year')==0)
            {
                time_year=value;
            }
            else if(key.localeCompare('time_month')==0)
            {
                time_month=value;
            }
            else if(key.localeCompare('time_day')==0)
            {
                time_day=value;
            }
            else if(key.localeCompare('time_hour')==0)
            {
                time_hour=value;
            }
            else if(key.localeCompare('time_min')==0)
            {
                time_min=value;
            }
            else if(key.localeCompare('time_sec')==0)
            {
                time_sec=value;
            }
            else if(key.localeCompare('total_user_no')==0)
            {
                total_user_no=value;
            }
        });
        temp_AJAX_data.push([new Date(time_year, time_month,time_day,time_hour,time_min,time_sec),  total_user_no]);
    });

    //console.log(temp_AJAX_data);
    data.addRows(temp_AJAX_data);

    return data;
}

function drawChart_totalUser(div_id)
{
    var chartDiv = document.getElementById(div_id);

    var Options =
    {
        chart:
        {
            title: 'No of Users in Different Time'
        },
        width: '100%',
        height: '100%',
        series:
        {
            // Gives each series an axis name that matches the Y-axis below.
            0: {axis: 'Temps'},
            1: {axis: 'Daylight'}
        },
        axes:
        {
            // Adds labels to each axis; they don't have to match the axis names.
            y:
            {
                Temps: {label: 'Total Users'}
            }
        }/*,
        animation:
        {
            duration: 1000,
            easing: 'out',
        }*/
    };

    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(get_ajax_data_for_total_user(), Options);
}

$(function()
{
    if($("#chart_div").length != 0)
    {
      drawChart_totalUser('chart_div');
    }
});

$( window ).resize(function()
{
    if($("#chart_div").length != 0)
    {
      drawChart_totalUser('chart_div');
    }
});

setInterval(function()
{
    if($("#chart_div").length != 0)
    {
      drawChart_totalUser('chart_div');
    }
}, 20000);

和ajax.php -

    <?php
          $JSON = array(
                        array(
                                    'time_year'     => 2005,
                                    'time_month'    => 10,
                                    'time_day'      => 12,
                                    'time_hour'     => 2,
                                    'time_min'      => 30,
                                    'time_sec'      => 12,
                                    'total_user_no' => 100 
                                ),
                        array(
                                    'time_year'     => 2005,
                                    'time_month'    => 11,
                                    'time_day'      => 12,
                                    'time_hour'     => 2,
                                    'time_min'      => 30,
                                    'time_sec'      => 12,
                                    'total_user_no' => 190 
                                ),
                        array(
                                    'time_year'     => 2005,
                                    'time_month'    => 12,
                                    'time_day'      => 12,
                                    'time_hour'     => 2,
                                    'time_min'      => 30,
                                    'time_sec'      => 12,
                                    'total_user_no' => 90 
                                ),
                        array(
                                    'time_year'     => 2006,
                                    'time_month'    => 1,
                                    'time_day'      => 12,
                                    'time_hour'     => 2,
                                    'time_min'      => 30,
                                    'time_sec'      => 12,
                                    'total_user_no' => 180 
                                )
                        );
          echo json_encode($JSON);
    ?>

在任何数据刷新之前它都能正常工作。

但是如果我调整大小或者在20秒后使用AJAX刷新数据时，图表就会消失，并且没有任何显示。

因此，当此代码执行时它无效 -

$( window ).resize(function()
{
    if($("#chart_div").length != 0)
    {
      drawChart_totalUser('chart_div');
    }
});

setInterval(function()
{
    if($("#chart_div").length != 0)
    {
      drawChart_totalUser('chart_div');
    }
}, 20000);

有人可以帮我吗？

更新 -

我试过了 -

Google line chart not reloading when I reload the div

并且

Redraw Google Chart after every Ajax call

但没有解决它。

带有刷新功能的Google Line图表 - 刷新后无效

更新 -

0 个答案: