1

谢谢你。我现在可以看到第二张图，但我拥有的第二张图没有任何数据，所以它只是一张空白图表。这是我的 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 值）。谢谢！

4

1 回答 1

4

我是 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)]
    ... 
    ]

在下一步中，我们将查询数据库，并使用连接将每个日期括在引号中，并将每个 Date,Alibaba 有序对括在方括号中。

<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>

这是我们的最终结果：

带有 MySQL 数据的 ZingChart

我希望这可以帮助你！如果您有任何问题，请告诉我。

2014 年 10 月 20 日编辑：

我发现您无法在同一页面中生成两个折线图。为了在一个页面中呈现多个图表，您必须包含多个具有唯一 ID 的 <div> 元素，并为要生成的每个图表调用 zingchart.render 方法。

请看一下这个演示。

请注意，有两个 <div> 元素，一个具有 id="myChartDiv"，另一个具有 id="myChartDiv2"。我们还在 window.onload 函数中包含了对 zingchart.render 方法的两个调用。第一个调用告诉 ZingChart 在 id="myChartDiv" 的 <div> 元素的位置呈现图表，第二个调用告诉 ZingChart 在 id="myChartDiv2" 的 <div> 元素的位置呈现图表。

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

2014 年 10 月 21 日编辑：

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

只需添加：

myData1.pop();

行后：

myData.pop();

你应该好好去！

于 2014-10-15T20:57:28.980 回答