【问题标题】:Drawing google multi line chart via php (problems about php JSON format)通过php绘制google多折线图(关于php JSON格式的问题)
【发布时间】:2017-07-04 15:34:02
【问题描述】:

我正在尝试使用 php 绘制具有多条线的谷歌折线图。

我从我的数据库中获得了以下数据:

region Month Total
 JP     12     1
 US     12     1
 JP      1     2
 US      1     1
 CN      2     4
 DE      2     3
 JP      2     4
 RU      2     5
 US      2     4

参考google chart官网:

   function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

  data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  11.7, 18.8, 10.5],
    [5,  11.9, 17.6, 10.4],
    [6,   8.8, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
  ]);

如何在 php 中将我的数据填充为上述格式?例如:

    function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Month');
  data.addColumn('number', 'JP');
  data.addColumn('number', 'US');
  data.addColumn('number', 'RU');
  data.addColumn('number', 'CN');
  data.addColumn('number', 'DE');

  data.addRows([
    [12,  1, 1, 0, 0, 0],
    [1,  2, 1, 0, 0, 0],
    [2,  4, 4, 5, 4, 3],
  ]);

我目前得到了 php 代码(编码为 json 部分):

$stmt->execute();
$rowCount = $stmt->rowCount();

$array = array();
$array['cols'][] = array('label' => 'Month','type' => 'string', 'Month');

for ($i=1; $i<($rowCount+1); $i++){
  $result=$stmt->fetch(PDO::FETCH_ASSOC);
  $array['cols'][] = array('label' => $result['region'],'type' => 'number', 'Record per month');
  $array['rows'][]['c'] = array(
      array('v' => $result['Month'] ),
      array('v' => $result['Total'] )
  ); 
}

它给了我:

{  
"cols":[  
  {  
     "label":"Month",
     "type":"string",
     "0":"Month"
  },
  {  
     "label":"JP",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"US",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"JP",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"US",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"CN",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"DE",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"JP",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"RU",
     "type":"number",
     "0":"Record per month"
  },
  {  
     "label":"US",
     "type":"number",
     "0":"Record per month"
  }
 ],
 "rows":[  
  {  
     "c":[  
        {  
           "v":"12"
        },
        {  
           "v":"1"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"12"
        },
        {  
           "v":"1"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"1"
        },
        {  
           "v":"2"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"1"
        },
        {  
           "v":"1"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"2"
        },
        {  
           "v":"4"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"2"
        },
        {  
           "v":"3"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"2"
        },
        {  
           "v":"4"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"2"
        },
        {  
           "v":"5"
        }
     ]
  },
  {  
     "c":[  
        {  
           "v":"2"
        },
        {  
           "v":"4"
        }
     ]
  }
 ]
 }

【问题讨论】:

  • 我的问题是关于将数据拟合成正确的 json 格式

标签: php google-visualization


【解决方案1】:

一旦你有了json数据,你就可以直接创建googleDataTable了,

无需添加列或行(那些已经在 json 中定义)...

var googleData = new google.visualization.DataTable(jsonData);

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var jsonData = {
    "cols":[
      {
         "label":"Month",
         "type":"string",
         "0":"Month"
      },
      {
         "label":"JP",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"US",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"JP",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"US",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"CN",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"DE",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"JP",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"RU",
         "type":"number",
         "0":"Record per month"
      },
      {
         "label":"US",
         "type":"number",
         "0":"Record per month"
      }
     ],
     "rows":[
      {
         "c":[
            {
               "v":"12"
            },
            {
               "v":"1"
            }
         ]
      },
      {
         "c":[
            {
               "v":"12"
            },
            {
               "v":"1"
            }
         ]
      },
      {
         "c":[
            {
               "v":"1"
            },
            {
               "v":"2"
            }
         ]
      },
      {
         "c":[
            {
               "v":"1"
            },
            {
               "v":"1"
            }
         ]
      },
      {
         "c":[
            {
               "v":"2"
            },
            {
               "v":"4"
            }
         ]
      },
      {
         "c":[
            {
               "v":"2"
            },
            {
               "v":"3"
            }
         ]
      },
      {
         "c":[
            {
               "v":"2"
            },
            {
               "v":"4"
            }
         ]
      },
      {
         "c":[
            {
               "v":"2"
            },
            {
               "v":"5"
            }
         ]
      },
      {
         "c":[
            {
               "v":"2"
            },
            {
               "v":"4"
            }
         ]
      }
     ]
  };

  var googleData = new google.visualization.DataTable(jsonData);
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(googleData);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意:问题中发布的 json 数据似乎缺少第 3 列到第 6 列的值...

【讨论】:

  • 你好,我在问如何将我的数据放入正确的 json 格式
  • 对我来说看起来不错,显然可以在上面工作,只需要为每一行添加额外的列值 --> "c":[{"v":"2"}, {"v":"4"}] -- 应该看起来更像 --> "c":[{"v":"2"}, {"v":"4"}, {"v":"4"}, {"v":"4"}, {"v":"4"}, {"v":"4"}]...
  • 如果您需要帮助将数据传输到页面,请使用 ajax - 检查this answer...
猜你喜欢
  • 2012-10-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多