JavaScript — загрузка данных с помощью JSON для 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 (впервые) и не могу найти решение, особенно для вторая часть (у).
Кто-нибудь может сказать мне, какие изменения нужно внести в файл php и / или html?
Спасибо,
Решение
Это, вероятно, должно работать для вас:
json_encode($arr, JSON_NUMERIC_CHECK);
Другие решения
Вероятно, уже слишком поздно для моего ответа, но, как ответил Алекс, вы должны использовать 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-оператор, чтобы получить другое значение у. Вы можете делать то, что вы хотите с этим. В любом случае, это то, что вы должны сделать для своего 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 не меняются, вы можете не увидеть линию графика, отображаемую на экране. Будет ли линейный график более подходящим?
После некоторых проб и ошибок я нашел следующее решение:
$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, чтобы кавычки вокруг значений исчезли.
Спасибо за помощь всем 🙂