jquery折线图组件终极版

来源：互联网发布：青少年编程网编辑：程序博客网时间：2024/05/24 03:13

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>

javascript文件：

<pre name="code" class="javascript">/*--------------------------传入参数示例---------------------------------*/function ProcessBar(Parament) {var labe = Parament.labels;var dat = Parament.data;var fiColor = (Parament.fillColor) ? Parament.fillColor : "red";var strColor = (Parament.strokeColor) ? Parament.strokeColor : "red";var poiColor = (Parament.pointColor) ? Parament.pointColor : "red";var poStrColor = (Parament.pointStrokeColor) ? Parament.pointStrokeColor: "red";var sGridLines = (Parament.scaleShowGridLines) ? Parament.scaleShowGridLines: false;var gridLineColor = (Parament.scaleGridLineColor) ? Parament.scaleGridLineColor: "red";var CanWidth = (Parament.CanvasWidth) ? Parament.CanvasWidth : 400;var CanHeight = (Parament.CanvasHeight) ? Parament.CanvasHeight : 200;var backColor = (Parament.BackColor) ? Parament.BackColor : "grey";var top = (Parament.Top) ? Parament.Top : "100px";var left = (Parament.Left) ? Parament.Left : "100px";this.Container = $("<div>");this.Container.addClass("Container");this.Container.css("background", backColor);this.Container.css("top", top);this.Container.css("left", left);this.canvas = document.createElement('canvas');this.canvas.width = CanWidth;this.canvas.height = CanHeight;this.ctx = this.canvas.getContext("2d");this.Container.append(this.canvas);this.data = {labels : labe,// arr,datasets : [ {fillColor : fiColor, // 线下颜色strokeColor : strColor, // 线的颜色pointColor : poiColor, // 数据点的颜色pointStrokeColor : poStrColor, // 数据点线圈的颜色data : dat// val// 特殊说明： null 会平滑度过，""等同于0,但不展示} ]}this.option = {// Boolean - 图标是否显示网格线 (默认值：true)scaleShowGridLines : sGridLines,// String - 网格线的颜色(默认值："rgba(0,0,0,.05)")scaleGridLineColor : gridLineColor,// 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,}new Chart(this.ctx).Line(this.data, this.option);this.upDate = function(x,y) {this.data = {labels : x,datasets : [ {fillColor : fiColor, // 线下颜色strokeColor : strColor, // 线的颜色pointColor : poiColor, // 数据点的颜色pointStrokeColor : poStrColor, // 数据点线圈的颜色data : y} ]}new Chart(this.ctx).Line(this.data, this.option);}}/*--------------------------------------------------------------*//*--------------------------------------------------------------*/var arr = [ 13 ];var val = [ 13 ];for (var i = 0; i < 13; i++) {val[i] = 3 * i;// y轴的数据赋值arr[i] = 2 * i + ":00";// x轴的数据赋值}var arr2 = [ 13 ];var val2 = [ 13 ];for (var i = 0; i < 13; i++) {val2[i] = 5 * i;// y轴的数据赋值arr2[i] = i + ":00";// x轴的数据赋值}var Parament = {labels : arr,// 横坐标data : val,// 纵坐标}var Parament2 = {labels : arr,// 横坐标data : val,// 纵坐标CanvasWidth : 400,// 画布宽度CanvasHeight : 200,// 画布高度strokeColor : "#c0c0c0",// 线的颜色scaleShowGridLines : false,// 是否显示网格线scaleGridLineColor : "#808080", // 网格线的颜色BackColor : "white",// 背景颜色Top : "500px",// 折线图距离页面上端高度Left : "500px",// 折线图距离页面左端宽度}var processBar = new ProcessBar(Parament);var processBar2 = new ProcessBar(Parament2);processBar2.upDate(arr2,val2);$(document.body).append(processBar.Container);$(document.body).append(processBar2.Container);

css文件：

.Container{width: 400px;height: 200px;position: absolute;}.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;}

0 0