作者:highcharts | 时间:2013-11-4 11:09:41 | [小 大] | 来源:highcharts |
阅读:18242 | : 0 | 收藏 highcharts,入门,图表,原理,画图,canvas,剖析,深度 [摘要]: 写了那么多关于highcharts图表的文章以及对highcharts的使用如此之久,今天我个人觉得很有必要来跟大家谈谈highcharts是如何利用javascript画出如何美妙的图表的,我想很多highcharts图表的追随者也很想深入地了解其中画图的原理。首先我们先来看看什么是highcharts? 一、highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速...写了那么多关于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画图的冰山一角,更多的是需要大家深入了解,但是画图的原理就是犹如文中所述。
highcharts,入门,图表,原理,画图,canvas,剖析,深度 本文为原创型文章转载请尊重他人劳动成果并注明出处:?651 可以扫描本站该博客文章的QR二维码进行访问
上一篇: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:图表数据过多如何开启滚动条效果(图表数据区域缩放)