Highcharts入门之简介
更新时间：2016年08月02日 16:54:54 投稿：daisy
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的相关文章，感兴趣的朋友们可以继续支持脚本之家。
相关文章
精通JavaScript 纠正 cleanWhitespace函数
这个函数用在火狐(firefox)上面老是出错，今天仔细研究了下，改正了，希望别人不要遇到我这样的问题2010-03-03
FullCalendar是一款基于jQuery的日历插件，适用于各种日程安排、工作计划等场景，本文是fullCalendar官方文档的中文版，主要介绍了fullCalendar的具体属性与方法，大家可以参考一下2017-02-02
本文用实例演示如何用d3.js实现实时刷新的折线图,非常具有实用价值,需要的朋友可以参考下。2016-08-08
数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心。2016-08-08
这篇文章主要为大家介绍了组件库Monmrepo架构与开发调试环境构建详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本篇将先介绍创建较为常用的物体：网格，然后介绍如何修改物体的属性。下面跟着小编一起来学习学习。2016-08-08
这篇文章主要介绍了node.js中的socket.io入门实例,并对websocket等反向ajax技术做了介绍,需要的朋友可以参考下2014-04-04
JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件，适用于各种日程安排、工作计划等场景，您可以很方便的查看查看待办事项，标记重要事项以及绑定点击和拖动事件，能快速的整合到您的项目中，本文将简单介绍FullCalendar的使用2017-02-02
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程，包括立方体、平面与球体，有需要的朋友们可以学习下。2016-08-08
以AngularJS为代表的MVVM结构框架或库这两年来在前端界真是火到不行,大有对抗传统jQuery绑定思想的趋势,这里我们结合传统的MVC结构,来浅谈JavaScript前端开发的MVC结构与MVVM结构2016-06-06
最新评论