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

avatar 2019年5月10日16:42:12 评论 328 views

昨天有个朋友给了我一个博客,让我给他加一些功能,其中一个是实现网站访问量统计,用折线图显示最近两周的情况。

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

 

前端绘制统计图,最先想到的就是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';
  2. window.chartColors = {
  3.     red: 'rgb(255, 99, 132)',
  4.     orange: 'rgb(255, 159, 64)',
  5.     yellow: 'rgb(255, 205, 86)',
  6.     green: 'rgb(75, 192, 192)',
  7.     blue: 'rgb(54, 162, 235)',
  8.     purple: 'rgb(153, 102, 255)',
  9.     grey: 'rgb(201, 203, 207)'
  10. };
  11. (function (global) {
  12.     var MONTHS = [
  13.         'January',
  14.         'February',
  15.         'March',
  16.         'April',
  17.         'May',
  18.         'June',
  19.         'July',
  20.         'August',
  21.         'September',
  22.         'October',
  23.         'November',
  24.         'December'
  25.     ];
  26.     var COLORS = [
  27.         '#4dc9f6',
  28.         '#f67019',
  29.         '#f53794',
  30.         '#537bc4',
  31.         '#acc236',
  32.         '#166a8f',
  33.         '#00a950',
  34.         '#58595b',
  35.         '#8549ba'
  36.     ];
  37.     var Samples = global.Samples || (global.Samples = {});
  38.     var Color = global.Color;
  39.     Samples.utils = {
  40.         // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
  41.         srand: function (seed) {
  42.             this._seed = seed;
  43.         },
  44.         rand: function (min, max) {
  45.             var seed = this._seed;
  46.             min = min === undefined ? 0 : min;
  47.             max = max === undefined ? 1 : max;
  48.             this._seed = (seed * 9301 + 49297) % 233280;
  49.             return min + (this._seed / 233280) * (max - min);
  50.         },
  51.         numbers: function (config) {
  52.             var cfg = config || {};
  53.             var min = cfg.min || 0;
  54.             var max = cfg.max || 1;
  55.             var from = cfg.from || [];
  56.             var count = cfg.count || 8;
  57.             var decimals = cfg.decimals || 8;
  58.             var continuity = cfg.continuity || 1;
  59.             var dfactor = Math.pow(10, decimals) || 0;
  60.             var data = [];
  61.             var i, value;
  62.             for (i = 0; i < count; ++i) {
  63.                 value = (from[i] || 0) + this.rand(min, max);
  64.                 if (this.rand() <= continuity) {
  65.                     data.push(Math.round(dfactor * value) / dfactor);
  66.                 } else {
  67.                     data.push(null);
  68.                 }
  69.             }
  70.             return data;
  71.         },
  72.         labels: function (config) {
  73.             var cfg = config || {};
  74.             var min = cfg.min || 0;
  75.             var max = cfg.max || 100;
  76.             var count = cfg.count || 8;
  77.             var step = (max - min) / count;
  78.             var decimals = cfg.decimals || 8;
  79.             var dfactor = Math.pow(10, decimals) || 0;
  80.             var prefix = cfg.prefix || '';
  81.             var values = [];
  82.             var i;
  83.             for (i = min; i < max; i += step) {
  84.                 values.push(prefix + Math.round(dfactor * i) / dfactor);
  85.             }
  86.             return values;
  87.         },
  88.         months: function (config) {
  89.             var cfg = config || {};
  90.             var count = cfg.count || 12;
  91.             var section = cfg.section;
  92.             var values = [];
  93.             var i, value;
  94.             for (i = 0; i < count; ++i) {
  95.                 value = MONTHS[Math.ceil(i) % 12];
  96.                 values.push(value.substring(0, section));
  97.             }
  98.             return values;
  99.         },
  100.         color: function (index) {
  101.             return COLORS[index % COLORS.length];
  102.         },
  103.         transparentize: function (color, opacity) {
  104.             var alpha = opacity === undefined ? 0.5 : 1 - opacity;
  105.             return Color(color).alpha(alpha).rgbString();
  106.         }
  107.     };
  108.     // 获得数据,参数date为0表示获得今天的访问量,1表示昨天,2表示前天,以此类推
  109.     window.getViewCount = function (date) {
  110.         var result = 0;
  111.         $.ajax({
  112.             url: "/admin/views/" + date, async: false, success: function (data) {
  113.                 result = data;
  114.             }
  115.         });
  116.         return result;
  117.     };
  118.     window.getViewCount2 = function () {
  119.         return Math.round(Samples.utils.rand(0, 10000));
  120.     };
  121.     // INITIALIZATION
  122.     Samples.utils.srand(Date.now());
  123.     // Google Analytics
  124.     /* eslint-disable */
  125.     if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
  126.         (function (i, s, o, g, r, a, m) {
  127.             i['GoogleAnalyticsObject'] = r;
  128.             i[r] = i[r] || function () {
  129.                 (i[r].q = i[r].q || []).push(arguments)
  130.             }, i[r].l = 1 * new Date();
  131.             a = s.createElement(o),
  132.                 m = s.getElementsByTagName(o)[0];
  133.             a.async = 1;
  134.             a.src = g;
  135.             m.parentNode.insertBefore(a, m)
  136.         })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
  137.         ga('create', 'UA-28909194-3', 'auto');
  138.         ga('send', 'pageview');
  139.     }
  140.     /* eslint-enable */
  141. }(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.        })();
  22.     var config = {
  23.         type: 'line',
  24.         data: {
  25.             labels: DAYS,
  26.             datasets: [{
  27.                 label: '访问量',
  28.                 backgroundColor: window.chartColors.red,
  29.                 borderColor: window.chartColors.red,
  30.                 data: [
  31.                     getViewCount(13),
  32.                        getViewCount(12),
  33.                        getViewCount(11),
  34.                        getViewCount(10),
  35.                        getViewCount(9),
  36.                        getViewCount(8),
  37.                        getViewCount(7),
  38.                        getViewCount(6),
  39.                        getViewCount(5),
  40.                        getViewCount(4),
  41.                        getViewCount(3),
  42.                        getViewCount(2),
  43.                        getViewCount(1),
  44.                        getViewCount(0)
  45.                 ],
  46.                 fill: false,
  47.             }]
  48.         },
  49.         options: {
  50.             responsive: true,
  51.             title: {
  52.                 display: true,
  53.                 text: '两周内访问量统计'
  54.             },
  55.             tooltips: {
  56.                 mode: 'index',
  57.                 intersect: false,
  58.             },
  59.             hover: {
  60.                 mode: 'nearest',
  61.                 intersect: true
  62.             },
  63.             scales: {
  64.                 xAxes: [{
  65.                     display: true,
  66.                     scaleLabel: {
  67.                         display: true,
  68.                         labelString: '日期'
  69.                     }
  70.                 }],
  71.                 yAxes: [{
  72.                     display: true,
  73.                     scaleLabel: {
  74.                         display: true,
  75.                         labelString: '访问量'
  76.                     },
  77.                        ticks: {
  78.                            callback: function(value, index, values) {
  79.                                return value;
  80.                            }
  81.                        },
  82.                 }]
  83.             }
  84.         }
  85.     };
  86.     window.onload = function() {
  87.         var ctx = document.getElementById('canvas').getContext('2d');
  88.         window.myLine = new Chart(ctx, config);
  89.     };
  90. </script>

 

 

历史上的今天
五月
10
  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: