php - 从 MYSQL 数据在网页上放置多个 Google 图表

Question

我已经能够显示来自 mysql 数据的 google 图表，但是当我添加第二个图表时，我只能看到来自第二个数组的数据(对于第二个图表)我在我的 php 脚本中使用了 json_encode on。如果我更改数组编码的顺序，使第二个图表的数组现在首先被编码，我将不再看到它，但现在第一个图表是可见的。 任何人都可以看到这个问题吗？也许我应该使用柱形图而不是 Material 图？？这是我的 javascript:

    <script type="text/javascript">

    google.setOnLoadCallback(drawCharts);

    function drawCharts() {
    drawChartA();
    drawChartB(); 

    }

        function drawChartB(){
          var data = new google.visualization.DataTable(<?=$jsonTable?>);
          var options = {
                chart: {
                    title: 'Calls for <?php echo $cLabel;?>',
                    subtitle: 'Something to put Here',



                },
                annotations:{
                    textStyle:{
                        fontName: 'Times-Roman',
                        fontSize: 12,
                        bold: true,
                        italic: false
                    }
                },
                width: 1200,
                height: 600,


            };

          var chart = new 
          google.charts.Bar(document.getElementById('chart_div'));
          chart.draw(data, google.charts.Bar.convertOptions(options));

        }

          function drawChartA(){
          var data = new google.visualization.DataTable(<?=$jsonTable_ct?>);
          var options = {
                chart: {
                    title: 'Calls for <?php echo $cLabel;?>',
                    subtitle: 'Something to put Here',

                },
                annotations:{
                    textStyle:{
                        fontName: 'Times-Roman',
                        fontSize: 12,
                        bold: true,
                        italic: false
                    }
                },
                width: 1200,
                height: 600,
                isStacked: 'true',

            };

 var chart = new google.charts.Bar(document.getElementById('chart_div_ct'));

          chart.draw(data, google.charts.Bar.convertOptions(options));

        }

</script>

我的 json_encoded 文件是:

    {"cols":[{"label":"Time Interval","type":"string"},{"label":"Calls - All Offices","type":"number"}],"rows":[{"c":[{"v":"05:00"},{"v":1}]},{"c":[{"v":"06:00"},{"v":3}]},{"c":[{"v":"07:00"},{"v":9}]},{"c":[{"v":"07:30"},{"v":22}]},{"c":[{"v":"08:00"},{"v":82}]},{"c":[{"v":"08:30"},{"v":68}]},{"c":[{"v":"09:00"},{"v":97}]},{"c":[{"v":"09:30"},{"v":48}]},{"c":[{"v":"10:00"},{"v":56}]},{"c":[{"v":"10:30"},{"v":70}]},{"c":[{"v":"11:00"},{"v":75}]},{"c":[{"v":"11:30"},{"v":53}]},{"c":[{"v":"12:00"},{"v":56}]},{"c":[{"v":"12:30"},{"v":48}]},{"c":[{"v":"13:00"},{"v":22}]},{"c":[{"v":"13:30"},{"v":42}]},{"c":[{"v":"14:00"},{"v":40}]},{"c":[{"v":"14:30"},{"v":60}]},{"c":[{"v":"15:00"},{"v":69}]},{"c":[{"v":"15:30"},{"v":65}]},{"c":[{"v":"16:00"},{"v":73}]},{"c":[{"v":"16:30"},{"v":37}]},{"c":[{"v":"17:00"},{"v":20}]},{"c":[{"v":"17:30"},{"v":10}]},{"c":[{"v":"18:00"},{"v":10}]},{"c":[{"v":"18:30"},{"v":2}]},{"c":[{"v":"19:00"},{"v":1}]},{"c":[{"v":"19:30"},{"v":2}]},{"c":[{"v":"20:00"},{"v":1}]},{"c":[{"v":"20:30"},{"v":1}]}]}

