创建客户端日期时间直方图

Question

我想显示日期时间数组的直方图。

var data = {
    '2015-04-02 11:23:05',
    '2015-05-03 11:20:05',
    '2015-05-04 15:20:55',
    '2015-07-05 13:27:15',
    '2015-07-05 11:20:05',
    '2015-08-04 11:21:05',
    '2015-08-06 17:40:05',
    '2015-08-06 11:20:09',
    '2015-09-02 14:21:05',
    '2015-09-06 11:20:55',
    '2016-02-04 17:27:13',
    '2016-02-07 11:20:05'
};

我以前使用 GoogleChart，但显然还不支持日期。

您建议使用什么 JS 图表库？我想完全控制图表的样式。

Answer 1

检查以下内容：

我使用过 ChartJS 和 Highcharts - 后者功能非常齐全，提供了很多控制。还使用了 Harry Plotter，它非常轻巧且易于使用，但没有提供大量的样式控制。

Answer 2

经过一些研究，我决定使用 GoogleChart 库。

正如我发现的所有其他库一样，它不处理 DateTime 直方图。

因此，我不得不开发一些函数来计算 DateTime 直方图并将其与其他可用图表一起显示（通常 ColumChart）。

这是我的功能：

var createDateTimeHistogram = function(data, timeAggregation, key, min, max)
{
    if(data && data.length)
    {
        var dateTimeHistogram = [];

        var minData = +Infinity;
        var maxData = -Infinity;

        /* Initialization */

        var dateTimes = [];

        for(var i = 0; i < data.length; i++)
        {
            if(data[i][key])
            {
                var value = getDateObjectFromDateTime(data[i][key]).getTime();

                dateTimes.push(value);

                minData = Math.min(minData, value);
                maxData = Math.max(maxData, value);
            }
        }

        min = (min) ? getDateObjectFromDateTime(min).getTime() : minData;
        max = (max) ? getDateObjectFromDateTime(max).getTime() : maxData;

        var interval = timeAggregation * 60 * 1000; //Conversion m -> ms

        var numberOfBeans = (max !== min) ? (1 + ((max - min) / interval)) : 100;

        /** Check **/

        var numberOfBeansMax = 1000;

        numberOfBeans = Math.min(numberOfBeansMax, numberOfBeans);

        interval = (max - min) / (numberOfBeans - 1);

        /* Create dateTimeHistogram array */

        for(var j = 0; j < numberOfBeans; j++)
        {
            dateTimeHistogram[j] = {
                dateTime: new Date(min + (j + 0.5) * interval),
                count: 0
            };
        }

        /* Count */

        for(var i = 0; i < data.length; i++)
        {
            var beanNumber = Math.floor((dateTimes[i] - min) / interval);

            dateTimeHistogram[beanNumber].count += 1;
        }

        /* Return */

        return dateTimeHistogram;
    }
    else
    {
        return false;
    }
};

var getDateObjectFromDateTime = function(dateTime)
{
    if(dateTime)
    {
        var t = dateTime.split(/[- :]/);
        return new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
    }
    else
    {
        return false;
    }
};

希望对您有所帮助 ;)

创建客户端日期时间直方图

Create clientside dateTime histogram

javascript

date

datetime

charts

histogram