Highcharts让你的网页上图表画的飞起 - 网页设计在线参考手册.docx

《Highcharts让你的网页上图表画的飞起 - 网页设计在线参考手册.docx》由会员分享，可在线阅读，更多相关《Highcharts让你的网页上图表画的飞起 - 网页设计在线参考手册.docx（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Highcharts让你的网页上图表画的飞起-网页设计在线参考手册-最新IT资讯_电脑知识大全_网络安全教程-次元立方网Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，能够知足你对Web图表的任何需求！以上是Highcharts中文网上的简介！假如论语法的简单性，或者需要画功能简单的折线、柱状以及饼状图，Highcharts是远远不如js图标库jscharts的，但是假如涉及到复杂多样的功能特性，Highcharts甩了j

2、scharts何止8条街！这类的Js框架通常很容易学习。下载了包后，看例子就能够了，不过Highcharts在这点上做的是非常好！见：Highcharts中文网首页：:/hchartsindex.phpHighcharts官网：:/highcharts/学习highcharts无需根据包下的examples例子一个个去试我学jscharts就是这么做的!-，通过中文网提供的这3个页面，一个小时你就能够初步把握这项技术！Highcharts中文教程HighchartsAPI文档Highcharts在线演示平台学习的重点就是这个在线演示平台啦，它包含了下载包中的所有示例文件。而且能够点击qqqpq

3、aGvq7CF4JIVVVVRoxLRQKxq8N1A9Q/Grc/uskWpDDdHR02H2dBH1vTD6f39/f/yeiw/7+fj6ft/9yHjxkHpund+hVZ8VisVAo5BEdCoVCsVi0/6ozPGQem6eHL478D4AvjvwxaLw4EkF+ymBMEQeAMUUcAMYUcQAYU8QBYEwRB4AxRRwAxhRxABhTxAFgTBEHgDFFHMC/AMmPjQU9vQpUAAAAAElFTkSuQmCC/页面中间的这个编辑代码能够跳转到一个在线测试平台的地方，像这里:/hchartstest/index.php?from=demop=10在线

4、演示平台做的也非常具体，不过很多版块还在完善中。highcharts学习的入口是什么呢，就是官网的这个图啦这里从官网拿下来：这里是一个图表的所有属性。一目了然。这里是官网上的一个简单的图表示例：这个示例是由下面的代码直接生成的。我简单注释了一下。代码位于Highlchar-4.0.3下，Highcharts-4.0.3examplesline-labelsindex.，直接打开即可。!DOCTYPEHTMLheadmeta-equiv=Content-Typecontent=text/;charset=utf-8titleHighchartsExample/title!-值得注意的是，High

5、charts运行需要两个js文件，Highcharts.js及jQuery、MooTools、Prototype、HighchartsStandaloneFramework中的一个框架文件。抄自官网.-scripttype=text/javascriptsrc=:/cdn.hchartsjquery/jquery-1.8.2.min.js/scriptstyletype=text/css$demo.css/stylescripttype=text/javascript$(function()$(#container).highcharts(chart:/图表总体的设置type:line/这个默

6、以为line即折线图,还能够为柱状column，不过饼状图不是这里设置，而是直接在series数据列上指定type:pie,title:/图表标题text:MonthlyAverageTemperature/标题名称subtitle:/副标题text:Source:WorldClimatexAxis:/x轴categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec/x轴数据yAxis:/Y轴title:text:Temperature(?C)/y轴标题plotOptions:/图表标示的各种选项line:/这里由于是折线图，那么就是折线

7、图的选项dataLabels:/数据标签enabled:true/允许显示数据，默以为false，不显示详细数据enableMouseTracking:false/这个让鼠标放到数据点的时候，不动态显示一个小圆圈，默以为trueseries:/这里省略了一个data数组的标示，更为方便，实际上下面的name和data都是属于data数组元素的属性，下面2组数据，就代表2组数据并列name:Tokyo,/数据名data:7.0,6.9,9.5,14.5,18.4,21.5,25.2,26.5,23.3,18.3,13.9,9.6/详细数据,name:London,data:3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8