chartjs实现最近两周网站访问量折线图

分手后的思念是犯贱 2021-12-09 06:37 358阅读 0赞

Chart.js的效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
前端绘制统计图，最先想到的就是Chart.js，[直达官网][Link 1]  
折线图参考了官网的例子：[点此直达][Link 2]

### 具体实现如下 ###

在要展示chart.js图的html页面引入库文件

前面两个直接用cdn，后面那个 utils.js 代码如下(可以在上面那个例子里下载，[点此直达][Link 3])

修改了里面第127行的获得数据的代码实现，例子里的是获得随机值，这里我们需要从数据库查询

### 第一步：修改utils.js文件里的126行到135行之间的内容 ###

完整的 utils.js 代码如下，主要关注 126-135行

'use strict';
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };
    (function (global) {
        var MONTHS = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ];
        var COLORS = [
            '#4dc9f6',
            '#f67019',
            '#f53794',
            '#537bc4',
            '#acc236',
            '#166a8f',
            '#00a950',
            '#58595b',
            '#8549ba'
        ];
        var Samples = global.Samples || (global.Samples = {});
        var Color = global.Color;
        Samples.utils = {
            // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
            srand: function (seed) {
                this._seed = seed;
            },
            rand: function (min, max) {
                var seed = this._seed;
                min = min === undefined ? 0 : min;
                max = max === undefined ? 1 : max;
                this._seed = (seed * 9301 + 49297) % 233280;
                return min + (this._seed / 233280) * (max - min);
            },
            numbers: function (config) {
                var cfg = config || {};
                var min = cfg.min || 0;
                var max = cfg.max || 1;
                var from = cfg.from || [];
                var count = cfg.count || 8;
                var decimals = cfg.decimals || 8;
                var continuity = cfg.continuity || 1;
                var dfactor = Math.pow(10, decimals) || 0;
                var data = [];
                var i, value;
                for (i = 0; i < count; ++i) {
                    value = (from[i] || 0) + this.rand(min, max);
                    if (this.rand() <= continuity) {
                        data.push(Math.round(dfactor * value) / dfactor);
                    } else {
                        data.push(null);
                    }
                }
                return data;
            },
            labels: function (config) {
                var cfg = config || {};
                var min = cfg.min || 0;
                var max = cfg.max || 100;
                var count = cfg.count || 8;
                var step = (max - min) / count;
                var decimals = cfg.decimals || 8;
                var dfactor = Math.pow(10, decimals) || 0;
                var prefix = cfg.prefix || '';
                var values = [];
                var i;
                for (i = min; i < max; i += step) {
                    values.push(prefix + Math.round(dfactor * i) / dfactor);
                }
                return values;
            },
            months: function (config) {
                var cfg = config || {};
                var count = cfg.count || 12;
                var section = cfg.section;
                var values = [];
                var i, value;
                for (i = 0; i < count; ++i) {
                    value = MONTHS[Math.ceil(i) % 12];
                    values.push(value.substring(0, section));
                }
                return values;
            },
            color: function (index) {
                return COLORS[index % COLORS.length];
            },
            transparentize: function (color, opacity) {
                var alpha = opacity === undefined ? 0.5 : 1 - opacity;
                return Color(color).alpha(alpha).rgbString();
            }
        };
        // 获得数据，参数date为0表示获得今天的访问量，1表示昨天，2表示前天，以此类推  ，下面的getViewCount是定义的function名称，用于从我们自己的数据库来查数据给chart.js用于图标显示
        window.getViewCount = function (date) {
            var result = 0;
            $.ajax({
                url: "/admin/views/" + date, async: false, success: function (data) {
                    result = data;
                }
            });
            return result;
        };
        //下面定义了一个randomScalingFactor 的function，这个function的作用是返回随机数据给chart.js用于图表显示，这是官网默认的demo，我们用不到
        window.randomScalingFactor = function () {
            return Math.round(Samples.utils.rand(0, 10000));
        };
        // INITIALIZATION
        Samples.utils.srand(Date.now());
        // Google Analytics
        /* eslint-disable */
        if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-28909194-3', 'auto');
            ga('send', 'pageview');
        }
        /* eslint-enable */
    }(this));

### 第二步：写HTML代码 ###

在我们需要引入chart.js文件的html页面的body标签里面加上

### 第三步：在html页面里面加上js代码部分 ###

然后运行项目就可以访问该html页面了，就可以看到chart.js展示的折线图了  
本文转载自;  
[https://liuyanzhao.com/9507.html][https_liuyanzhao.com_9507.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20211208/bdb141650f104d538d602ff10bfea34a.png
[Link 1]: https://liuyanzhao.com/wp-content/themes/begin/inc/go.php?url=https://www.chartjs.org/
[Link 2]: https://www.chartjs.org/samples/latest/charts/line/basic.html
[Link 3]: https://www.chartjs.org/samples/latest/utils.js
[https_liuyanzhao.com_9507.html]: https://liuyanzhao.com/9507.html