基于VML与HTML5Canva实现的跨浏览器饼图与折线图
本来想自己做个库的，毅力不够啊
，所以放出源代码
创新互联公司是一家集成都网站设计、成都做网站、外贸网站建设、网站页面设计、网站优化SEO优化为一体的专业网站制作公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。
当前实现的框架功能有：
1. 支持IE6+以上版本，支持Chrome， 支持FireFox
2. 动画加载机制
3. tooltip支持
4. legend支持
5. 功能丰富的参数设置
当前支持的图形种类有两种：饼图与折线图，将来也许会不定期更新，不断完善！
希望还有点毅力和时间做话。不废话啦，直接上效果图：
折线图演示代码：
饼图演示代码：Line Demo VML Line Chart Demo
JS库源代码：有兴趣者可以自己添加更多图表支持My Demo 1 farchart - Pie Demo
// farchart farchart.js version 0.0.1, 28 August 2013 // (c) 2013 by Jia ZhiGang. All Rights reserved. // Copyright (c) 2013 Jia ZhiGang (http://www.edinme.com) // // far chart is freely distributable under the terms of an GPL-style license. // // Permission is hereby granted, free of charge, to any person obtaining // a copy of this software and associated documentation files (the // "Software"), to deal in the Software without restriction, including // without limitation the rights to use, copy, modify, merge, publish, // distribute, sublicense, and/or sell copies of the Software, and to // permit persons to whom the Software is furnished to do so, subject to // the following conditions: // // The above copyright notice and this permission notice shall be // included in all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. // // For details, see the farchart web site: http://www.edinme.com function check_vmlCapability() { if(document.namespaces['v']==null) { var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); for(var i=0; i 0 ) { // If Internet Explorer, return version number return parseInt (ua.substring (msie+5, ua.indexOf (".", msie ))); } else { // If another browser, return 0 return 0; } } var fishChart = { type: "null", // global flag, default width: 600, height: 400, series: [], unit: "kg", container: null, title: { text: "Far Chart", x: -100 // center offset }, isIE: true, legend : { enable : true }, edge : { width: 50, // for pie height: 50, // for pie left: 50, // for other plot upper: 40, bottom: 40, right: 60 }, yAxis: { title: "Y Axis", vgap: 0, plotHeight: 0, min: 0, max: 0, tickSize: 10, padding: 5 }, xAxis: { categories: [], tickSize : 10, autoTick:true, xgap : 0, min:0, max:0, title:"X Axis" }, animation: { enable: true, hh: 1, animCanvas:null, pctx: null }, tooltip: { enable: true, tooltipCanvas : null, ttContext: null, index: -1 }, circle : { // for pie cx: 0, cy: 0, radius: 0 }, text : { // for pie enable: false, content:[] }, point : { // for line and scatter plot enable : true, radius : 4 }, initSettings: function (config) { this.type = config.type; this.container = config.container; this.width = config.width; this.height = config.height; this.series = config.series; this.title.text = config.title; this.unit = config.unit; // tool-tip, animation, legend setting data if(config.tooltip != undefined) { this.tooltip.enable = config.tooltip.enable; } if(config.animation != undefined) { this.animation.enable = config.animation.enable; } if(config.legend != undefined) { this.legend.enable = config.legend.enable; } if(config.text != undefined) { this.text.enable = config.text.enable; } // edge setting data if(config.edge != undefined && config.edge.right != undefined) { this.edge.right = config.edge.right; } if(config.edge != undefined && config.edge.left != undefined) { this.edge.left = config.edge.left; } if(config.edge != undefined && config.edge.bottom != undefined) { this.edge.bottom = config.edge.bottom; } if(config.edge != undefined && config.edge.upper != undefined) { this.edge.upper = config.edge.upper; } // xAxis setting if(config.xAxis != undefined) { this.xAxis.title= config.xAxis.title; this.xAxis.tickSize = config.xAxis.tickSize; } if(config.xAxis != undefined && config.xAxis.categories != undefined) { this.xAxis.categories = config.xAxis.categories; } // yAxis setting if(config.yAxis != undefined) { this.yAxis.title = config.yAxis.title; this.yAxis.tickSize = config.yAxis.tickSize; } // decide whether render plot using HTML5 Canvas or VML if(msieversion() == 0) { this.chartCanvas = document.createElement("canvas"); this.chartCanvas.id = "fc_canvas"; this.container.appendChild(this.chartCanvas); this.chartCanvas.width = config.width; this.chartCanvas.height = config.height; this.isIE = false; } else { check_vmlCapability(); this.isIE = true; } }, render : function() { var ctx = this.getCanvasContext(); this.renderBorder(ctx); if(this.type === "pie") { // initialization circle this.circle.cx = this.width/2; this.circle.cy = this.height/2; this.circle.radius = Math.min(this.width/2, this.height/2) - Math.max(this.edge.width, this.edge.height); if(this.circle.radius <= 0) { console.log("Can not reader the chart, Circle is too small."); return; } // draw each arc according to data series var sum = 0; var nums = this.series.length; for(var i=0; i (this.circle.radius+50)) ? 50 : (this.circle.cx - this.circle.radius); for(var i=0; i index) ? this.text.content[index] : this.series[index].name + ": " + (precent * 100).toFixed(0) + "%"; ctx.font = '10pt Calibri'; ctx.fillStyle="black"; ctx.fillText(tipStr, textPos, hy); } } }, showLineTooltips : function(loc, ctx) { if(!this.tooltip.enable) { return; } var size = this.series[0].data.length; var plotwidth = this.width - this.edge.left - this.edge.right; var deltax = (plotwidth/ size); var xunit = ((loc.x - this.edge.left)/deltax); //: */loc.x - this.edge.left; var deltay = this.height - this.edge.bottom - loc.y; if(xunit > 0 && deltay > 0) { var value = deltay/this.yAxis.ygap + this.yAxis.min; var xindex = Math.floor(xunit); var xpoint = xunit - xindex; if(xpoint < 0.55 && xpoint >0.45) { var num = this.series.length; var distance = []; for(var i=0; i distance[i]) { min = distance[i]; yindex = i; } } if(this.series[yindex].data[xindex] > Math.floor(value - 3) && this.series[yindex].data[xindex] < Math.floor(value + 3) ) { this.renderLineTooltips(ctx, yindex, xindex, loc); } // clear tool tip else { this.clearTooltips(ctx); } } else { this.clearTooltips(ctx); } } else { this.clearTooltips(ctx); } }, renderLineTooltips : function(ctx, yindex, xindex, loc) { // show tool tip this.clearTooltips(ctx); if(this.tooltip.tooltipCanvas == null) { this.tooltip.tooltipCanvas = document.createElement("canvas"); this.tooltip.ttContext = this.tooltip.tooltipCanvas.getContext("2d"); this.tooltip.tooltipCanvas.width = 150; this.tooltip.tooltipCanvas.height = 100; } var m_context = this.tooltip.ttContext; m_context.save(); m_context.clearRect(0, 0, this.tooltip.tooltipCanvas.width, this.tooltip.tooltipCanvas.height); m_context.lineWidth = 2; m_context.strokeStyle = this.series[yindex].color; m_context.fillStyle="RGBA(255,255,255,0.7)"; this.getRoundRect(m_context, 2,2,this.tooltip.tooltipCanvas.width-4, this.tooltip.tooltipCanvas.height-4, 5, true, true); m_context.font="14px Arial"; m_context.fillStyle="RGBA(0,0,0,1)"; if(this.type == "line") { m_context.fillText((this.xAxis.title + ": " + this.xAxis.categories[xindex]), 5, 20); m_context.fillText(this.series[yindex].name + ": " + this.series[yindex].data[xindex], 5, 40); } else { m_context.fillText(this.series[yindex].name, 5, 20); m_context.fillText(this.xAxis.title + ":" + this.series[yindex].data[xindex][0], 5, 40); m_context.fillText(this.yAxis.title + ":" + this.series[yindex].data[xindex][1], 5, 60); } m_context.restore(); // make tool-tip rectangle is always visible if((loc.x + this.tooltip.tooltipCanvas.width)> this.width) { loc.x = loc.x - this.tooltip.tooltipCanvas.width; } if((loc.y - this.tooltip.tooltipCanvas.height) <= 0) { loc.y = loc.y + this.tooltip.tooltipCanvas.height; } ctx.drawImage(this.tooltip.tooltipCanvas, 0, 0, this.tooltip.tooltipCanvas.width, this.tooltip.tooltipCanvas.height, loc.x, loc.y-this.tooltip.tooltipCanvas.height, this.tooltip.tooltipCanvas.width, this.tooltip.tooltipCanvas.height); }, showPieTooltips : function(loc, ctx) { if(!this.tooltip.enable) { return; } var dx = loc.x - this.width/2; var dy = loc.y - this.height/2; var dis = Math.floor(Math.sqrt(dx * dx + dy * dy)); if(dis <= this.circle.radius) { // draw tool tip text var angle = Math.atan2(dy,dx); if(angle <= 0) { // if[-Math.PI, 0], make it[Math.PI, 2*Math.PI] angle = angle + 2*Math.PI; } var sum = 0; var nums = this.series.length; for(var s=0; s this.width) { loc.x = loc.x - this.tooltip.tooltipCanvas.width; } if((loc.y - this.tooltip.tooltipCanvas.height) <= 0) { loc.y = loc.y + this.tooltip.tooltipCanvas.height; } ctx.drawImage(this.tooltip.tooltipCanvas, 0, 0, this.tooltip.tooltipCanvas.width, this.tooltip.tooltipCanvas.height, loc.x, loc.y-this.tooltip.tooltipCanvas.height, this.tooltip.tooltipCanvas.width, this.tooltip.tooltipCanvas.height); } else { this.tooltip.index = -1; this.clearTooltips(ctx); } }, redrawPie : function(ctx) { if(this.animation.enable) { ctx.clearRect(0,0,this.width, this.height); this.renderBorder(ctx); ctx.drawImage(this.animation.animCanvas, 0, 0, this.width, this.height, 0, 0, this.width, this.height); } else { // draw each arc according to data series var sum = 0; var nums = this.series.length; for(var i=0; i 5px if (typeof pattern === "undefined") { pattern = 5; } // calculate the delta x and delta y var dx = (toX - fromX); var dy = (toY - fromY); var distance = Math.floor(Math.sqrt(dx*dx + dy*dy)); var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern); var deltay = Math.floor((dy/distance) * pattern); var deltax = Math.floor((dx/distance) * pattern); // draw dash line ctx.beginPath(); for(var dl=0; dl
本文名称：基于VML与HTML5Canva实现的跨浏览器饼图与折线图
文章出自：http://6mz.cn/article/gsoidg.html