另一个在这里:(他们都可以工作，所以可能没有必要审查这个)

    {"cols":[{"label":"Time Interval","type":"string"},{"label":"NP Calls","type":"number"},{"label":"DR Calls","type":"number"},{"label":"RE Today Calls","type":"number"},{"label":"RE Future","type":"number"},{"label":"ACCT","type":"number"},{"label":"EMER","type":"number"},{"label":"Other Calls","type":"number"}],"rows":[{"c":[{"v":"05:00"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":1}]},{"c":[{"v":"06:00"},{"v":0},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"07:00"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":2}]},{"c":[{"v":"07:30"},{"v":2},{"v":0},{"v":3},{"v":0},{"v":0},{"v":1},{"v":2}]},{"c":[{"v":"08:00"},{"v":9},{"v":3},{"v":11},{"v":5},{"v":0},{"v":4},{"v":23}]},{"c":[{"v":"08:30"},{"v":1},{"v":2},{"v":13},{"v":7},{"v":2},{"v":4},{"v":14}]},{"c":[{"v":"09:00"},{"v":3},{"v":1},{"v":15},{"v":11},{"v":6},{"v":3},{"v":23}]},{"c":[{"v":"09:30"},{"v":0},{"v":0},{"v":4},{"v":6},{"v":5},{"v":0},{"v":16}]},{"c":[{"v":"10:00"},{"v":1},{"v":3},{"v":2},{"v":10},{"v":2},{"v":0},{"v":17}]},{"c":[{"v":"10:30"},{"v":5},{"v":1},{"v":1},{"v":10},{"v":2},{"v":3},{"v":23}]},{"c":[{"v":"11:00"},{"v":5},{"v":3},{"v":7},{"v":11},{"v":10},{"v":1},{"v":23}]},{"c":[{"v":"11:30"},{"v":4},{"v":1},{"v":2},{"v":6},{"v":2},{"v":0},{"v":18}]},{"c":[{"v":"12:00"},{"v":3},{"v":0},{"v":5},{"v":11},{"v":2},{"v":0},{"v":21}]},{"c":[{"v":"12:30"},{"v":5},{"v":1},{"v":4},{"v":4},{"v":4},{"v":1},{"v":5}]},{"c":[{"v":"13:00"},{"v":2},{"v":1},{"v":3},{"v":2},{"v":2},{"v":0},{"v":6}]},{"c":[{"v":"13:30"},{"v":2},{"v":0},{"v":1},{"v":3},{"v":1},{"v":0},{"v":15}]},{"c":[{"v":"14:00"},{"v":5},{"v":3},{"v":1},{"v":5},{"v":3},{"v":1},{"v":4}]},{"c":[{"v":"14:30"},{"v":3},{"v":1},{"v":5},{"v":6},{"v":6},{"v":0},{"v":19}]},{"c":[{"v":"15:00"},{"v":3},{"v":1},{"v":4},{"v":8},{"v":4},{"v":1},{"v":22}]},{"c":[{"v":"15:30"},{"v":8},{"v":1},{"v":0},{"v":10},{"v":4},{"v":0},{"v":22}]},{"c":[{"v":"16:00"},{"v":6},{"v":5},{"v":1},{"v":12},{"v":3},{"v":2},{"v":20}]},{"c":[{"v":"16:30"},{"v":3},{"v":4},{"v":3},{"v":7},{"v":3},{"v":1},{"v":7}]},{"c":[{"v":"17:00"},{"v":1},{"v":0},{"v":0},{"v":4},{"v":1},{"v":0},{"v":5}]},{"c":[{"v":"17:30"},{"v":0},{"v":1},{"v":0},{"v":1},{"v":1},{"v":0},{"v":1}]},{"c":[{"v":"18:00"},{"v":1},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0},{"v":2}]},{"c":[{"v":"18:30"},{"v":0},{"v":0},{"v":0},{"v":1},{"v":0},{"v":0},{"v":0}]}]}Can 

Answer 1

很有可能the same issue这是在 google-visualization-issues 中报告的存储库。

目前至少有两种解决方案:

选项1.同步渲染图表

总体思路是同步渲染图表。由于绘制函数是异步的，我们利用 ready为此目的的事件处理程序。

地点ready draw 之前每个函数中的事件处理程序函数调用:

if (typeof ready != "undefined") google.visualization.events.addOneTimeListener(chart, 'ready', ready);

并更改drawChartN()函数签名为 drawChartN(ready)

然后替换:

function drawCharts() {
    drawChartA();
    drawChartB();
}

与:

function drawCharts() {
    drawChartA(function(){
        drawChartB();
    });
}

PhpFiddle

选项 2. 使用卡住版本加载器。

自

The rollout of the v43 candidate release that would fix this problem

切换到使用卡住版本加载器。

步骤:

1) 添加对加载程序的引用:<script
src="//www.gstatic.com/charts/loader.js"></script>

2)然后加载一个43版本的库:google.charts.load("43",{packages:["corechart","bar"]});

3)替换:

function drawCharts() {
    drawChartA();
    drawChartB();
}

与

google.charts.setOnLoadCallback(drawChartA);
google.charts.setOnLoadCallback(drawChartB);