利用chart函数实现折线图

来源：互联网发布：ubuntu提示权限不够编辑：程序博客网时间：2024/05/28 11:50

html文件：

<html> <head> <title>折线图</title> <link rel="stylesheet" type="text/css" href="./myScript.css"><script type="text/javascript" src="./jquery.js"></script><body> <script src="./Chart.js"></script><script type="text/javascript" src="./myScript.js"></script></body></html>css文件：<pre name="code" class="css">.Container{top:300px;left:50px;width: 400px;height: 200px;position: absolute;background: #99ff99;}.circle {width: 100%;height: 100%;position: absolute;border-radius: 50%;background: #808080;}.pie_left,.pie_right {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}.left,.right {display: block;width: 100%;height: 100%;background: #c0c0c0;border-radius: 50%;position: absolute;top: 0;left: 0;}.pie_right,.right {clip: rect(0, auto, auto, 60px);}.pie_left,.left {clip: rect(0, 60px, auto, 0);}.mask {width: 86%;height: 86%;border-radius: 50%;left: 7%;top: 7%;background: #FFF;position: absolute;text-align: center;line-height: 80px;font-size: 35px;}.mask2 {width: 86%;height: 86%;border-radius: 50%;left: 7%;top: 7%;position: absolute;text-align: center;line-height: 130px;font-size: 16px;}

js文件：

var arr = [ 13 ];var val = [ 13 ];/*--------------------------传入参数示例---------------------------------*/function ProcessBar() {this.Container = $("<div>");this.Container.addClass("Container");this.canvas = document.createElement('canvas');this.canvas.width = 400;this.canvas.height = 200;this.ctx = this.canvas.getContext("2d");this.Container.append(this.canvas);this.data = {labels : arr,datasets : [ {fillColor : "rgba(22,0,22,0.5)", // 线下颜色strokeColor : "#c0c0c0", // 线的颜色pointColor : "#808080", // 数据点的颜色pointStrokeColor : "#808080", // 数据点线圈的颜色data : val// 特殊说明： null 会平滑度过，""等同于0,但不展示} ]}this.option = {// Boolean - 图标是否显示网格线 (默认值：true)scaleShowGridLines : false,// String - 网格线的颜色(默认值："rgba(0,0,0,.05)")scaleGridLineColor : "#808080",// Number - 网格线的宽度 (默认值：1）scaleGridLineWidth : 1,// Boolean - 点与点之间的连线是否为曲线（true：曲线，false：直线） (默认值：true）bezierCurve : true,// Number - 链接线的弯曲程度(0为直线)(默认值：0.4）bezierCurveTension : 0,// Boolean - 是否显示数据点(默认值：true）pointDot : false,// Number - 数据点内圆的大小(像素)(默认值：4）pointDotRadius : 4,// Number - 数据点外环的宽度(像素)(默认值：1）pointDotStrokeWidth : 1,// Number - 显示鼠标左右多少像素以内的数据点(默认值：20）pointHitDetectionRadius : 20,// Boolean - 数据集行程（没看到效果...）(默认值：true）datasetStroke : true,// Number - 链接线的宽度(默认值：20）datasetStrokeWidth : 6,// Boolean - 是否填充数据集(默认值：true）datasetFill : false,}}ProcessBar.prototype.update = function() {new Chart(this.ctx).Line(this.data, this.option);}ProcessBar.prototype.setClock = function(num) {for (var i = 0; i < 13; i++) {arr[i] = num + 2 * i + ":00";if (2 * i + num > 24) {var temp = num + 2 * i - 24;arr[i] = temp + ":00";}}}ProcessBar.prototype.setValue = function(x, y) {for (var i = 0; i < 13; i++) {val[i] = y[i];arr[i] = x[i] + ":00";}}ProcessBar.prototype.setValue = function(date) {for (var i = 0; i < 13; i++) {val[i] = date[i][1];//y轴的数据赋值arr[i] = date[i][0] + ":00";//x轴的数据赋值}}// 一组二维数组数据var date = new Array();for (var i = 0; i < 13; i++) {date[i] = new Array();date[i][0] = i;date[i][1] = i + 3;}//{{1，3}、{3，5}、{5，7}、{7，9}、{9，11}、{11，13}、{13，15}、{15，17}、{17，19}、{19，21}、{21，23}、{23，1}、{1，3}}var processBar = new ProcessBar();processBar.setValue(date);// 传入的监测数组,为二维数组，第一维个数为13，第二位个数为2$(document.body).append(processBar.Container);processBar.update();window.setInterval(function() {}, 5000);

0 0