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

Chart.js的效果图如下：

前端绘制统计图，最先想到的就是Chart.js，直达官网
折线图参考了官网的例子：点此直达

具体实现如下

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

<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js" ></script>
<script src="/js/utils.js" ></script>    //这个utils文件下面会给出的

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

修改了里面第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));};// INITIALIZATIONSamples.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标签里面加上

<div style="width:100%;"><canvas id="canvas"></canvas>
</div>

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

<script>// 获取最近14天时间var DAYS = (function(){// 14天var arr = [];var newdate = new Date();//当前日期var year = newdate.getFullYear();//当前年份var month = newdate.getMonth()+1;//当前月份var now = newdate.getTime();//今天时间戳var nowDay = newdate.getDate();//今天是一个月的第几天(1-32)var oneDayTime = 60*60*24*1000;for(var i=0; i<14; i++){var d = new Date(now - i*oneDayTime);var dd = d.getDate();if((nowDay -i) < 1) {month = d.getMonth()+1;}arr.push(year+'-'+month+'-'+(dd < 10 ? '0' + dd : dd + ''));}return arr.reverse();})();var config = {type: 'line',data: {labels: DAYS,datasets: [{label: '访问量',backgroundColor: window.chartColors.red,borderColor: window.chartColors.red,data: [getViewCount(13),getViewCount(12),getViewCount(11),getViewCount(10),getViewCount(9),getViewCount(8),getViewCount(7),getViewCount(6),getViewCount(5),getViewCount(4),getViewCount(3),getViewCount(2),getViewCount(1),getViewCount(0)],fill: false,}]},options: {responsive: true,title: {display: true,text: '两周内访问量统计'},tooltips: {mode: 'index',intersect: false,},hover: {mode: 'nearest',intersect: true},scales: {xAxes: [{display: true,scaleLabel: {display: true,labelString: '日期'}}],yAxes: [{display: true,scaleLabel: {display: true,labelString: '访问量'},ticks: {callback: function(value, index, values) {return value;}},}]}}};window.onload = function() {var ctx = document.getElementById('canvas').getContext('2d');window.myLine = new Chart(ctx, config);};
</script>

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

chartjs实现最近两周网站访问量折线图相关推荐

python对Excel表格的指定两列数据画折线图
Excel表格数据如下: # -*- coding:utf-8 -*- import numpy as np from matplotlib import pyplot as plt import x ...
Echarts—折线图动态获取数据示例（java版本）
最终效果饼状图:饼状图示例,使劲点我!!! 柱状图:柱状图实例,使劲点我!!! 步骤:准备一个dom-->获取dom节点-->初始化-->绘制图表-->渲染数据 html代码 ...
坐标轴删了怎么恢复_EXCEL表折线图已经删掉的图例怎么恢复 - 卡饭网
excel里折线图的横坐标怎样设置? excel里折线图的横坐标怎样设置? excel里折线图的横坐标怎样设置?下面小编带来了设置方法,希望对大家有所帮助. 设置方法: 以下面这个年份和销售量的数据为 ...
数据可视化工具之常见的折线图与折现面积图分析
折线图是图表界里最简单也是最实用的,越是简单的图表,越容易被人忽视.小编就为大家介绍一下折线图,让大家不露声色地将折线图做得比别人更出色! 折线图定义:数据随时间递增.数据随时间递减.数据呈周期性变化 ...
echarts 横坐标显示一个月,excel折线图横坐标最后一个点选择数据选不上是什么原因？...
excel折线图横坐标最后一个点选择数据选不上是什么原因? 如果你说的是折线图横坐标选中的数据最后一个无法显示在横坐标上您可以尝试一下可以右击横坐标轴-设置坐标轴格式-选择大小与属性-对其方式-文 ...
用excle画折线图
b站清风老师的教学视频地址 https://www.bilibili.com/video/av78476554?t=1933 这是一篇学习笔记(暗示他的记录很粗糙) 目录数据: 目标图形折线图中一 ...
php fwrite 数组,浅析php fwrite写入txt文件的时...-发现一个诡异的bug，不知何解...-php折线图布局图 - 侯志凯_169IT.COM...
本页文章导读: ▪浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题 - 一觉睡到天黑黑以下是对php中fwrite写入txt文件的时候用 \r\n不能换行的问题进行了 ...
安卓图形之MPAndroidChart3.0详解一——折线图
文章目录 1 前言 1.1 基本使用 1.1 默认样式 1.2 属性设置 Description设置 Legend设置 YAxis 设置 XAxis 设置 LineDataSet 设置补充 1 前言 ...
python——画图之seaborn学习——折线图和柱形图的组合。
1.现在想把两列数据通过折线图和柱形图组合到一张图上来表示,类似下图: 2.具体代码如下: import seaborn as sns import matplotlib.pyplot as plt ...