php - 将 ZingCharts 连接到 MySQL(构建折线图)

Question

谢谢。我现在可以看到第二张图，但我看到的第二张图没有任何数据，所以它只是一张空白图表。这是我的PHP代码。我究竟做错了什么？我的代码:

    <?php 
    /* Open connection to "zing_db" MySQL database. */
    $mysqli = new mysqli("localhost", "root", "database123", "productno");

    /* Check the connection. */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
?> 



    <script>
/* First line chart */

var myData=[<?php 
$data=mysqli_query($mysqli,"SELECT * FROM records");
while($info=mysqli_fetch_array($data))
    echo '["'.$info['Date'].'",'.$info['Alibaba'].'],'; /* Data is formatted here, using the . concatenation operator */
    echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];

//--------- Second Line Chart ---------------

var myData1=[<?php 
$data1=mysqli_query($mysqli,"SELECT * FROM records");
while($info1=mysqli_fetch_array($data1))
    echo '["'.$info1['Date'].'",'.$info1['Lelong'].'],'; /* Data is formatted here, using the . concatenation operator */
    echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];

<?php
/* Close the connection */
$mysqli->close();
?>
myData.pop(); /* Pop off the final, empty element from the myData array */

//Display first line chart

    window.onload=function(){
    zingchart.render({
        id:"AlibabaChart",
        width:"100%",
        height:300,
        data:{
        "type":"line",
        "title":{
            "text":"Alibaba"
        },
        "series":[
            {
                "values":myData
            }
    ]
    }
    });

//Display second line chart

zingchart.render({
        id:"LelongChart",
        width:"100%",
        height:300,
        data:{
        "type":"line",
        "title":{
            "text":"Lelong"
        },
        "series":[
            {
                "values":myData1
            }
    ]
    }
    });

    };

</script>

仅供引用，数据来自同一个表，x 值和数据库但不同的列(y 值)。谢谢!

Answer 1

我是 ZingChart 团队的一员，我很乐意为您提供帮助。

我已经使用您指定的结构复制了您的 MySQL 数据库设置以更好地为您提供帮助，并且我已经用一些看起来像这样的虚拟数据填充了它:

Date,Alibaba
1/13/11,70
2/13/11,42
3/13/11,33
4/13/11,3
5/13/11,28
...

首先，我们需要打开一个到数据库的连接:

<?php 
/* Open connection to database */
$mysqli = new mysqli("localhost", "root", "pass", "productno");
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

一旦我们成功打开连接，下一步就是将数据格式化为 ZingChart 可读的格式。假设您想要沿 x 轴使用日期值，也许最好将您的数据格式化为像这样的有序对:

"values":[ 
    [Date(string),value(int)],
    [Date2(string),value2(int)],
    [Date3(string),value3(int)]
    ... 
    ]

下一步，我们将查询数据库，并使用连接将每个日期括在引号内，并将每个日期，阿里巴巴有序对包裹在方括号中。

<script>
/* Create myData variable in js that will be filled with db data */
var myData=[<?php 
$data=mysqli_query($mysqli,"SELECT * FROM records");
while($info=mysqli_fetch_array($data))
    echo '["'.$info['Date'].'",'.$info['Alibaba'].'],'; /* Data is formatted here, using the . concatenation operator */
    echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];
<?php
/* Close the connection */
$mysqli->close();
?>
myData.pop(); /* Pop off the final, empty element from the myData array */

此时，如果您要查看页面源代码，变量 myData 将如下所示:

var myData = [
    ["2011-01-13", 70],
    ["2011-02-13", 42],
    ["2011-03-13", 33],
    ...
];

...这意味着它已准备好放入我们的图表中!

    window.onload = function() {
        zingchart.render({
            id: "myChart",
            width: "50%",
            height: 400,
            data: {
                "type": "line",
                "title": {
                    "text": "Data Pulled from MySQL Database"
                },
                "series": [{
                    "values": myData
                }]
            }
        });
    };
</script>

这是我们的最终结果:

希望对你有所帮助!如果您有任何问题，请告诉我。

编辑 2014 年 10 月 20 日:

我发现您在同一页面中生成两个折线图时遇到问题。为了在页面中呈现多个图表，您必须包含多个具有唯一 ID 的

元素，并为要生成的每个图表调用 zingchart.render 方法。

请看this demo .

请注意，有两个

元素，一个 id="myChartDiv"，另一个 id="myChartDiv2"。我们还在 window.onload 函数中包括了对 zingchart.render 方法的两次调用。第一次调用告诉 ZingChart 在 id="myChartDiv"的

元素的位置呈现图表，第二次调用告诉 ZingChart 在 id="myChartDiv2"的

元素的位置呈现图表。

可以在页面上的两个图表中使用相同的数据数组，如提供的演示中的 myData 变量所示。

编辑 2014 年 10 月 21 日:

你好，凯尔。我在我的测试环境中使用了您的代码，看起来数据没有加载，因为您没有从 myData1 数组末尾弹出空元素。

只需添加:

myData1.pop();

行后:

myData.pop();

你应该可以开始了!

关于php - 将 ZingCharts 连接到 MySQL(构建折线图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26356392/

上一篇：php - 在 MySQL 中连接两个表以逗号分隔的 ID 获取值

下一篇：MySQL left join variation - 甚至在丢失的行上选择

相关文章：

php - MySQL - mysql_fetch_assoc() 不给出一列

mysql - 根据子查询更新值

php - 对象方法不返回结果

php - 带有附加数据的 jQuery 文件上传

php - Ajax 根本不发送数据

javascript - 在 Google Charts Javascript 中循环

javascript - 特定位置图表js的自定义栏

javascript - Highchart 在 IE8 中不显示系列组

PHP 不显示任何错误

java - 将查询从 php 传递到 java