Highcharts入门之简介
发布于 2016-10-26 05:45:52 | 87 次阅读 | 评论: 0 | 来源: 网友投递
Highcharts 纯Javascript图表
Highcharts是一个制作图表的纯Javascript类库
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。下面通过本文的介绍及实例一起来学习学习吧。
在网页中创建一个这样的图表，你觉得会要多久？
确实需要很久很久，如果你对JavaScript不是特别熟练的话。
但是有个好消息就是如果，你使用Highcharts框架的话，可能十多行代码就能让你在页面中生成这样有特效的图表。
当然他的功能远不止这些，各种图表，打印，导出，对比分析。
他不仅仅可以用来做网站的图表分析，就是在有什么总结演示的时候用这个做出来的东西想必也是让人眼前一亮吧，完全就可以抛弃PPT了啊。
所以赶紧来了解如何使用他吧！！！
下面给一个简单的Dome：
1.在highcharts中属性以逗号隔开
2.一个大的属性中使用{}，在{}中填写具体的属性
3.除了数据其他的属性一般使用”"包含
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="chart" style="width: 800px ;height: 400px">
</div>
<script>
$(function () {
$(".chart").highcharts({ //指定在class为chart的地方创建图表
chart:{
type:'line' //图表的类型，还有column等
},
title:{
text:'Dome01' //图表的标题
},
xAxis:{
categories:['A','B','C','D'] //x坐标的分组
},
yAxis:{
title:{
text:'some' //y坐标的标题
}
},
series:[{
name:'zhangsan', //数据的名称
data:[2,3,5,3] //具体的数据
},{
name:'lisi',
data:[3,5,1,3]
},{
name:'wangwu',
data:[1,4,6,2]
}]
}) ;
});
</script>
</body>
</html>
如果现在看不懂也没关系，可以放在浏览器里试一试，后续我还会更新Highcharts的相关文章，感兴趣的朋友们可以继续支持phperz。
推荐阅读
最新资讯