Highcharts 配置语法

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

第一步：创建 HTML 页面

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

文件名：HighchartsTest.htm

<html>

<head>

<title>Highcharts 教程 | 菜鸟教程</title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

   <script src="/try/demo_source/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

});

</script>

</body>

</html>

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

第二步: 创建配置文件

Highcharts 库使用 json 格式来配置。

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

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

标题

为图表配置标题：

var title = {

  text: '月平均气温'

};

副标题

为图表配置副标题：

var subtitle = {

  text: 'Source: runoob.com'

};

X 轴

配置要在 X 轴显示的项。

var xAxis = {

   categories: ['一月', '二月', '三月', '四月', '五月', '六月'

      ,'七月', '八月', '九月', '十月', '十一月', '十二月']

};

Y 轴

配置要在 Y 轴显示的项。

var yAxis = {

   title: {

      text: 'Temperature (\xB0C)'

   },

   plotLines: [{

      value: 0,

      width: 1,

      color: '#808080'

   }]

};

提示信息

配置提示信息：

var tooltip = {

   valueSuffix: '\xB0C'

}

展示方式

配置图表向右对齐：

var legend = {

   layout: 'vertical',

   align: 'right',

   verticalAlign: 'middle',

   borderWidth: 0

};

数据

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

var series =  [

   {

      name: 'Tokyo',

      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,

         26.5, 23.3, 18.3, 13.9, 9.6]

   },

   {

      name: 'New York',

      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,

         24.1, 20.1, 14.1, 8.6, 2.5]

   },

   {

      name: 'Berlin',

      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,

         17.9, 14.3, 9.0, 3.9, 1.0]

   },

   {

      name: 'London',

      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,

         16.6, 14.2, 10.3, 6.6, 4.8]

   }

];

第三步: 创建 json 数据

组合是由配置信息:

var json = {};

json.title = title;

json.subtitle = subtitle;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.tooltip = tooltip;

json.legend = legend;

json.series = series;

Step 4: Draw the chart

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

实例

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

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var title = {

       text: '月平均气温'

   };

   var subtitle = {

        text: 'Source: runoob.com'

   };

   var xAxis = {

       categories: ['一月', '二月', '三月', '四月', '五月', '六月'

              ,'七月', '八月', '九月', '十月', '十一月', '十二月']

   };

   var yAxis = {

      title: {

         text: 'Temperature (\xB0C)'

      },

      plotLines: [{

         value: 0,

         width: 1,

         color: '#808080'

      }]

   };   

   var tooltip = {

      valueSuffix: '\xB0C'

   }

   var legend = {

      layout: 'vertical',

      align: 'right',

      verticalAlign: 'middle',

      borderWidth: 0

   };

   var series =  [

      {

         name: 'Tokyo',

         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,

            26.5, 23.3, 18.3, 13.9, 9.6]

      },

      {

         name: 'New York',

         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,

            24.1, 20.1, 14.1, 8.6, 2.5]

      },

      {

         name: 'Berlin',

         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,

            17.9, 14.3, 9.0, 3.9, 1.0]

      },

      {

         name: 'London',

         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,

            16.6, 14.2, 10.3, 6.6, 4.8]

      }

   ];

   var json = {};

   json.title = title;

   json.subtitle = subtitle;

   json.xAxis = xAxis;

   json.yAxis = yAxis;

   json.tooltip = tooltip;

   json.legend = legend;

   json.series = series;

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

});

</script>

</body>

</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. Unity3D学习笔记（三十六）：Shader着色器（3）- 光照

    光照模型:用数学的方法模拟现实世界中的光照效果.   场景中模型身上的光反射到相机中的光线: 1.漫反射:产生明暗效果 2.高光反射:产生镜面反射,物体中有最亮且比较耀眼的一部分 3.自发光: 4.环 ...

  2. Python实现机器学习算法：感知机

    ''' 数据集:Mnist 训练集数量:60000 测试集数量:10000 ------------------------------ 运行结果: 正确率:81.72%(二分类) ''' impor ...

  3. 《C语言程序设计》指针篇<一>

    指针 指针是C语言的精华,同时也是其中的难点和重点,我在近日对这一部分内容进行了重新的研读,把其中的一些例子自己重新编写和理解了一遍.此篇博客的内容即是我自己对此书例子的一些理解和总结. 一.大问题: ...

  4. 2. mysql 语句

    基础语句 创建表 DROP TABLE IF EXISTS student;CREATE TABLE student ( id ) NOT NULL AUTO_INCREMENT, sname ) N ...

  5. java web 工程更改名字

    如图: 将工程名字struts2Project02更改为struts2Project03,步骤如下: 1. 右键工程名字,选中properties,如图 2.更改项目名字 3.第2步已经真正把项目名字 ...

  6. RN原生调用一：安卓Toast

    首先安卓原生方法:Toast.makeText(getApplicationContext(), "默认的Toast", Toast.LENGTH_SHORT); 在RN中js如何 ...

  7. python的json模块的dumps，loads，dump，load方法介绍

    dumps和loads方法都在内存中转换, dump和load的方法会多一个步骤,dump是把序列化后的字符串写到一个文件中,而load是从一个文件中读取字符串 将列表转为字符串 >>&g ...

  8. iOS获取UUID

    转自:<iOS获取设备的唯一标识的方法总结以及最好的方法> 参考:<获取iOS设备唯一标识> 总结一下: 1.代码采用CFUUID+KeyChain的实现方式. 2.CFUUI ...

  9. Anaconda 简单介绍 -- 环境管理

    前面介绍了 Anaconda 的安装,接下来介绍一下 简单使用,后续并实时更新. 常用操作命令: 环境操作 1.查看环境管理的全部命令帮助: conda env -h 2.查看当前系统下的环境: co ...

  10. lua --- dofile、loadfile、require

    loadfile: 1>编译代码成中间码并且返回编译后的chunk作为一个函数,而不执行代码 2>在发生错误的情况下,不会抛出异常,但会返回nil和错误信息 3>运行一个文件多次的话 ...