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 ...
随机推荐
- 高级定时器TIM1&TIM8
高级定时器 初识stm32高级定时器: (1)高级控制定时器(TIM1 和 TIM8)和通用定时器在基本 ...
- 剥开比原看代码12：比原是如何通过/create-account-receiver创建地址的？
作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchai ...
- 【C#】C# in deep 笔记
1. delegate and events http://csharpindepth.com/Articles/Chapter2/Events.aspx 2. 显式类型 和 隐式类型 3. 静态类型 ...
- 设置pip代理
参考: python-proxy-for-pip 设置pip代理 pip install -i http://pypi.douban.com/simple xxx 2018.4
- 【OJ】 : 容斥原理计算出 1< =n < 1e9 中是2,3,5倍数的整数的数量
最近ACM时遇到个题,题意如下. 问题描述: 有个1到n的数列,数一下其中能够被 2, 的时候有 ,,,,.这5个数满足条件,所以我们应该输出 5 . 输入 多组输入到文件尾,每组输入一个 n (n ...
- python FAE
1.python 时间戳用localtime转换时间戳较大时报错 ValueError: timestamp out of range for platform time_t 2.python面向对象 ...
- BZOJ 2754 【SCOI2012】 喵星球上的点名
题目链接:喵星球上的点名 首先可以发现姓和名两个串就是逗你玩的.在两个串中间插入一个\(10001\),当成一个串做就可以了. 于是我们的问题转化为了: 有\(n\)个串\(A_1,A_2,\dots ...
- js，jq获取父，兄弟，子节点整理
js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...
- 要使用myConfig.properties配置文件作为实体类的映射文件的话,格式要用=,最关键的要和实例类中通过反射获取值的KEY要一样,不样会反射取不到值
ABC=https://fsdfsdf.iy.comABCId=L2345345ZhP345ABCKey=sfdf4234f234dhE6Ut0aABCName=Gassd010 上面是myConfi ...
- 通过TortoiseSVN进行文件（夹）外链 External File
1.假设将server/a.lua文件外链到client文件夹中 2.在client文件夹空白处右键->TortoiseSVN->Properties->New->Extern ...