Highcharts-即使没有价值也会显示所有日子

时间:2015-05-11 05:13:43

标签: php jquery highcharts

我使用PHP和MySQL来获取在选定时间段内每天完成的订单总数,然后使用PHP将它们保存在* .csv文件中。我从csv文件生成图表,一切正常,但我需要包括没有订单的日子。 * .csv文件内容是这样的:

1,05-01
1,05-02
2,05-04
1,05-06

因此,在图表上,它们显示为5月1日的1个订单,5月2日的5个订单,然后5月3日的订单被跳过 - 我需要在图表上显示它的值为0.可以用jQuery / highcharts(我没有太多的javascript经验)或者我应该编辑PHP来创建包含这些值的文件,如下所示:

1,05-01
1,05-02
0,05-03
2,05-04
0,05-05
1,05-06

我使用以下PHP代码保存文件:

$result = mysqli_query($con,"$query");
        $fp = fopen('data/temp.csv', 'w');
        if ($fp && $result) {
            while ($row = $result->fetch_array(MYSQLI_NUM)) {
                fputcsv($fp, array_values($row));
            }
        }

以下脚本生成图表:

var myCategories = [];
var myData = [];
var myChart;

$(document).ready(function() {
    var options = {
    chart: {
        renderTo: 'chart-container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'Orders received in selected days'
    },
    xAxis: {
        title: {text: 'Date'},
        categories: []
    },
    yAxis: {
        title: {
            text: 'Orders'
        }
    },
    series: []
    };
    $.get('data/temp.csv', function(data) {
        var lines = data.split('\n').slice(0, -1); //generated csv file has \n after last entry so there is always an empty line I have to delete
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            myCategories.push(items[1]);
            myData.push(parseInt(items[0]));
        });
        options.xAxis.categories = myCategories;
        options.series = [{ data: myData }];
        myChart = new Highcharts.Chart(options);
    });
});

1 个答案:

答案 0 :(得分:2)

我发现只有解决方案是在MySQL端创建一些疯狂的查询(我更愿意在PHP中处理这个逻辑)似乎用HighCharts无法做到这一点,所以最后我修改了我的PHP代码一点点添加一些额外的循环。如果有人感兴趣,现在看起来像这样:

$result2 = mysqli_query($con,"$query2");
$fp = fopen('data/temp.csv', 'w');
$dayCompare=date("n-d", strtotime($theDay));    //I know which day is the first one selected so I save it as variable #theDay
while ($row = mysqli_fetch_array($result2)) {
    if ($row['Date'] !== $dayCompare){
        while ($row['Date'] !== $dayCompare){ //This "while" keeps on looping till the date from database matches the day
            fputcsv($fp, array('0,'.$dayCompare));
            $theDay= date("Y/m/d", strtotime($theDay . "+1 day"));
            $dayCompare=date("n-d", strtotime($theDay));
        }
    } //Rest of the code is to be executed when dates match
    fputcsv($fp, array($row['Orders'].",".$row['Date']));
    $theDay= date("Y/m/d", strtotime($theDay . "+1 day"));
    $dayCompare=date("n-d", strtotime($theDay));
}
for ($theDay; $theDay <= $lastDay; strtotime($theDay . "+1 day")) { //I added a "for" loop to fill in the empty days if the day of last order is earlier than the last day selected/current day.
    fputcsv($fp, array('0,'.$dayCompare));
    $theDay= date("Y/m/d", strtotime($theDay . "+1 day"));
    $dayCompare=date("n-d", strtotime($theDay));
}

这会产生样本输出:

"1,5-01"
"1,5-02"
"0,5-03"
"2,5-04"
"0,5-05"
"1,5-06"

它现在给我的唯一问题是将数据保存在带引号的* .csv文件中,但我通过修改* .js文件并使用我的脚本更改此部分来解决它:

$.each(lines, function(lineNo, line) {
    var items = line.split(',');
    myCategories.push(items[1]);
    myData.push(parseInt(items[0]));
});

对此:

    $.each(lines, function(lineNo, line) {
        var items = line.split(',');
        myCategories.push(items[1].replace(/"/g,""));
        myData.push(parseInt(items[0].replace(/"/g,"")));
    });

由于修剪引号,输出符合预期。带日期的变量仍然相当精细,但似乎必须是这样的,因为PHP在识别数学方程式的短日期时有问题,而且我也希望有一天能修改那个三重循环,但这至少要等到下一次部署。

最后,我添加了一个循环来循环显示选定的最后一天晚于最后一个订单日的空白日期,例如,如果选择了5月9日,最后一个订单是7日,则会有2行为第8和第9添加0值。