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. 51nod1057-N的阶乘(大数乘法巧解)

    这道大数乘法开始我是想套板子模拟的..然后就发现2/3的例子都wa了.(惊了).然后在思考后发现n2的板子的确过不了这么多的大数.(不看题的下场).所以,我在网上发现了分块求大数的方法.%%% 思路来 ...

  2. maven web项目配置log4j,及log4j参数设置

    本文为博主原创,转载须注明转载地址: 1.在maven项目中引入相关的依赖: 需要依赖的jar为: <!-- 配置日志 --> <dependency> <groupId ...

  3. HDU 4301 Divide Chocolate（DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=4301 题意: 有一块n*2大小的巧克力,现在某人要将这巧克力分成k个部分,每个部分大小随意,问有多少种分法. 思 ...

  4. OpenLayers中的球面墨卡托投影

    最近看OpenLayers,研究到地图投影时找到官方的文档,就翻译了一下,由于英文能力差,翻译不好的地方,请看原文 原文地址:http://docs.openlayers.org/library/sp ...

  5. phpstorm软件配置端口问题

    phpstorm默认的端口号是:63342 但是我装的apache服务器的默认端口是80 网上查找资料,都说可以加listen的端口,比如这里   #Listen 12.34.56.78:80 Lis ...

  6. ERR! registry error parsing json

    报错日志: ERR! registry error parsing json ERR! registry error parsing json 解决过程: 从github上克隆一个项目,在npm i的 ...

  7. 解决输入git branch 进入编辑状态，mac下出现END，无法返回

    core.pager指定 Git 运行诸如log.diff等所使用的分页器,你能设置成用more或者任何你喜欢的分页器(默认用的是less), 当然你也可以什么都不用,设置空字符串: git conf ...

  8. php中if(\$a==\$b)和if(\$a=\$b)什么区别？

    <?php // if($a==$b)和if($a=$b)什么区别? $a = 1; $b = 1; if ($a == $b) { // 通过 echo '通过'.PHP_EOL; } if ...

  9. leecode第四题（寻找两个有序数组的中位数）

    题解: class Solution { public: double findMedianSortedArrays(vector<int>& nums1, vector<i ...

  10. Centos 7 Docker安装配置

    版本介绍 Docker从1.13版本之后采用时间线的方式作为版本号,分为社区版CE和企业版EE.社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收费服务,比如经过官方测试认证过的基础设 ...