我无法使用 mysql 表中的数据创建谷歌折线图

Posted

技术标签:

【中文标题】我无法使用 mysql 表中的数据创建谷歌折线图【英文标题】：I am unable to create google Line chart using data from mysql table 【发布时间】：2017-09-27 13:23:43 【问题描述】：

我正在尝试为 SQL 表生成谷歌图表，但无法完成。我创建了一个由 X 和 Y 值组成的表，我应该得到有关 X 和 Y 值的折线图。生成错误“表没有列”并且未生成图表。谁能帮我解决这个问题？。这是我的代码：

表创建：

<html>
<head>
<title>Creating mysql Tables</title>
</head>
<body>
<?php

$conn = mysql_connect("localhost","root","","GOGRAPHS");
if(! $conn )

  die('Could not connect: ' . mysql_error());

mysql_select_db("GO_GRAPHS") or die(mysql_error());

mysql_query("CREATE TABLE graphs(x INT NOT NULL,y INT NOT NULL)")
or die(mysql_error());
echo"table created successfully";

mysql_close($conn);
?>
</body>
</html>

插入数据：

<html>
<head>
<title>Creating MySQL Tables</title>
</head>
<body>
<?php

$conn = mysql_connect("localhost","root","");
if(! $conn )

  die('Could not connect: ' . mysql_error());

mysql_select_db("GO_GRAPHS") or die(mysql_error());
mysql_query("INSERT INTO graphs(x, y)VALUES (10, 40),(20,60),(30,80)")
or die(mysql_error());  

mysql_close($conn);
?>

json中数据的转换（go_graphs_data.php）：

<?php
$sql = mysql_connect("localhost","root","");
if(!$sql)

    echo "Connection Not Created";

$con = mysql_select_db("GO_GRAPHS");
if(!$sql)

    echo "Database Not Connected";

$data[] = array('A','B');
$sql = "select * from graphs";
$query = mysql_query($sql);

while($result = mysql_fetch_array($query))

$data[] = array((int)$result['x'],(int)$result['y']);
      

echo json_encode($data);
?>

谷歌图表的显示：

<html>

<head>

<!--Load the AJAX API-->

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

     google.charts.load('current', 'packages':['corechart']);

    google.charts.setOnLoadCallback(line_chart);

     function line_chart() 

      var jsonData = $.ajax(

          url: "go_graphs_data.php",

          dataType: "json",

          async: false

          ).responseText;

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

      var chart = new google.visualization.ColumnChart(document.getElementById('linechart_div'));

      chart.draw(data, width: 400, height: 240);

    

 </script>

</head>

<body>

<!--Div that will hold the pie chart-->

<div id="linechart_div"></div>

</body>

</html>

【问题讨论】：

url: ""go_graphs_data.php" ??太多" 我改变了它，但结果没有改变 如果数据被正确插入到数据库中，那么我建议使用控制台来调试 ajax 函数。是否有从 php 脚本发回的有效 json 响应？另外，$data[] = array('A','B'); 是什么？剩下的数据不是数字吗？ 是的，数据是数字。 【参考方案1】：

直接从 json 创建 google-vis DataTable 时... 

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

json 必须是特定格式，found here

在这种情况下，您似乎正在构建一个简单的数组

因此，请改用static method arrayToDataTable 

var data = google.visualization.arrayToDataTable(jsonData);

注意：由于方法是静态的，所以不需要new关键字

编辑

如果数据不包含列标题，请务必将第二个参数设置为true (firstRowIsData)...

var data = google.visualization.arrayToDataTable(jsonData, true);

编辑 2

请参阅以下使用所有数字的工作 sn-p... 

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

function drawBasic() 
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');

  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66],
  ]);

  var options = 
    chartArea: 
      top: 12,
      right: 12,
      bottom: 36,
      left: 24,
      height: '100%',
      width: '100%'
    ,
    legend: 
      position: 'bottom'
    
  ;

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

感谢您的回答。错误已修复。但未获得可视图表。我认为 JSON 数组有问题。你能检查一下并帮助我吗 未发现错误。我正在尝试为 X 和 Y 创建数据图表，它们都是数字。这可能吗？ .互联网上的每个示例都向我展示了字符串与数字的数据图表 有可能，请参阅上面的 EDIT 2，请您分享一个 jsonData 被馈送到图表的样本吗？ 我不想使用“data.addRows”手动添加所有数据。我喜欢从表中获取。 是的，明白了，这只是一个演示使用所有数值有效的示例——如果您可以使用最新的 javascript 和jsonData 的示例编辑问题，那么我可以让图表正常工作.. .

以上是关于我无法使用 mysql 表中的数据创建谷歌折线图的主要内容，如果未能解决你的问题，请参考以下文章

多线谷歌折线图，使用来自 mySQL db 的数据

如何修改谷歌折线图的JSON字符串

谷歌折线图双Y轴问题

用单值显示谷歌折线图

谷歌折线图显示负值

如何更改用于谷歌折线图的数据结构