使用JSON加載數據的canvasJS RangeArea圖表
[英]Loading data with JSON for canvasJS RangeArea Chart
問題描述
我正在嘗試使用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);
?>
結果：
[{“ 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的新手（有史以來第一次），並且找不到解決方案，尤其是對於第二部分（y）。
誰能告訴我要對php和/或html文件進行哪些修改？
謝謝，
3 個解決方案
解決方案1
0 2015-01-20 13:40:49
這可能應該為您工作：
json_encode($arr, JSON_NUMERIC_CHECK);
解決方案2
0 2015-02-21 02:17:38
我的回答可能為時已晚，但像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值不變，則可能看不到顯示的圖形線。 折線圖會更合適嗎？
解決方案3
0 已采納 2015-02-26 10:57:12
經過反復試驗，我發現以下解決方案：
$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，以使數值周圍的引號消失。
謝謝大家的幫助:)
CanvasJS：使用data.php，json編碼和ajax（帶寬計量器）使圖表動態化
[英]CanvasJS: Making a chart dynamic with data.php, json encode and ajax(bandwidth meters)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.