微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

c3折线图中通过json的时间序列

如何解决c3折线图中通过json的时间序列

我使用d3 / c3库创建了一个图表,其中有两条线代表时间序列:y轴上的yr0和yr0,x是x轴的数据。 这些行由我在PHP生成的Json Feed提供。 但是,提要的格式不正确。我需要在PHP脚本中进行哪些更改才能使其正常工作?

$data = array();


     for ($x = 0; $x < MysqLi_num_rows($query); $x++) {
         $data[]= MysqLi_fetch_assoc($query);
     }


 echo json_encode(array_values($data)); 

JSON结果:

[{"wk":"1","wk51":"18","wk52":"27","wk1":"52","wk2":"73","wk3":"93","wk4":"81","wk5":"69","wk6":"76","wk7":"87","wk8":"81","wk9":"82","wk10":"102","wk11":"84","wk12":"66"},{"wk":"1","wk51":"133","wk52":"121","wk1":"38","wk2":"51","wk3":"66","wk4":"58","wk5":"46","wk6":"81","wk7":"74","wk8":"69","wk9":"74","wk10":"126","wk11":"116","wk12":"90"},"wk51":"70","wk52":"68","wk1":"127","wk2":"136","wk3":"204","wk4":"199","wk5":"196","wk6":"208","wk7":"206","wk8":"206","wk9":"213","wk10":"213","wk11":"217","wk12":"226"},"wk51":"78","wk52":"86","wk1":"79","wk2":"122","wk3":"130","wk4":"137","wk5":"161","wk6":"171","wk7":"149","wk8":"137","wk9":"136","wk10":"148","wk11":"164","wk12":"179"},"wk51":null,"wk52":null,"wk1":"85","wk2":"80","wk3":"87","wk4":"86","wk5":"92","wk6":"94","wk7":"101","wk8":"106","wk9":"133","wk10":"136","wk11":"111","wk12":"100"}]

JavaScript

var chart = c3.generate({bindto:"#chart_yr",data:{url:"/sNowdepth/get_sNowdepth2.PHP?res_id=<?PHP echo $res_id; ?>&his=1&token=<?PHP echo $token; ?>",mimeType:"json",types:{yr0:"area-spline",yr1:"area-spline"},keys:{x:"x",value:["yr0","yr1"]},axes:{yr0:"y",yr1:"y"},names:{yr0:"2018",yr1:"2019"}},color:{pattern:["#ff7f0e","#FF3D0D"]},grid: {
        y: {
            lines: [
                {value: 0,text: '0-line'}
            ]
        }
    },axis:{x:{type:"category"},y:{max:300,min:0,label:"sNowdepth in cm"},y2:{max:10,min:-10,label:"temperature in degrees Celcius",show:!0}}});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。