Highcharts入门之简介


Posted in Javascript onAugust 02, 2016

在网页中创建一个这样的图表,你觉得会要多久?

Highcharts入门之简介

确实需要很久很久,如果你对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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jquery实现pager控件示例
Apr 09 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
用js编写留言板
Mar 17 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 #Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 #Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 #Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 #Javascript
AngularJS基础 ng-options 指令详解
Aug 02 #Javascript
深入理解JavaScript中Ajax
Aug 02 #Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 #Javascript
You might like
php之字符串变相相减的代码
2007/03/19 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
初识PHP
2014/09/28 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
python实现simhash算法实例
2014/04/25 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python3.x中自定义比较函数
2015/04/24 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
大学生求职简历的自我评价范文
2013/10/12 职场文书
企业申诉管理制度
2014/01/30 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书