canvas教程

highcharts入门高级篇:深度剖析highcharts图表画图原理canvas

字号+ 作者:H5之家 来源:H5之家 2015-11-17 15:15 我要评论( )

写了那么多关于highcharts图表的文章以及对highcharts的使用如此之久,今天我个人觉得很有必要来跟大家谈谈highcharts是如何利用javascript画出如何美妙的图表的

作者: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内画一个面板是通过这样实现的:


//获得页面内用于装载图表的div容器 var c=document.getElementById("divHighchart"); c.fillStyle="#FF0000"; //颜色 c.fillRect(0,0,150,75); //画一个矩形


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二维码进行访问  

本站该博客文章的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:图表数据过多如何开启滚动条效果(图表数据区域缩放)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
p