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 ...
随机推荐
- propsData 选项 全局扩展的数据传递
propsData 不是和属性有关,他用在全局扩展时进行传递数据,结合自定义属性获取属性值的props一起使用 html <div id="app"> <regi ...
- 今天就整一个bug了
BeanPostProcessor加载次序及其对Bean造成的影响分析 SSM整合出现not found for dependency: expected at least 1 bean which ...
- 原生js仿jquery一些常用方法
原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
- 安装Windows10系统注意事项
硬盘的AHCI开启: 报错解决:将Secure Boot 设置为Disabled win10系统下载地址:ed2k://|file|cn_windows_10_multi-edition_versi ...
- Tp5.1使用导出Excel
composer require phpoffice/phpexcel 不管它的警告,都能用的. use PHPExcel; use PHPExcel_IOFactory; public static ...
- 【转】Qt鼠标键盘事件
http://blog.csdn.net/lovebird_27/article/details/50351336 Qt 程序需要在main()函数创建一个QCoreApplication对象,然后调 ...
- Bootstrap 4正式发布还有意义吗？
历经三年开发,前端框架Bootstrap 4正式发布了.然而今天的Web世界已经和当初Mark Otto发布Bootstrap时的情况大为不同,一些开发者由此质疑它的更新是否还有意义. V4版本的主要 ...
- python测试相关小问题
实操中的小问题 pycharm 一次运行多个test configuration 项目分层,分包之后,tests也分到不同层的不同project里了,tests也分开. 为了防止基层模块改动,影响上层 ...
- MYSQL常用函数（类型转化函数）
为了进行数据类型转化,MySQL提供了CAST()函数,它可以把一个值转化为指定的数据类型.类型有:BINARY,CHAR,DATE,TIME,DATETIME,SIGNED,UNSIGNED 示例: ...
- Codeforces 600 E - Lomsat gelral
E - Lomsat gelral 思路1: 树上启发式合并 代码: #include<bits/stdc++.h> using namespace std; #define fi fir ...