Highcharts显示数据但无法显示图表

时间:2017-06-19 08:01:34

标签: javascript php jquery 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]]

1 个答案:

答案 0 :(得分: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']
);