Question

我有这个代码，实际上它工作正常，除了一件事，当我擦除datos.json上的一些数据，或添加新的东西，图表不刷新数据，但是，如果我删除数据。 json，它已经向我展示了旧的数据，我不知道它在哪里得到这些信息¿？¿¿？?? ?? 只有我在服务器上执行“$ service httpd restart”才能正确重新加载数据：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <!-- Included Jquery Library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["bar"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.getJSON("datos.json", function(response){
                var datos_end  = google.visualization.arrayToDataTable(response.data);
                var datos_end2 = google.visualization.arrayToDataTable(response.data2);

                var options = {
                        width: 900,
                    chart: {
                        title: 'Datos de los sensores',
                        subtitle: 'CO2,CO,VOC,PM2.5'
                    },
                    series: {
                        0: { axis: 'co2'},
                        1: { axis: 'co'},
                        2: { axis: 'voc'},
                        3: { axis: 'pm2'}

                    },
                    axes: {
                        y: {
                                co2: {label: 'ppm'},
                                co: {label: 'ppm'},
                                voc: {side: 'right', label: 'ppb'},
                                pm2: {side: 'left', label: 'ppm'}
                        }
                    }
                };
                var options2 = {
                                width: 900,
                                        chart: {
                                                title: 'Datos sensores 2',
                                                subtitle: 'Temperatura y humedad a la izq., presion a laderecha'
                                },
                                        series: {
                                0: { axis: 'temperatura' },
                                1: { axis: 'presion' },
                                2: { axis: 'humedad'}
                                    },
                                    axes: {
                            y: {
                                  temperatura: {label: 'grados centigrados'}, 
                              presion: {side: 'right', label: 'bar'},
                              humedad: {side: 'left', label: '%'}
                                }
                            }
                            };


            var chart = new google.charts.Bar(document.getElementById('div1'));
                            var chart2 = new google.charts.Bar(document.getElementById('div2'));

            chart.draw(datos_end, options);
            chart2.draw(datos_end2, options2);
        })
        .success(function() { 
            console.log("success");
        })
        .error(function(jqXHR, textStatus, errorThrown) {  
            console.log("error " + textStatus);
            console.log("incoming Text " + jqXHR.responseText);})
        .complete(function() {
            console.log("success");
        });
    }
</script>

  </head>
  <body>
    <button onclick='location.reload(true)'>REFRESH DATA</button>
        <p>
    <div id="div1" style="width: 900px; height: 500px;"></div>
    </p>
    <p>
    <div id="div2" style="width: 900px; height: 500px;"></div>
    </p>
  </body>
</html>

我在另一篇文章中看到了这个：Redraw Google Chart after every Ajax call我尝试做同样的事情而没有任何结果:(任何人都可以帮助我吗？

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"</script>
    <!-- Included Jquery Library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["bar"]});
        google.setOnLoadCallback(getData);

        function getData() {
            $.getJSON("datos.json", function(response){
                dwarChart(response.data, response.data2);
            })
            .success(function() { 
                console.log("success");
            })
            .error(function(jqXHR, textStatus, errorThrown) {  
                console.log("error " + textStatus);
                console.log("incoming Text " + jqXHR.responseText);})
            .complete(function() {
                console.log("success");
            });
        }


        function drawChart(data1, data2) {
            var datos_end  = google.visualization.arrayToDataTable(data1);
            var datos_end2 = google.visualization.arrayToDataTable(data2);


            var options = {
                    width: 900,
                    chart: {
                        title: 'Datos de los sensores',
                        subtitle: 'CO2,CO,VOC,PM2.5'
                    },
                    series: {
                        0: { axis: 'co2'},
                        1: { axis: 'co'},
                        2: { axis: 'voc'},
                        3: { axis: 'pm2'}

                    },
                    axes: {
                        y: {
                            co2: {label: 'ppm'},
                            co: {label: 'ppm'},
                            voc: {side: 'right', label: 'ppb'},
                            pm2: {side: 'left', label: 'ppm'}
                        }
                    }
            };
            var options2 = {
                    width: 900,
                    chart: {
                        title: 'Datos sensores 2',
                        subtitle: 'Temperatura y humedad a la izq., presion a la derecha'
                    },
                    series: {
                        0: { axis: 'temperatura' },
                        1: { axis: 'presion' },
                        2: { axis: 'humedad'}
                    },
                    axes: {
                        y: {
                          temperatura: {label: 'grados centigrados'}, 
                          presion: {side: 'right', label: 'bar'}, 
                          humedad: {side: 'left', label: '%'}
                        }
                    }
            };


            var chart = new google.charts.Bar(document.getElementById('div1'));
            var chart2 = new google.charts.Bar(document.getElementById('div2'));

             chart.draw(data1, options);
             chart2.draw(data2, options2);
        }
    </script>

  </head>
  <body>
    <button onclick='location.reload(true)'>REFRESH DATA</button>
    <p>
    <div id="div1" style="width: 900px; height: 500px;"></div>
    </p>
    <p>
    <div id="div2" style="width: 900px; height: 500px;"></div>
    </p>
  </body>
</html>

从Google Chart中重新加载图表数据

0 个答案: