作者：highcharts | 时间：2013-11-4 11:09:41 | [小 大] | 来源：highcharts |
写了那么多关于highcharts图表的文章以及对highcharts的使用如此之久，今天我个人觉得很有必要来跟大家谈谈highcharts是如何利用javascript画出如何美妙的图表的，我想很多highcharts图表的追随者也很想深入地了解其中画图的原理。首先我们先来看看什么是highcharts？
一、highcharts简介
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。现在官方的最新版本为Highcharts-3.0.6。
二、什么是SVG
现在新的浏览器都内置支持了，但是老一点的IE要下载控件才行。友情提示：移动端HIGHCHARTS稍卡，所以SVG目前也就只能做做图表了，切勿在手机上尝试SVG做大型的图表。
三、highcharts画图原理
了解了什么是SVG过后，对于highchart画图原理就迎刃而解了的。不过不得不说highcharts对于HTML5的canvas做了一个很好的封装。
1、如何利用HTML的canvas标签给highchart画一个面板？
canvas内画一个面板是通过这样实现的：
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
2、如何在面板上面画一条线
javascript代码：
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();
canvas元素：
<canvas> Your browser does not support the canvas element. </canvas>
效果图如下：
都是调用HTML5内关于canvas元素的一些属性和方法加以实现的，具体的实现也可以查看highcharts内封装好的canvas.js源码 地址：
这里只是讲述了highcharts画图的冰山一角，更多的是需要大家深入了解，但是画图的原理就是犹如文中所述。
上一篇：Access数据库经常出现死锁 导致站点无法访问出现长时间请求的解决办法
下一篇：关于asp.net内LINQ级联/多表查询如何提升效率的小小思考与总结
加精 19 踩扁 0
关联阅读
01 ECharts图表初级入门教程之xAxis-axisLabel:如何设置X轴坐标刻度的样式
02 关于页面动态创建多个highcharts图表所产生的问题汇总以及分析
03 ECharts图表中级入门之itemStyle：如何让数据点的数据值非常直观地显示以及位置控制
04 highcharts图表中级入门之dirlldown：如何实现pie(饼状图)的下钻图
05 ECharts图表组件入门教程：如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
06 ECharts图表初级入门篇：如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
07 ECharts图表入门初级篇：如何设置绘图区域(grid)和容器大小一样
08 highcharts图表入门之drilldown：如何快速地构建一个下钻图以及注意事项
09 ECharts图表组件初级入门教程之splitNumber：如何设置Y轴刻度个数？
10 ECharts图表初级入门(二)：ECharts图表对象的初始化(init)详解以及注意事项
11 ECharts图表初级入门：ECharts图表与Highcharts图表的巅峰对决(相似与区别)
12 highcharts入门之series：针对双Y轴图表需要重点关注yAxis属性定位数据所属Y轴
13 highcharts图表中级入门之formatter：如何配置formatter格式化函数灵活应对是否共享(shared)数据提示tooltip
14 highcharts图表入门之：如何让highcharts图表自适应浏览器窗体的大小或者页面大小
15 关于Highcharts图表组件动态修改属性的方法（API）总结之Chart
16 ECharts图表中级入门之dataZoom：图表数据过多如何开启滚动条效果（图表数据区域缩放）
相关文章
精彩导读
热门资讯
关注我们
