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 相关文章推荐
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
详细分析React 表单与事件
Jul 08 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
出国留学自荐信
2013/10/25 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
劳资协议书范本
2014/04/23 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
会计求职信
2014/05/29 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
幼师小班个人总结
2015/02/12 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang