使用 JSON 为 canvasJS RangeArea 图表加载数据

Question

我正在尝试使用 CanvasJS 创建范围面积图，PHP 从数据库加载数据。

我已经创建了 php 并且它 returns 来自数据库的值。这是 php:

<?php
header('Content-Type: application/json');
$con = mysqli_connect("127.0.0.1","root","pwd1","db");
// 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 (CalYear+1) as CalYear, concat('[',REPLACE(Year1PercWC,',','.'),',',REPLACE(Year1PercBC,',','.'),']') as ResultSet, concat('Sessies: ',calyear) as Help FROM table where cat='1' and (CalYear+1)<year(now())");
    while($row = mysqli_fetch_array($result))
    {        
        $point = array("x" => $row['CalYear'] , "y" => $row['ResultSet'],"name" => $row['Help']);
         array_push($data_points, $point);        
    }
    echo json_encode($data_points);
}
mysqli_close($con);

?>

结果：

[{"x":"2007","y":"[35.94,35.94]","name":"Sessies: 2006"},{"x":"2008","y":"[27.67,27.67]","name":"Sessies: 2007"},...,...]

问题是 x 和 y 值（=字符串值）中的引号。 CanvasJS 只用数字来创建图形。所以输出应该是这样的：

[{"x":2007,"y":[35.94,35.94],"name":"Sessies 2006"},{"x":2008,"y":[27.67,27.67],"name":"Sessies 2007"},...,...]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>   
    <script type="text/javascript" src="jquery.canvasjs.min.js"></script> 
    <script type="text/javascript">
         $(document).ready(function () {
            $.getJSON("TestGraf.php", function (result) {
                var chart = new CanvasJS.Chart("chartContainer", {
                    axisX: { 
                        intervalType: "number", 
                        title: "Year", 
                        interval: 1,
                        valueFormatString: "#"
                    }, 
                    data: [
                        {
                            type: "rangeArea",
                            dataPoints: result
[{"x":2007,"y":[35.94,35.94],"name":"Sessies 2006"},{"x":2008,"y":[27.67,27.67],"name":"Sessies 2007"}] -- This is working fine
                        }
                    ]
                });
                chart.render();
            }); 
        });
    </script>
</head>
<body>
    <div id="chartContainer" style="width: 800px; height: 380px;"></div>
</body>
</html>

我确定必须有一种方法来调整我的 php，以便 x 和 y 作为数字而不是字符串传递，但我真的是 php 的新手（首先time ever) 并且找不到解决方案，尤其是第二部分 (y)。

谁能告诉我要对 php and/or html 文件进行哪些改编？

谢谢，

Answer 1

这应该对你有用：

json_encode($arr, JSON_NUMERIC_CHECK);

Answer 2

我的回答可能有点太晚了，但就像亚历克斯回答的那样，你应该使用 echo json_encode($data_points, JSON_NUMERIC_CHECK);

数字检查是一个选项。参见 http://php.net/manual/en/json.constants.php

然而，对范围面积图如何工作的更多理解似乎是问题所在。范围面积图有一个 X 和 2 个 Y 值。绘制范围需要 2 个 Y 值。如果您只是在浏览器中转到 testgraf.php 文件，您的 JSON 结果应该是： [{x: somevalue, y:[low_value, high_value]}]

您可能需要更改 sql 语句以获得另一个 y 值。你可以用它做你想做的事。无论如何，这就是您应该为 php 代码做的事情：

改变

$point = array("x" => $row['CalYear'] , "y" => $row['ResultSet'],"name" => $row['Help']);

至：

$point = array("x" => $row['CalYear'] , "y" => $row['ResultSet', 'some_value'],"name" => $row['Help']);

如果您的 2 Y 值不变，您可能看不到显示的图表线。折线图会更合适吗？

Answer 3

经过反复试验，我找到了以下解决方案：

$result1 = mysqli_query($con, "select (CalYear+1) as CalYear, Year1PercWC, Year1PercBC, calyear as Help FROM table_2 where cat='1' and (CalYear+1)<year(now())");
    while($row = mysqli_fetch_array($result1))
    {        
        $point = array("x" => floatval($row['CalYear']),"y" => array(floatval($row['Year1PercWC']),floatval($row['Year1PercBC'])),"name" => floatval($row['Help']));
        array_push($data_points, $point);        
    }
echo json_encode($data_points);

问题是我需要在数据点数组中为我的 Y 值创建一个数组。在这个数组中，我可以存储图形所需的 2 个值。

完成此操作后，我需要将所有数值转换为 float_val，以便值周围的引号消失。

感谢大家的帮助:)

使用 JSON 为 canvasJS RangeArea 图表加载数据

Loading data with JSON for canvasJS RangeArea Chart

javascript

php

html

json

canvasjs