Question

我尝试使用CanvasJS和PHP创建范围区域图表以从数据库加载数据。

我创建了php并从数据库返回值。这是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);

?>

结果：

[{＆＃34; X＆＃34;：＆＃34; 2007＆＃34;＆＃34; Y＆＃34;：＆＃34; [35.94,35.94]＆＃34;＆＃34;姓名＆＃34;：＆＃34; Sessies：2006＆＃34;}，{＆＃34; x＆＃34;：＆＃34; 2008＆＃34;，＆＃34; y＆＃34;：＆＃34; [ 27.67,27.67]＆＃34;，＆＃34;名称＆＃34;：＆＃34; Sessies：2007＆＃34;}，...，...]

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

[{＆＃34; x＆＃34;：2007，＆＃34; y＆＃34;：[35.94,35.94]，＆＃34; name＆＃34;：＆＃34; Sessies 2006＆＃34;} ，{＆＃34; x＆＃34;：2008，＆＃34; y＆＃34;：[27.67,27.67]，＆＃34; name＆＃34;：＆＃34; Sessies 2007＆＃34;}，.. 。，...]

<!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（第一次）时真的很新，并且可以＆＃ 39;找到解决方案，尤其是第二部分（y）。

有谁能告诉我对php和/或html文件做出哪些改编？

THX，

Answer 1

这应该对你有用：

json_encode($arr, JSON_NUMERIC_CHECK);

Answer 2

对我的回答来说可能有点太迟了但是像Alex回答的那样，你应该使用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图表加载数据

3 个答案: