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

avatar 2019年05月10日16:42:12 6 5566 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
昨天有个朋友给了我一个博客，让我给他加一些功能，其中一个是实现网站访问量统计，用折线图显示最近两周的情况。

今天上午写了一下，效果图如下





前端绘制统计图，最先想到的就是Chart.js，直达官网

折线图参考了官网的例子：点此直达



具体实现如下

前端代码


1.引入库
  1. <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
  2. <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js" ></script>
  3. <script src="/js/utils.js" ></script>

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

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

完整的 utils.js 代码如下，主要关注 126-135行
  1. 'use strict';
  3. window.chartColors = {
  4.     red: 'rgb(255, 99, 132)',
  5.     orange: 'rgb(255, 159, 64)',
  6.     yellow: 'rgb(255, 205, 86)',
  7.     green: 'rgb(75, 192, 192)',
  8.     blue: 'rgb(54, 162, 235)',
  9.     purple: 'rgb(153, 102, 255)',
  10.     grey: 'rgb(201, 203, 207)'
  11. };
  13. (function (global) {
  14.     var MONTHS = [
  15.         'January',
  16.         'February',
  17.         'March',
  18.         'April',
  19.         'May',
  20.         'June',
  21.         'July',
  22.         'August',
  23.         'September',
  24.         'October',
  25.         'November',
  26.         'December'
  27.     ];
  29.     var COLORS = [
  30.         '#4dc9f6',
  31.         '#f67019',
  32.         '#f53794',
  33.         '#537bc4',
  34.         '#acc236',
  35.         '#166a8f',
  36.         '#00a950',
  37.         '#58595b',
  38.         '#8549ba'
  39.     ];
  41.     var Samples = global.Samples || (global.Samples = {});
  42.     var Color = global.Color;
  44.     Samples.utils = {
  45.         // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
  46.         srand: function (seed) {
  47.             this._seed = seed;
  48.         },
  50.         rand: function (min, max) {
  51.             var seed = this._seed;
  52.             min = min === undefined ? 0 : min;
  53.             max = max === undefined ? 1 : max;
  54.             this._seed = (seed * 9301 + 49297) % 233280;
  55.             return min + (this._seed / 233280) * (max - min);
  56.         },
  58.         numbers: function (config) {
  59.             var cfg = config || {};
  60.             var min = cfg.min || 0;
  61.             var max = cfg.max || 1;
  62.             var from = cfg.from || [];
  63.             var count = cfg.count || 8;
  64.             var decimals = cfg.decimals || 8;
  65.             var continuity = cfg.continuity || 1;
  66.             var dfactor = Math.pow(10, decimals) || 0;
  67.             var data = [];
  68.             var i, value;
  70.             for (i = 0; i < count; ++i) {
  71.                 value = (from[i] || 0) + this.rand(min, max);
  72.                 if (this.rand() <= continuity) {
  73.                     data.push(Math.round(dfactor * value) / dfactor);
  74.                 } else {
  75.                     data.push(null);
  76.                 }
  77.             }
  79.             return data;
  80.         },
  82.         labels: function (config) {
  83.             var cfg = config || {};
  84.             var min = cfg.min || 0;
  85.             var max = cfg.max || 100;
  86.             var count = cfg.count || 8;
  87.             var step = (max - min) / count;
  88.             var decimals = cfg.decimals || 8;
  89.             var dfactor = Math.pow(10, decimals) || 0;
  90.             var prefix = cfg.prefix || '';
  91.             var values = [];
  92.             var i;
  94.             for (i = min; i < max; i += step) {
  95.                 values.push(prefix + Math.round(dfactor * i) / dfactor);
  96.             }
  98.             return values;
  99.         },
  101.         months: function (config) {
  102.             var cfg = config || {};
  103.             var count = cfg.count || 12;
  104.             var section = cfg.section;
  105.             var values = [];
  106.             var i, value;
  108.             for (i = 0; i < count; ++i) {
  109.                 value = MONTHS[Math.ceil(i) % 12];
  110.                 values.push(value.substring(0, section));
  111.             }
  113.             return values;
  114.         },
  116.         color: function (index) {
  117.             return COLORS[index % COLORS.length];
  118.         },
  120.         transparentize: function (color, opacity) {
  121.             var alpha = opacity === undefined ? 0.5 : 1 - opacity;
  122.             return Color(color).alpha(alpha).rgbString();
  123.         }
  124.     };
  126.     // 获得数据，参数date为0表示获得今天的访问量，1表示昨天，2表示前天，以此类推
  127.     window.getViewCount = function (date) {
  128.         var result = 0;
  129.         $.ajax({
  130.             url: "/admin/views/" + date, async: false, success: function (data) {
  131.                 result = data;
  132.             }
  133.         });
  134.         return result;
  135.     };
  137.     window.getViewCount2 = function () {
  138.         return Math.round(Samples.utils.rand(0, 10000));
  139.     };
  141.     // INITIALIZATION
  143.     Samples.utils.srand(Date.now());
  145.     // Google Analytics
  146.     /* eslint-disable */
  147.     if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
  148.         (function (i, s, o, g, r, a, m) {
  149.             i['GoogleAnalyticsObject'] = r;
  150.             i[r] = i[r] || function () {
  151.                 (i[r].q = i[r].q || []).push(arguments)
  152.             }, i[r].l = 1 * new Date();
  153.             a = s.createElement(o),
  154.                 m = s.getElementsByTagName(o)[0];
  155.             a.async = 1;
  156.             a.src = g;
  157.             m.parentNode.insertBefore(a, m)
  158.         })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
  159.         ga('create', 'UA-28909194-3', 'auto');
  160.         ga('send', 'pageview');
  161.     }
  162.     /* eslint-enable */
  164. }(this));



2.HTML代码
  1. <div style="width:100%;">
  2.        <canvas id="canvas"></canvas>
  3. </div>



3.js 代码
  1. <script>
  2.     // 获取最近14天时间
  3.        var DAYS = (function(){
  4.          // 14天
  5.          var arr = [];
  6.          var newdate = new Date();//当前日期
  7.          var year = newdate.getFullYear();//当前年份
  8.          var month = newdate.getMonth()+1;//当前月份
  9.          var now = newdate.getTime();//今天时间戳
  10.          var nowDay = newdate.getDate();//今天是一个月的第几天(1-32)
  11.          var oneDayTime = 60*60*24*1000;
  12.          for(var i=0; i<14; i++){
  13.              var d = new Date(now - i*oneDayTime);
  14.              var dd = d.getDate();
  15.              if((nowDay -i) < 1) {
  16.                month = d.getMonth()+1;
  17.              }
  18.              arr.push(year+'-'+month+'-'+(dd < 10 ? '0' + dd : dd + ''));
  19.          }
  20.          return arr.reverse();
  21.        })();
  23.     var config = {
  24.         type: 'line',
  25.         data: {
  26.             labels: DAYS,
  27.             datasets: [{
  28.                 label: '访问量',
  29.                 backgroundColor: window.chartColors.red,
  30.                 borderColor: window.chartColors.red,
  31.                 data: [
  32.                     getViewCount(13),
  33.                        getViewCount(12),
  34.                        getViewCount(11),
  35.                        getViewCount(10),
  36.                        getViewCount(9),
  37.                        getViewCount(8),
  38.                        getViewCount(7),
  39.                        getViewCount(6),
  40.                        getViewCount(5),
  41.                        getViewCount(4),
  42.                        getViewCount(3),
  43.                        getViewCount(2),
  44.                        getViewCount(1),
  45.                        getViewCount(0)
  46.                 ],
  47.                 fill: false,
  48.             }]
  49.         },
  50.         options: {
  51.             responsive: true,
  52.             title: {
  53.                 display: true,
  54.                 text: '两周内访问量统计'
  55.             },
  56.             tooltips: {
  57.                 mode: 'index',
  58.                 intersect: false,
  59.             },
  60.             hover: {
  61.                 mode: 'nearest',
  62.                 intersect: true
  63.             },
  64.             scales: {
  65.                 xAxes: [{
  66.                     display: true,
  67.                     scaleLabel: {
  68.                         display: true,
  69.                         labelString: '日期'
  70.                     }
  71.                 }],
  72.                 yAxes: [{
  73.                     display: true,
  74.                     scaleLabel: {
  75.                         display: true,
  76.                         labelString: '访问量'
  77.                     },
  78.                        ticks: {
  79.                            callback: function(value, index, values) {
  80.                                return value;
  81.                            }
  82.                        },
  83.                 }]
  84.             }
  85.         }
  86.     };
  88.     window.onload = function() {
  89.         var ctx = document.getElementById('canvas').getContext('2d');
  90.         window.myLine = new Chart(ctx, config);
  91.     };
  92. </script>



历史上的今天
五月
10日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0