文章/答案/技术大牛

发布

问CanvasJS线图生成？
EN

Stack Overflow用户

提问于 2015-05-21 19:53:13

回答 1查看 2.2K关注 0票数 0

我正忙着做一个实时数据显示的javascript图表.我找到了这个CanvasJS API。网页上那个具体图表的默认代码很好，但是当然，在获取数据的部分，他们把变量数组空了，而是使用了数学随机化数据函数，以便随机生成特定的数据并在图形中使用。

但是，我想用来自我想要使用的特定表的数据库数据来填充这个数组！

我尝试过很多事情，但是如果我实现了我的部分，图形就不会再显示了。我做错什么了？

下面是我使用的3个代码：

默认代码(仅用于比较目的)：

<!DOCTYPE HTML>
<html>

<head>
    <script type="text/javascript">
    window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer",{
            title :{
                text: "Live Random Data"
            },          
            data: [{
                type: "line",
                dataPoints: dps 
            }]
        });

        var xVal = 0;
        var yVal = 100; 
        var updateInterval = 20;
        var dataLength = 500; // number of dataPoints visible at any point

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {   
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal++;
            };
            if (dps.length > dataLength)
            {
                dps.shift();                
            }

            chart.render();     

        };

        // generates first set of dataPoints
        updateChart(dataLength); 

        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 

    }
    </script>
    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

我自己的图表代码，基于上面的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="jquery.js"></script>
    <script src="jquery.canvasjs.js" ></script>
    <script src="canvasjs.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON("data.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
            });
        });
    </script>
</head>
<body>

    <div id="chartContainer" style="width: 800px; height: 380px;"></div>

</body>
</html>

和my data.php，它显示以下输出：

{"x":"1"，"y":"5"}，{"x":"2"，"y":"5"}，{"x":"3"，"y":"4"}，{"x":"4"，"y":"1"}，{"x":"5"，"y":"8"}，{"x":"6"，"y":"9"}，{"x":"7"，"y":"5"}，{"x":"8"，"y":"6"}，{"x":"9"，"y":"4"}，{"x":"10"，"y":"7"}

 <?php
    //header('Content-Type: application/json');
    $con = mysqli_connect("localhost","root","","WebApplication");

    // Check connection
    if (mysqli_connect_errno($con))
    {
        echo "Failed to connect to DataBase: " . mysqli_connect_error();
    } 
    else
    {
    $data_points = array();

    $result = mysqli_query($con, "SELECT * FROM info");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("x" => $row['id'] , "y" => $row['acceleration']);

        array_push($data_points, $point);        
    }

        echo json_encode($data_points, 32); //define('JSON_NUMERIC_CHECK',32);   // Since PHP 5.3.3

    }
    mysqli_close($con);



    ?>

希望你有足够的信息！

谢谢

迈尔

编辑

我将“我自己的图表”-code中的代码交换为以下内容: Anjali Jain的@反馈-注释

-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="jquery.js"></script>
    <script src="jquery.canvasjs.js" ></script>
    <script src="canvasjs.js"></script>
    <script type="text/javascript" src="canvasjs.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {

                $.getJSON("data.php", function (result) {

                var dataPoints = [];

                for (var i = 0; i <= result.length - 1; i++) {
                dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
                }

                var chart = new CanvasJS.Chart("chartContainer", {
                data: [
                {
                dataPoints: dataPoints
                }
                ]
                });

                chart.render();
                });
        });
    </script>
</head>
<body>

    <div id="chartContainer" style="width: 800px; height: 380px;"></div>

</body>
</html>

但我还是什么都没得到。

javascript

php

canvasjs

回答 1

Stack Overflow用户

发布于 2015-05-25 14:09:28

当您直接传递字符串时，CanvasJS要求x和y值是数字。您可以将它们转换为数字，如下所示

$.getJSON("data.php", function (result) {

    var dataPoints = [];

    for (var i = 0; i <= result.length - 1; i++) {
        dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
        data: [
        {
            dataPoints: dataPoints
        }
        ]
    });

    chart.render();
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30383125

复制

相似问题

问CanvasJS线图生成？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CanvasJS线图生成？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CanvasJS线图生成？
EN