Highcharts 配置语法

本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置。

第一步：创建 HTML 页面

创建一个 HTML 页面，引入 jQuery 和 Highcharts 库：

文件名：HighchartsTest.htm

  1. <html>
  2. <head>
  3. <title>Highcharts 教程 | 菜鸟教程</title>
  4.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  5.    <script src="/try/demo_source/highcharts.js"></script>
  6. </head>
  7. <body>
  8. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
  9. <script language="JavaScript">
  10. $(document).ready(function() {
  11.  
  12. });
  13. </script>
  14. </body>
  15. </html>

实例中 id 为 container 的 div 用于包含 Highcharts 绘制的图表。

第二步: 创建配置文件

Highcharts 库使用 json 格式来配置。

  1. $('#container').highcharts(json);

这里 json 表示使用 json 数据格式和 json 格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

  1. var title = {
  2.   text: '月平均气温'
  3. };

副标题

为图表配置副标题：

  1. var subtitle = {
  2.   text: 'Source: runoob.com'
  3. };

X 轴

配置要在 X 轴显示的项。

  1. var xAxis = {
  2.    categories: ['一月', '二月', '三月', '四月', '五月', '六月'
  3.       ,'七月', '八月', '九月', '十月', '十一月', '十二月']
  4. };

Y 轴

配置要在 Y 轴显示的项。

  1. var yAxis = {
  2.    title: {
  3.       text: 'Temperature (\xB0C)'
  4.    },
  5.    plotLines: [{
  6.       value: 0,
  7.       width: 1,
  8.       color: '#808080'
  9.    }]
  10. };

提示信息

配置提示信息：

  1. var tooltip = {
  2.    valueSuffix: '\xB0C'
  3. }

展示方式

配置图表向右对齐：

  1. var legend = {
  2.    layout: 'vertical',
  3.    align: 'right',
  4.    verticalAlign: 'middle',
  5.    borderWidth: 0
  6. };

数据

配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。

  1. var series =  [
  2.    {
  3.       name: 'Tokyo',
  4.       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
  5.          26.5, 23.3, 18.3, 13.9, 9.6]
  6.    },
  7.    {
  8.       name: 'New York',
  9.       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
  10.          24.1, 20.1, 14.1, 8.6, 2.5]
  11.    },
  12.    {
  13.       name: 'Berlin',
  14.       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
  15.          17.9, 14.3, 9.0, 3.9, 1.0]
  16.    },
  17.    {
  18.       name: 'London',
  19.       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
  20.          16.6, 14.2, 10.3, 6.6, 4.8]
  21.    }
  22. ];

第三步: 创建 json 数据

组合是由配置信息:

  1. var json = {};
  2.  
  3. json.title = title;
  4. json.subtitle = subtitle;
  5. json.xAxis = xAxis;
  6. json.yAxis = yAxis;
  7. json.tooltip = tooltip;
  8. json.legend = legend;
  9. json.series = series;
  10. Step 4: Draw the chart
  11. $('#container').highcharts(json);

实例

以下为完整的实例(HighchartsTest.htm)：

  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
  5. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  6. <script src="http://code.highcharts.com/highcharts.js"></script>
  7. </head>
  8. <body>
  9. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
  10. <script language="JavaScript">
  11. $(document).ready(function() {
  12.    var title = {
  13.        text: '月平均气温'
  14.    };
  15.    var subtitle = {
  16.         text: 'Source: runoob.com'
  17.    };
  18.    var xAxis = {
  19.        categories: ['一月', '二月', '三月', '四月', '五月', '六月'
  20.               ,'七月', '八月', '九月', '十月', '十一月', '十二月']
  21.    };
  22.    var yAxis = {
  23.       title: {
  24.          text: 'Temperature (\xB0C)'
  25.       },
  26.       plotLines: [{
  27.          value: 0,
  28.          width: 1,
  29.          color: '#808080'
  30.       }]
  31.    };   
  32.  
  33.    var tooltip = {
  34.       valueSuffix: '\xB0C'
  35.    }
  36.  
  37.    var legend = {
  38.       layout: 'vertical',
  39.       align: 'right',
  40.       verticalAlign: 'middle',
  41.       borderWidth: 0
  42.    };
  43.  
  44.    var series =  [
  45.       {
  46.          name: 'Tokyo',
  47.          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
  48.             26.5, 23.3, 18.3, 13.9, 9.6]
  49.       },
  50.       {
  51.          name: 'New York',
  52.          data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
  53.             24.1, 20.1, 14.1, 8.6, 2.5]
  54.       },
  55.       {
  56.          name: 'Berlin',
  57.          data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
  58.             17.9, 14.3, 9.0, 3.9, 1.0]
  59.       },
  60.       {
  61.          name: 'London',
  62.          data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
  63.             16.6, 14.2, 10.3, 6.6, 4.8]
  64.       }
  65.    ];
  66.  
  67.    var json = {};
  68.  
  69.    json.title = title;
  70.    json.subtitle = subtitle;
  71.    json.xAxis = xAxis;
  72.    json.yAxis = yAxis;
  73.    json.tooltip = tooltip;
  74.    json.legend = legend;
  75.    json.series = series;
  76.  
  77.    $('#container').highcharts(json);
  78. });
  79. </script>
  80. </body>
  81. </html>

尝试一下 »

以上实例输出结果为：

Highcharts 配置语法的更多相关文章

  1. Highcharts 配置语法；Highcharts 配置选项详细说明

    Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...

  2. Highcharts 配置选项详细说明

    Highcharts 配置选项详细说明 Highcharts 提供大量的配置选项参数,您可以轻松定制符合用户要求的图表,本章节为大家详细介绍Highcharts 配置选项使用说明: 参数配置(属性+事 ...

  3. Git 中 .gitignore 的配置语法

    一.前言 在日常的开发中,当我们需要将一个项目提交到 Git 时,并不是所有的文件都需要提交,比如一些自动生成的文件,类似于 .idea 文件.class 文件等,这时候就可以使用.gitignore ...

  4. Nginx详解八：Nginx基础篇之Nginx请求限制的配置语法与原理

    Nginx的请求限制: 连接频率的限制:limit_conn_module 配置语法:limit_conn_zone key zone=name:size;默认状态:-配置方法:http 配置语法:l ...

  5. Nginx详解四：Nginx基础篇之目录和配置语法

    一.安装目录 命令:rpm -ql nginx 二.编译参数 命令:nginx -V 三.Nginx基本配置语法 修改主配置文件 当Nginx读配置文件读到include /etc/nginx/con ...

  6. Nginx配置语法和日志

    nginx配置 配置文件 重启服务 http请求 nginx日志 一共有两个日志文件 在配置文件中添加这个,就可以在日志文件中看到请求的userAgent 配置语法的检查 nginx重新加载配置 发送 ...

  7. nginx目录及配置语法

    一.Nginx安装目录 1.查看安装目录. 采用yum的方式安装,其实都是安装的一个一个的 pm 包,故可采用如下命令查看 rpm -ql nginx 遵循了 rpm 包管理规范. 2.安装目录详解 ...

  8. Nginx默认配置语法

    Nginx默认配置语法 1. 我们进入  /etc/nginx/目录下,打开  nginx.conf文件 2. 我们来解析下 这里面标签和各模块的作用 # 设置nginx服务的系统使用用户 user ...

  9. Nginx代理服务——常用的配置语法

    可以到官方查看所有代理的配置语法http://nginx.org/en/docs/http/ngx_http_proxy_module.html 缓存区 Syntax:proxy_buffering ...

随机推荐

  1. 基于OAuth2.0的第三方认证

    浅显易懂的解释 来源 yahoo OAuth认证 原理 理解OAuth 2.0:原理.分类 一张图搞定OAuth2.0:是什么,怎么用 应用自身,完成用户认证: 缺点: 1.不同的访问Web应用提供不 ...

  2. C#中引用第三方ocx控件引发的问题以及解决办法

    调用OCX控件的步骤:1.在系统中注册该ocx控件,命令:regsvr32.exe 控件位置(加 /u 参数是取消注册)2.在.net的工具箱中添加该控件,拖到form中去就可以了. 不用工具箱的话, ...

  3. 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)

    一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...

  4. Money 20/20 | 未来金融数字化转型：数字化半径与全栈式战略观

    小蚂蚁说: 近年来,国际和国内的领先银行纷纷全力投入数字化转型.IDC去年报告说,全球1000大企业里面,67%已经把数字化转型定为企业级战略,而决定数字化转型成功与否的是人的思想改变.我们用数字化半 ...

  5. 字符串函数 mysql 和sqlserver 中对于字符串的常用函数和区别

    1. 对于字符串大小写的统一 mysql和sqlserver中都有同名函数lower()和upper(),但是mysql中还有另外一对函数,达到同样的目的,lcase()和ucase(),也就是英文中 ...

  6. [osg][osgEarth][osgGA][原] EarthManipulator------基于oe的相机漫游器（浅析）

    知识基础:osg漫游器基础 class OSGEARTHUTIL_EXPORT EarthManipulator : public osgGA::CameraManipulator EarthMani ...

  7. scala函数式编程（一）

    scala函数编程特点: 1.Scala函数使用命名参数: 即函数参数传递的实参与函数名相对应,与函数位置不对应. object Test { def main(args: Array[String] ...

  8. 后端调用接口在通过webService发布 解决跨域问题

    1.新建一个空的项目 2.添加一个WebService新项   asmx格式的 3.在这里面写方法  加上[WebMethod]标识 前端就可以调用 4.发布WebService  右键服务  添加服 ...

  9. 使用Hexo搭建一个简单的博客（二）

    昨天想着用Hexo和github搭一个自己简单的博客,记录一下自己踩过的坑,具体的流程就不重复了,主要参考了一下几篇文章 GitHub+Hexo 搭建个人网站详细教程 使用Hexo+Github一步步 ...

  10. PowerDesign的简单使用方法

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...