jqplot 每小时事件数答案

【问题标题】：jqplot number of events per hourjqplot 每小时事件数
【发布时间】：2020-06-20 21:30:46
【问题描述】：

我有一个从中获取的数组

<div style='hidden' id=dataHours data-hours='{"08":3,"10":3,"11":1,"12":1,"14":2,"16":2,"18":1}'>

转成json数组。

我想使用 jqplot 创建一个矩阵，其中 x 轴为小时，y 轴为事件数。

我目前正在尝试此代码：

        var json_data = $('#dataHours').data('hours');
    var dateHoursArray = $.map(json_data, function(value, index) {
                return [[index,value]];
            });

    
    console.log(dateHoursArray);
    $.jqplot('maindiv', dateHoursArray, {
        legend: {
            show:true,
            location : 'ne'
        },
        title: 'Tickets created per hour',
        animate: true,
        animateReplot: true,
        axes: {
            xaxis: {
                label:'Hours',
                autoscale: true,
                min:0,
                max:23,
                rendererOptions: {
                    tickRenderer:$.jqplot.CanvasAxisTickRenderer
                },
                tickOptions: {
                    formatString:'%.0f'
                }
            },
            yaxis: {
                label:'Tickets',
                autoscale: true
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: false
        },
        grid: {
            gridLineColor: '#cccccc',
            background: '#fff',
            borderColor: '#000',
            borderWidth: 2.0,
            shadow: false,
        }
    });

但它并没有像我期望的那样工作。

有人吗？

【问题讨论】：

标签： javascript jquery jqplot

【解决方案1】：

逻辑。

创建了一个 24 小时的数组并遍历数组以增加匹配时间的计数器：

    /*
Calculate max tickets per hour on 24 hours using tickets within specific period
*/
$date_sums = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; // 24 hours of 0
if(!empty($ticket_array)) {
    foreach ($ticket_array AS $ticket) {
        $hour = date("G", strtotime($ticket["ticket_created_date"]));
        if (!empty($ticket["ticket_created_date"])) {
            $date_sums[$hour] += 1;
        } // end if
    } // end foreach
    foreach ($date_sums AS $sum => $value) {
        $dates_sum[] = $value;
    }
} // end if

然后对 base64_encoded json_encoded $dates_sum 数组进行 Javascript 处理：

        var json_data = $('#dataHours').data('hours');
    var json_data = JSON.parse(atob(json_data));  //base64 decode and make into javascript object
    var dateHoursArray = [Array.from(json_data)];

在 Array.from 的最后一行花了我一些试验和错误；）

【讨论】：