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

用户3354941

我正在尝试使用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文件进行哪些修改?

谢谢,

用户3354941

经过一番尝试和错误后,我找到了以下解决方案:

$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,以便值周围的引号消失。

谢谢大家的帮助:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用 JSON 数据创建 CanvasJS 图表?

来自分类Dev

Zing图表加载webapi Json数据问题

来自分类Dev

CanvasJS:使用data.php,json编码和ajax(带宽计量器)使图表动态化

来自分类Dev

无法加载图表数据

来自分类Dev

转换d3图表以从变量内的json加载数据

来自分类Dev

Angular Js加载图表数据

来自分类Dev

使用ng-repeat在<div>内创建多个CanvasJS图表

来自分类Dev

在nvd3 multiBar图表示例(JSON格式)中使用d3.csv加载csv数据

来自分类Dev

在nvd3 multiBar图表示例(JSON格式)中使用d3.csv加载csv数据

来自分类Dev

如何使用python flask应用程序在d3js图表中动态加载json数据

来自分类Dev

图表无法正确呈现,canvasjs

来自分类Dev

使用JSON的Google图表

来自分类Dev

从 JSON 加载图表 - 更改 JSON 数组的格式

来自分类Dev

将本地 JSON 数据加载到图表中 (JSON+Highcharts)

来自分类Dev

Google图表和JSON数据

来自分类Dev

在图表中显示json数据

来自分类Dev

如何使用JSON中的动态数据使用Google图表

来自分类Dev

等待渲染图表,直到数据加载完毕

来自分类Dev

使用json数据时Google图表为空

来自分类Dev

使用json数据时Google图表为空

来自分类Dev

使用 JSON 将数据从 PHP 数组传递到 Highcharts 图表

来自分类Dev

如何在Google可视化图表上加载JSON数据?

来自分类Dev

CanvasJS与Excel兼容并制作图表吗?

来自分类Dev

渲染 Canvasjs 图表后更改 div 边框

来自分类Dev

canvasjs 不在图表中显示条形

来自分类Dev

如何在 canvasjs 图表上隐藏间隔?

来自分类Dev

CanvasJS 图表无法使用幻灯片/轮播容器正确呈现

来自分类Dev

异步加载Google图表?

来自分类Dev

页面加载时的谷歌图表图表视图

Related 相关文章

热门标签

归档