2017-06-19 72 views
3

我正在尝试显示动态高图表,我们可以按年,月和日来更改图表。Highcharts显示数据但无法显示图表

我已经成功,我可以根据每次更改X轴,通过Json数组的数据也成功传递,但图表不出来。

的Javascript:

$.ajax({ 
     url: 'content/getChart.php', 
     type: "POST", 
     async: true, 
     dataType: 'json', 
     data: { 
      type: type, 
      part: part, 
      year: year_val, 
      month: month_val, 
      day: day_val, 
      days_in_month: days_in_month 
     }, 
     success: function (data){ 
      var data_array = []; 
      $.each(data, function(i, val) { 
       //data_array.push({x: val.time * 1000, y: val.value}); //first result 
       data_array.push(val.time * 1000, val.value); 
      }); 
      purchase_chart.series[0].setData(data_array); 
      console.log(data_array); 
     } 
    }); 

PHP:

$purchase_array = array(); 
$array_test = array(); 
$resQry = ""; 
for($i = $start; $i <= $end; $i++){ 
    $resQry = ""; 
    $resQry .= "SELECT COUNT(*) AS `total_sum`"; 
    $resQry .= "FROM `purchase`"; 
    if($type == "daily" && $year != 0 && $month != 0 && $day != 0){ 
     $resQry .= "WHERE YEAR(`purchase_date`) = '$year' AND MONTH(`purchase_date`) = '$month' AND DAY(`purchase_date`) = '$i' "; 
     $timemk = mktime(0, 0, 0, $month, $i, $year); 
    } 
    else if($type == "monthly" && $year != 0 && $month != 0){ 
     $resQry .= "WHERE YEAR(`purchase_date`) = '$year' AND MONTH(`purchase_date`) = '$i' "; 
     $timemk = mktime(0, 0, 0, $i, 0, $year); 
    } 
    else if($type == "yearly" && $year != 0){ 
     $resQry .= "WHERE YEAR(`purchase_date`) = '$i' "; 
     $timemk = mktime(0, 0, 0, 0, 0, $i); 
    } 
    $resQry .= "ORDER BY `purchase_date`"; 
    $result = $conn->query($resQry); 
    $row = $result->fetch_array(); 
    $purchase_array[$timemk]['time'][] = $timemk; 
    $purchase_array[$timemk]['value'][] = (int)$row['total_sum']; 
} 
$conn->close(); 
echo(json_encode($purchase_array)); 

我已经尝试过很多办法可用,但只能使我只要这一点。

输出: The one that i've circled has value of 12, if i hover on the X axis i can see the value shown 12 with it's correct date

JSON输出:

[{"x": 1385766000000,"y": [0]}, 
{"x": 1417302000000,"y": [0]}, 
{"x": 1448838000000,"y": [0]}, 
{"x": 1480460400000,"y": [12]}, 
{"x": 1511996400000,"y": [0]}, 
{"x": 1543532400000,"y": [0]}, 
{"x": 1575068400000,"y": [0}] 

结果还是一样的旧代码。但是,如果我手动放置json数组,它会给我更高的错误#15。

以及如果我把阵列这样的(手动),图表显示

[[1385766000000,0], 
[1417302000000,0], 
[1448838000000,0], 
[1480460400000,12], 
[1511996400000,0], 
[1543532400000,0], 
[1575068400000,0]] 
+0

什么是被带到了错误?你有没有试图通过DOM检查它(它可能是一个Z索引问题)? – FieryCat

+0

我会建议打开控制台。在大多数情况下,Highchart会通过问题描述链接将错误推入其中,并解决问题。 – FieryCat

回答

1

尝试改变.setData(data_array);到下一行:

purchase_chart.series[0].setData([data_array], true); 

它会自动触发图表的重绘行动。

而且,接下来的选项可能会有所帮助:

// Front-End: change datetime to milliseconds 
data_array.push([val.time * 1000, val.value]); 

// Back-End [1]: submit time; remove convertation to string 
$timemk = mktime(...); 

// Back-End [2]: order dates; Highchart will stack when data is not ordered 
$resQry .= "ORDER BY `purchase_date`"; 

// Back-End [3]: remove array bind for values 
$purchase_array[$timemk] = array(
    'time' => $timemk, 
    'value' => (int) $row['total_sum'] 
); 
+0

我试过这个,仍然不能正常工作 – ghost123

+0

@ ghost123,你能分享你的服务器响应吗? – FieryCat

+0

我已经根据您的更新更新了我的帖子 – ghost123