canvas绘图折线图表

来源：互联网发布：安米app源码编辑：程序博客网时间：2024/05/22 04:50
canvas折线图绘制插件

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><style type="text/css">.can{position: relative;}.mycan{display: block;margin: 40px auto 20px;}.can #canva2{position: absolute;top: 0px;margin-top: 0;z-index: 5;left: 50%;margin-left: -380px;cursor: pointer;}.can .xiangxin{position: absolute;top: 0;z-index: 6;font-family: "微软雅黑";width: 120px;line-height: 30px;text-align: center;font-size: 14px;color: #fff;background:rgba(0,0,0,.8);border-radius: 3px;display: none;}.sheb canvas{margin-bottom: 0;}</style></head><body><div class="warp shuju"><article class="can"><canvas width="1000" height="400" class="mycan" id="canva">您的浏览器不支持canvas,请您升级浏览器</canvas><canvas width="770" height="360" class="mycan" id="canva2">您的浏览器不支持canvas,请您升级浏览器</canvas><p class="xiangxin"></p></article></div><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript" src="canvas-more.min.js"></script><script type="text/javascript">window.onload=function(){var shuju=[[    {x:"",y:10},    {x:"1-31",y:220},    {x:"2-1",y:48},    {x:"2-2",y:121},    {x:"2-3",y:3712},    {x:"2-4",y:4431},    {x:"2-5",y:4443},    {x:"2-6",y:3889},    {x:"2-7",y:3300},    {x:"2-8",y:1457},    {x:"2-9",y:1932},    {x:"2-10",y:697},    {x:"2-11",y:1982},    {x:"2-14",y:1120},    {x:"2-15",y:1105},    {x:"2-16",y:1156},    {x:"2-14",y:1320},    {x:"2-15",y:1205},    {x:"2-16",y:2156},    {x:"2-12",y:3512},    {x:"2-13",y:1605},    {x:"2-14",y:1820},    {x:"2-15",y:1905},    {x:"2-16",y:4156},    {x:"2-17",y:2225}],[    {x:"",y:60},    {x:"1-31",y:120},    {x:"2-1",y:18},    {x:"2-2",y:21},    {x:"2-3",y:2712},    {x:"2-4",y:3431},    {x:"2-5",y:2443},    {x:"2-6",y:2889},    {x:"2-7",y:3100},    {x:"2-8",y:457},    {x:"2-9",y:932},    {x:"2-10",y:397},    {x:"2-11",y:982},    {x:"2-12",y:3212},    {x:"2-13",y:1005},    {x:"2-13",y:1005},    {x:"2-14",y:1120},    {x:"2-15",y:1105},    {x:"2-16",y:1156},    {x:"2-14",y:1320},    {x:"2-15",y:1205},    {x:"2-14",y:1320},    {x:"2-15",y:1205},    {x:"2-16",y:2156},    {x:"2-17",y:2500}],[    {x:"",y:60},    {x:"1-31",y:120},    {x:"2-1",y:18},    {x:"2-2",y:21},    {x:"2-3",y:1712},    {x:"2-4",y:1431},    {x:"2-5",y:1443},    {x:"2-6",y:1889},    {x:"2-7",y:1100},    {x:"2-8",y:157},    {x:"2-9",y:132},    {x:"2-10",y:197},    {x:"2-11",y:182},    {x:"2-12",y:1212},    {x:"2-13",y:1005},    {x:"2-14",y:1120},    {x:"2-15",y:1105},    {x:"2-16",y:1156},    {x:"2-13",y:1005},    {x:"2-14",y:1120},    {x:"2-15",y:1105},    {x:"2-14",y:1120},    {x:"2-15",y:1105},    {x:"2-16",y:1156},    {x:"2-17",y:1500}]];var hangGao=75;//每条线的高度距离var tianshu=10;//横行数据上限var zuozhi="总访问量："+1000;var lineColor=["#0d65a3","#ebe258","#bf1616"];var lineName=["访问量","用户量","非用户"];var dianColor=["#0d65a3","#ebe258","#bf1616"];var dianBorderColor=["#efefef","#fff","#fff"];var bgColor=["#f9f9f9","#f1f1f1","#eaeaea"];// shuju:传入点的依据// hangGao:纵向点的距离（最好不要超过75）// tianshu：横向数据长度// zuozhi:左侧顶部数据（一般为统计信息）// lineColor:每条线的颜色// lineName:每条线的名字（鼠标经过时的名字）// dianColor:点的颜色// dianBorderColor：点边框的颜色// bgColor：每条线映射背景的颜色zhexian(shuju,hangGao,tianshu,zuozhi,lineColor,lineName,dianColor,dianBorderColor,bgColor);}</script></body></html>
下载canvas-more.min.js
阅读全文
1 0