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>

这是我们的最终结果：

ZingChart with MySQL data

我希望能帮到你！如果您有任何问题，请告诉我。

编辑10/20/14：

我发现您在同一页面中生成两个折线图时遇到问题。要在页面中呈现多个图表，您必须包含多个＆lt; div＆gt;具有唯一ID的元素，并为要生成的每个图表调用zingchart.render方法。

请查看this demo。

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

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

编辑10/21/14：

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

只需添加：

myData1.pop();

行后：

myData.pop();

你应该好好去！

将ZingCharts连接到MySQL（构建折线图）

1 个答案: