Highcharts 配置语法
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 配置语法的更多相关文章
- Highcharts 配置语法；Highcharts 配置选项详细说明
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...
- Highcharts 配置选项详细说明
Highcharts 配置选项详细说明 Highcharts 提供大量的配置选项参数,您可以轻松定制符合用户要求的图表,本章节为大家详细介绍Highcharts 配置选项使用说明: 参数配置(属性+事 ...
- Git 中 .gitignore 的配置语法
一.前言 在日常的开发中,当我们需要将一个项目提交到 Git 时,并不是所有的文件都需要提交,比如一些自动生成的文件,类似于 .idea 文件.class 文件等,这时候就可以使用.gitignore ...
- Nginx详解八：Nginx基础篇之Nginx请求限制的配置语法与原理
Nginx的请求限制: 连接频率的限制:limit_conn_module 配置语法:limit_conn_zone key zone=name:size;默认状态:-配置方法:http 配置语法:l ...
- Nginx详解四：Nginx基础篇之目录和配置语法
一.安装目录 命令:rpm -ql nginx 二.编译参数 命令:nginx -V 三.Nginx基本配置语法 修改主配置文件 当Nginx读配置文件读到include /etc/nginx/con ...
- Nginx配置语法和日志
nginx配置 配置文件 重启服务 http请求 nginx日志 一共有两个日志文件 在配置文件中添加这个,就可以在日志文件中看到请求的userAgent 配置语法的检查 nginx重新加载配置 发送 ...
- nginx目录及配置语法
一.Nginx安装目录 1.查看安装目录. 采用yum的方式安装,其实都是安装的一个一个的 pm 包,故可采用如下命令查看 rpm -ql nginx 遵循了 rpm 包管理规范. 2.安装目录详解 ...
- Nginx默认配置语法
Nginx默认配置语法 1. 我们进入 /etc/nginx/目录下,打开 nginx.conf文件 2. 我们来解析下 这里面标签和各模块的作用 # 设置nginx服务的系统使用用户 user ...
- Nginx代理服务——常用的配置语法
可以到官方查看所有代理的配置语法http://nginx.org/en/docs/http/ngx_http_proxy_module.html 缓存区 Syntax:proxy_buffering ...
随机推荐
- Docker：Stacks
Prerequisites Install Docker version 1.13 or higher. Get Docker Compose as described in Part 3 prere ...
- Docker2之Service
Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...
- java笔试总结
1. Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式.面向字节的操作为以8位为单位对二进制的数据进行操作,对数据不进行转换,这些类都是InputStream和Out ...
- Spring项目JUnit测试报错ClassNotFoundException解决
Eclipse项目上有红色感叹号,各包显示正常.用JUnit测试部分能运行,部分报错,报错如下: Class not found UserTestjava.lang.ClassNotFoundExce ...
- shp与json互转（转载）
转自:http://blog.sina.com.cn/s/blog_673c98be0102v78i.html 对于搞GIS开发的,这2种数据格式太重要了. 一.shp转json 这个要容易些,方法也 ...
- strtotime 获取之前，之后时间
一年之前 <?php echo strtotime('-1 year'); ?> 一年之后 <?php echo strtotime('+1 year'); ?> 一月之前 & ...
- Web阶段总结以及感受（附带大一结束暑期学习的纲要）
之前本人大一因为不是计算机专业的,而又喜欢计算机,所以在大一临时转专业到了计算机院(费劲一番波折),冷笑,还好,从大二开始就可以正式学习喜欢的软件了. 首先,前两天看到一个讲座,提到学习方法,并说出总 ...
- Python3 数据库连接
PyMySQL是在Python3.x版本中用于连接MySQL服务器的一个库,Python2中使用mysqldb. 数据库连接 连接数据库前,请先确认一下事项: 已经创建数据库testdb. 在test ...
- C#6.0 语法
属性表达式 属性值初始化 public string name {get;set;} = "张三"; 函数表达式 NULL检查运算符 var aa = Created?.Date; ...
- DOM结构及优化
1.DOM树中三种常见的DOM节点: 1>元素节点:上图中<a>,<h1>等都是元素节点,即标签 2>文本节点:向用户展示的内容,如...中的"文档标题& ...