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库omit源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
今天讲交互图表Highcharts的坐标轴，我们将对Highcharts图表的坐标轴组成、坐标轴类型等进行详细系统讲解。下面一起来看看。2016-08-08
本篇将介绍基本材质以及两种基于光照模型的材质（Lamber与Phong），有需要的小伙伴们可以参考学习。2016-08-08
以AngularJS为代表的MVVM结构框架或库这两年来在前端界真是火到不行,大有对抗传统jQuery绑定思想的趋势,这里我们结合传统的MVC结构,来浅谈JavaScript前端开发的MVC结构与MVVM结构2016-06-06
最近因为心血来潮想要试试thinkJS操作mongoDB，去官方文档看了看，默认是只给了mysql的配置，源代码也是没有配置mongo的，只有一个官方案例，无奈只能自己学习了，下面是自己的一些学习总结，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
本篇主要介绍照相机中的正交投影照相机。学习Three.js的小伙伴们可以参考学习。2016-08-08
数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心。2016-08-08
精通JavaScript 纠正 cleanWhitespace函数
这个函数用在火狐(firefox)上面老是出错，今天仔细研究了下，改正了，希望别人不要遇到我这样的问题2010-03-03
FullCalendar是一款基于jQuery的日历插件，适用于各种日程安排、工作计划等场景，本文是fullCalendar官方文档的中文版，主要介绍了fullCalendar的具体属性与方法，大家可以参考一下2017-02-02
使用RequireJS库加载JavaScript模块的实例教程
RequireJS库的主旨就是一个js文件的模块加载器,可以独立于框架来进行使用,这里我们整理了使用RequireJS库加载JavaScript模块的实例教程,需要的朋友可以参考下2016-06-06
最新评论