Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !

0、引入在线资源(也可以引用本地资源)在线减少服务器压力

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了。

1、创建div容器

在页面的 body 部分创建一个div,并指定div 的 id,高度和宽度,代码如下

<div id="container" style="min-width:800px;height:400px"></div>

2、编写Highcharts代码

编写Highcharts必须的代码,用<script></script>包裹,代码可以放在页面的任意地方,一个最简单的图表实例代码如下

  1. $(function () { 
  2.     $('#container').highcharts({                   //图表展示容器,与div的id保持一致
  3.         chart: {
  4.             type: 'column'                         //指定图表的类型,默认是折线图(line)
  5.         },
  6.         title: {
  7.             text: 'My first Highcharts chart'      //指定图表标题
  8.         },
  9.         xAxis: {
  10.             categories: ['my', 'first', 'chart']   //指定x轴分组
  11.         },
  12.         yAxis: {
  13.             title: {
  14.                 text: 'something'                  //指定y轴的标题
  15.             }
  16.         },
  17.         series: [{                                 //指定数据列
  18.             name: 'Jane',                          //数据列名
  19.             data: [1, 0, 4]                        //数据
  20.         }, {
  21.             name: 'John',
  22.             data: [5, 7, 3]
  23.         }]
  24.     });
  25. });

完成上述两个步骤后,保存文件并用浏览器打开,运行结果如下图所示

上述例子完整html代码如下
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  4. <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  5. <script>
  6. $(function () {
  7. $('#container').highcharts({
  8. chart: {
  9. type: 'column'
  10. },
  11. title: {
  12. text: 'My first Highcharts chart'
  13. },
  14. xAxis: {
  15. categories: ['my', 'first', 'chart']
  16. },
  17. yAxis: {
  18. title: {
  19. text: 'something'
  20. }
  21. },
  22. series: [{
  23. name: 'Jane',
  24. data: [1, 0, 4]
  25. }, {
  26. name: 'John',
  27. data: [5, 7, 3]
  28. }]
  29. });
  30. });
  31. </script>
  32. </head>
  33.  
  34. <body>
  35. <div id="container" style="min-width:800px;height:400px;"></div>
  36. </body>
  37. </html>

至此,我们已经初步了解和学会了自己编写简单的Highcharts图表了,这只是开始,后面的会越来越有趣。

Highcharts Highstock 学习笔记 第一篇 Highcharts配置的更多相关文章

  1. ActionBarSherlock学习笔记 第一篇——部署

    ActionBarSherlock学习笔记 第一篇--部署          ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...

  2. ASP.NET Core 学习笔记 第一篇 ASP.NET Core初探

    前言 因为工作原因博客断断续续更新,其实在很早以前就有想法做一套关于ASP.NET CORE整体学习度路线,整体来说国内的环境的.NET生态环境还是相对比较严峻的,但是干一行爱一行,还是希望更多人加入 ...

  3. Asp.net core Identity + identity server + angular 学习笔记 (第一篇)

    用了很长一段时间了, 但是一直没有做过任何笔记,感觉 identity 太多东西要写了, 提不起劲. 但是时间一久很多东西都记不清了. 还是写一轮吧. 加深记忆. 这是 0-1 的笔记, 会写好多篇. ...

  4. Coap协议学习笔记-第一篇

    1. 物联网应用上一般使用单片机(或者其他SOC),单片机的RAM内存一般只有20KB~~128KB左右,然而一个TCP协议栈可能就20KB,所以只能用UDP,因为UDP相对小很多,然后在UDP上加了 ...

  5. Spring学习笔记第一篇——初识Spring

    1.简单介绍 spring的ioc底层是先配置xml文件,接着创建工厂,利用dom4j解析配置文件,最后通过反射完成.大概步骤差不多这样,这些具体代码spring帮你完成了.现在我们只需要配置xml和 ...

  6. Android学习笔记(第一篇)编写第一个程序Hello World+Activity

    PS:终于开始正式的搞Android了...无人带的一介菜鸟,我还是自己默默的努力吧... 学习内容: 1.编写第一个Hello World程序..   学习Android,那么就需要有一个编译器来集 ...

  7. Node 之 Express 学习笔记 第一篇 安装

    最近由于工作不忙,正好闲暇时间学学基于 node 的 web开发框架. 现在关于web开发框架除了Express 还有新出的 KOA以及其它一些. 但是想想还是先从 Express 入手吧.因为比较成 ...

  8. Django学习笔记第一篇--Hello,Django

    一.Django的安装: 1.python虚拟运行的环境的安装以及安装django: sudo pip install virtualenv export VIRTUALENV_DISTRINUTR= ...

  9. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

随机推荐

  1. 热词解析(9) — hangry

    今天给大家介绍一个非常有趣.又超级实用的词!!中文叫"饿极而怒",英文叫... 不知道你有没有这样的经历,当你饿着肚子等着你妈做饭,结果你妈却在麻将桌上不下来,你就越来越饿,越饿越 ...

  2. Python学习——集合

    集合 python中的集合和数学上集合具有基本相同的性质,此处不再赘述. 1.创建集合的两种方法 #直接创建 num={1,2,3,4,5} #利用set方法创建 num1=set([1,2,3,4, ...

  3. stm32实现iap远程固件更新

    前提 想来做iap升级了,应该不是什么新手. 下面的程序需要用到一些简单的功能 串口收发数据开关总中断虽然本文标题是实现远程固件更新,但是具体远程方案本文不做详细说明,重点在于介绍mcu接收到新的固件 ...

  4. NOIP2018提高组省一冲奖班模测训练(一)

    比赛链接 https://www.51nod.com/contest/problemList.html#!contestId=72&randomCode=147206 这次考试的题非常有质量 ...

  5. 【08】AngularJS XMLHttpRequest

    AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: ...

  6. 【Codeforces 476C】Dreamoon and Sums

    [链接] 我是链接,点我呀:) [题意] 让你求出所有x的和 其中 (x div b)是(x mod b)的倍数 且x mod b不等于0 且(x div b)除(x mod b)的值(假设为k),k ...

  7. idea结合git版本控制

    IntelliJ-IDEA和Git.GitHub.Gitlab的使用(五)----https://blog.csdn.net/milsevol/article/details/72792468

  8. ansible playbooks loop循环

    在一个task中循环某个操作 1.标准循环 - name: add several users user: name: "{{ item }}" state: present gr ...

  9. HUD 1043 Eight 八数码问题 A*算法 1667 The Rotation Game IDA*算法

    先是这周是搜索的题,网站:http://acm.hdu.edu.cn/webcontest/contest_show.php?cid=6041 主要内容是BFS,A*,IDA*,还有一道K短路的,.. ...

  10. Leetcode 114.二叉树展开为链表

    二叉树展开为链表 给定一个二叉树,原地将它展开为链表. 例如,给定二叉树 将其展开为: class Solution{ public: void flatten(TreeNode* root){ if ...