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. 【译】第20节---数据注解-InverseProperty

    原文:http://www.entityframeworktutorial.net/code-first/inverseproperty-dataannotations-attribute-in-co ...

  2. .Net ASP.NET 打开指定文件夹

    比如要打开指定的文件夹,而不是弹出对话框 System.Diagnostics.Process.Start(@"D:\"); 这样就打开了D盘,和正常打开D盘是一样的.

  3. Python 爬虫入门3种方法

    Python 2.0 url = "http://www.baidu.com" print '第一种方法' response1 = urllib2.urlopen(url) pri ...

  4. 【Ruby】【高级编程】正则

    #[[正则]]=beginsub 和 gsub 及它们的替代变量 sub! 和 gsub! 是使用正则表达式时重要的字符串方法.所有这些方法都是使用正则表达式模式执行搜索与替换操作.sub 和 sub ...

  5. 网站项目所有js css无法引用问题解决方案

    网站页面中的所有js css引用失效,路径确保正确,但是浏览器就是报找不到引用.仔细查找发现问题所在: 报错信息很详细了,就是.NET Framework 版本不同导致.同时也提供了两个解决方案:将. ...

  6. Codeforces Round #219 (Div. 2) D. Counting Rectangles is Fun 四维前缀和

    D. Counting Rectangles is Fun time limit per test 4 seconds memory limit per test 256 megabytes inpu ...

  7. mysql利用navicat导出表结构和表中数据

    LZ在网上搜索了要如何导出mysql的表结构和表中数据,发现有的方法不好用 记录一下好用的方式: 用navicat打开DB链接后,点击数据库,右击选择转储SQL文件,然后选择结构和数据: 之后弹出新的 ...

  8. art-template实战

    内容div <div id="sku-cont"> <div class="form-group col-lg-12"> <div ...

  9. Oracle（转换函数）

    在数据库中主要使用数据类型:字符,数字,日期(时间戳),所以这三种数据类型之间需要实现转换操作. 常用转换函数: 3.1.TO_CHAR()函数 将数据类型变为字符串. 日期格式化标记: 在TO_CH ...

  10. ORA-03113: end-of-file on communication channel（归档满处理方法）

    归档放在flash_recovery目录,由于归档占满了闪回目录,数据库启动报错ORA-03113: end-of-file on communication channel tail -1200f ...