1

我尝试从 json 数组创建图表线图形。

 echo json_encode($json_data);

返回

[{"labels": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27],
  "series":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,0,2,0,0]}]

我的jQuery

var url = "/appx/array.php"
   var resp = jQuery.parseJSON(
   jQuery.ajax({
       url: url, 
       async: false,
       dataType: 'json'
   }).responseText
);


var data = resp; // here i dont know how to do

/*var data = labels: ['1', '2', '3','4'], series: [[1, 3, 7, 12]] original data*/

new Chartist.Line("#teamCompletedWidget .ct-chart", data,options);

系列必须是数组的数组

 series[[1,2,3]]

我的PHP代码

for($i=1; $i<=date("d"); $i++){

    $json_array['labels'][] = $i;

    $json_array['series'][] = intval($clicks[$i]);

 }
 echo json_encode($json_data);

返回

{"labels":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],
  "series":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,57,5,17,0,2,0,0,0]}
4

1 回答 1

1

读取 json 响应并将其重新组合成 chartist 期望的格式：

//JSON returned:

var resp ='{"labels":  [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],"series":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,57,5,17,0,2,0,0,0]}';

var JSONObject = JSON.parse(resp);
console.log(JSONObject.labels);
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
console.log(JSONObject.series);
//[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 57, 5, 17, 0, 2, 0, 0, 0]

// In your particular case, your response becomes the JSONObject
// So you would use resp.labels and resp.series 

var data = {"labels":JSONObject.labels, "series":[JSONObject.series]};

// var data = {"labels":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27],"series":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,0,2,0,0]]};


new Chartist.Line('#chart1', data);

结果：

在此处输入图像描述 Codepen：Chartist JSON 数据格式

于 2016-10-28T01:17:07.960 回答