多语言展示
当前在线:1483今日阅读:113今日分享:31

Highcharts入门之helloWorld

Highcharts是一款纯javascript编写的图表库。Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图,共18种类型图表。由于其功能强大、简单易用、开源免费等优点,在之前工作技术选型的时候,果断的选择了他。下面我带领大家,安装使用下Highcharts。
工具/原料

Highcharts

方法/步骤
1

下载Highcharts1、打开Highcharts官网(http://www.highcharts.com/download);2、找到要下载的源码,单击下载保存到本地;

2

查看源码自带的Highcharts例子1、解压下载得到的压缩包,进入相应的目录查看所有包含文件,Highcharts 提供的文件目录如下图所示:2、建议初学者从官方提供的例子代码入手,Highcharts 提供的丰富例子可以让你轻松入门。通过http://localhost/highcharts/查看所有例子;由于官方提供的例子中用到的 jquery.js 是引用 google 的服务(http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js),由于众所周知的原因,导致打开相应的例子后显示空白。可以将jquery.js改为本地或者cdn

使用highcharts实现自己的helloworld
1

创建html文件创建helloworld.html文件,将highcharts引入到你的页面后,通过下面步骤我们就可以创建一个简单的图表了。

2

编写代码1、引入在线资源jquery-1.8.3.min.js和highcharts.js;2、创建div容器 在页面的 body 部分创建一个div,并指定div 的 id,高度和宽度,代码如下

3、编写Highcharts代码 编写Highcharts必须的代码,用包裹,代码可以放在页面的任意地方,一个最简单的图表实例代码如图

3

运行实例完成上述步骤后,保存文件并用浏览器打开,运行结果如下图所示我们已经初步了解和学会了自己编写简单的Highcharts图表了,这只是开始,后面的会越来越有趣。

4

Highcharts代码是一个json字符串,类似于{chart:{type:'column'}},json具有易于人阅读和编写的特点,所以学习和开发Highcharts并不难,只是熟悉API程度的问题。

注意事项
1

highcharts的掌握必须通过自我实践,其他任何东西同理

2

Highcharts只是做数据展现,具体的数据来源通过动态语言

推荐信息