Highcharts - 快速指南
Highcharts - Overview
Highcharts是一个纯粹的基于JavaScript的图表库，旨在通过添加交互式图表功能来增强Web应用程序。 它支持各种图表。 在Chrome，Firefox，Safari，Internet Explorer（IE）等标准浏览器中使用SVG绘制图表。 在传统的IE 6中，VML用于绘制图形。
Highcharts图书馆的特点
现在让我们讨论一下Highcharts图书馆的一些重要特征。
Compatability - 在所有主流浏览器和Android和iOS等移动平台上无缝工作。
Multitouch Support - 支持基于触摸屏的平台上的多点触控，如Android和iOS.Ideal，适用于iPhone/iPad和基于Android的智能手机/平板电脑。
Free to Use - 开源，可以免费用于非商业目的。
Lightweight - highcharts.js核心库，大小接近35KB，是一个非常轻量级的库。
Simple Configurations - 使用json定义图表的各种配置，非常容易学习和使用。
Dynamic - 即使在生成图表后也允许修改图表。
Multiple axes - 不限于x，y轴。 支持图表上的多个轴。
Configurable tooltips - 当用户将鼠标悬停在图表上的任意点时，就会出现Configurable tooltips提示。 Highcharts提供工具提示内置格式化程序或回调格式化程序，以编程方式控制工具提示。
DateTime support - 特别处理日期时间。 提供多个日期明智类别的内置控件。
Export - 通过启用导出功能将图表导出为PDF/PNG/JPG/SVG格式。
Print - 使用网页打印图表。
Zoomablity - 支持缩放图表以更精确地查看数据。
External data - 支持从服务器动态加载数据。 使用回调函数提供对数据的控制。
Text Rotation - 支持在任何方向上旋转标签。
支持的图表类型
Highcharts库提供以下类型的图表 -
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Line Charts 用于绘制基于线/样条曲线的图表。 |
| 2 | Area Charts 用于绘制区域明智的图表。 |
| 3 | Pie Charts 用于绘制饼图。 |
| 4 | Scatter Charts 用于绘制分散的图表。 |
| 5 | Bubble Charts 用于绘制基于气泡的图表。 |
| 6 | Dynamic Charts 用于绘制动态图表，用户可以在其中修改图表。 |
| 7 | Combinations 用于绘制各种图表的组合。 |
| 8 | 3D Charts 用于绘制3D图表。 |
| 9 | Angular Gauges 用于绘制车速表类型图表。 |
| 10 | Heat Maps 用于绘制热图。 |
| 11 | Tree Maps 用于绘制树图。 |
在随后的章节中，我们将通过示例详细讨论上述每种类型的图表。
Licence
Highcharts是开源的，可以免费用于非商业目的。 要在商业项目中使用Highcharts，请点击链接 - License and Pricing
Highcharts - Environment Setup
在本章中，我们将讨论如何设置要在Web应用程序开发中使用的Highcharts库。
Highcharts需要jQuery作为依赖项。 首先，我们将安装jQuery库，然后安装Highcharts库。
安装jQuery
有两种方法可以使用jQuery。
Download - 从jQuery.com本地下载并使用它。
CDN access - 您还可以访问CDN。 CDN将使您能够访问世界各地的区域数据中心; 在这种情况下，谷歌主机。 这意味着使用CDN将托管文件的责任从您自己的服务器转移到一系列外部服务器。 这也提供了一个优势，如果您的网页的访问者已经从同一CDN下载了jQuery副本，则不必重新下载。
使用Downloaded jQuery
使用以下脚本在HTML页面中包含jQuery JavaScript文件 -
<head>
<script src = "/jquery/jquery.min.js"></script>
</head>
使用CDN
我们在本教程中使用了jQuery库的CDN版本。
使用以下脚本在HTML页面中包含jQuery JavaScript文件 -
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
安装Highcharts
以下是使用Highcharts的两种方法。
Download - 从highcharts.com本地下载并使用它。
CDN access - 您还可以访问CDN。 CDN将使您能够访问世界各地的区域数据中心; 在这种情况下，Highcharts主机 - Code.Highcharts.Com。
使用Downloaded Highcharts
使用以下脚本在HTML页面中包含Highcharts JavaScript文件 -
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>
使用CDN
在本教程中，我们使用的是Highcharts库的CDN版本。
使用以下脚本在HTML页面中包含Highcharts JavaScript文件 -
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
Highcharts - Configuration Syntax
在本章中，我们将展示使用Highcharts API绘制图表所需的配置。
第1步:创建HTML页面
使用jQuery和Highcharts javascript库创建一个HTML页面。
HighchartsTestHarness.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://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() {
});
</script>
</body>
</html>
这里container div用于包含使用Highcharts库绘制的图表。
第2步:创建配置
Highcharts库使用json语法使用非常简单的配置。
$('#container').highcharts(json);
这里json表示json数据和配置，Highcharts库使用highcharts（）方法在容器div中绘制图表。 现在，我们将配置各种参数以创建所需的json字符串。
title
配置图表的标题。
var title = {
text: 'Monthly Average Temperature'
};
subtitle
配置图表的副标题。
var subtitle = {
text: 'Source: WorldClimate.com'
};
xAxis
配置自动收录器显示在X轴上。
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
yAxis
配置标题，绘制要在Y轴上显示的线条。
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
tooltip
配置工具提示。 在值（y轴）之后添加后缀。
var tooltip = {
valueSuffix: '\xB0C'
}
legend
将图例配置为显示在图表的右侧以及其他属性。
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
series
配置要在图表上显示的数据。 Series是一个数组，其中此数组的每个元素在图表上表示一行。
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]
}
];
第3步:构建json数据
结合所有配置。
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
第4步:绘制图表
$('#container').highcharts(json);
例子 (Example)
请考虑以下示例以进一步了解配置语法 -
highcharts_configuration.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://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: 'Monthly Average Temperature'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
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>
结果 (Result)
验证结果。
新页面打开Highcharts - Line Charts
折线图用于绘制基于线/样条曲线的图表。 在本节中，我们将讨论基于线和样条曲线的不同类型的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic line 基本折线图。 |
| 2 | 带数据标签 带有数据标签的图表。 |
| 3 | Ajax加载数据，可点击点 从服务器检索数据后绘制的图表。 |
| 4 | Time series, zoomable 带有时间序列的图表。 |
| 5 | Spline with inverted axes 具有反转轴的样条图。 |
| 6 | Spline with symbols 样条图表使用符号为热/雨。 |
| 7 | Spline with plot bands 样条带的样条图。 |
| 8 | 时间间隔不规则的时间数据 一组大量基于时间的数据的图表。 |
| 9 | Logarithmic axis 描绘对数轴的图表。 |
Highcharts - Area Charts
面积图用于绘制基于区域的图表。 在本节中，我们将讨论不同类型的基于区域的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Area 基本面积图。 |
| 2 | Area with negative values 具有负值的面积图。 |
| 3 | Stacked area 具有彼此堆叠的区域的图表。 |
| 4 | Percentage area 包含百分比数据的图表。 |
| 5 | Area with missing points 数据中缺少点的图表。 |
| 6 | Inverted axes 使用倒轴的区域。 |
| 7 | Area-spline 使用样条曲线的面积图。 |
| 8 | Area range 使用范围的面积图。 |
| 9 | Area range and line 使用范围和线的面积图。 |
Highcharts - Bar Charts
条形图用于绘制基于区域的图表。 在本节中，我们将讨论不同类型的条形图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Bar 基本条形图。 |
| 2 | Stacked Bar 条形图有条形堆叠在一起。 |
| 3 | Negative Stacked area 条形图与负堆栈。 |
Highcharts - Column Charts
柱形图用于绘制基于列的图表。 在本节中，我们将讨论不同类型的基于列的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Column 基本柱形图。 |
| 2 | Column with negative values 柱形图具有负值。 |
| 3 | Stacked column 列具有相互堆叠的列。 |
| 4 | Stacked and Grouped column 带有堆积和分组形式的列的图表。 |
| 5 | Column with stacked percentage 图表与堆积百分比。 |
| 6 | Column with rotated labels 列图中带有旋转标签的柱形图。 |
| 7 | Column with drilldown 具有向下钻取功能的柱形图。 |
| 8 | Column with fixed placement 具有固定位置的柱形图。 |
| 9 | HTML表格中定义的数据 使用HTML表中定义的数据的柱形图。 |
| 10 | Column Range 使用范围的柱形图。 |
Highcharts - Pie Charts
饼图用于绘制基于饼图的图表。 在本节中，我们将讨论不同类型的基于饼图的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Basic Pie 基本饼图。 |
| 2 | Pie with Legends 饼图与传说。 |
| 3 | Donut Chart 甜甜圈图表。 |
| 4 | Semi circle Donut 半圈甜甜圈图表。 |
| 5 | Pie with drill down 具有向下钻取功能的饼图。 |
| 6 | Pie chart with gradient 饼图与渐变填充。 |
| 7 | Pie chart with monochrome 饼图与单色填充。 |
Highcharts - Scatter Charts
散点图用于绘制基于散点图的图表。 在本节中，我们将讨论基于散点图的不同类型的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | 散点图 散点图。 |
Highcharts - Bubble Charts
气泡图用于绘制基于气泡的图表。 在本节中，我们将讨论不同类型的基于气泡的图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | 气泡图 气泡图。 |
| 2 | 3D气泡图 3D气泡图。 |
Highcharts - Dynamic Charts
动态图表用于绘制基于数据的图表，其中数据在渲染图表后可以更改。 在本节中，我们将讨论不同类型的动态图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Spline updating each second 样条图每秒更新一次。 |
| 2 | 单击以添加一个点 具有点附加功能的图表。 |
Highcharts - Combinations
组合图表用于绘制混合图表; 例如，带饼图的条形图。 在本节中，我们将讨论不同类型的组合图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Column, Line and Pie 带有列，线和饼图的图表。 |
| 2 | 双轴，线和柱 双轴，直线和列的图表。 |
| 3 | Multiple Axes 具有多个轴的图表。 |
| 4 | Scatter with regression line 带回归线的散点图。 |
Highcharts - 3D Charts
3D图表用于绘制三维图表。 在本节中，我们将讨论不同类型的3D图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | 3D专栏 3D柱形图。 |
| 2 | 带有null的3D列 具有null和0值的3D柱形图。 |
| 3 | 3D列与堆叠 3D柱形图与堆叠和分组。 |
| 4 | 3D派 3D饼图。 |
| 5 | 3D甜甜圈 3D甜甜圈图表。 |
Highcharts - Angular Gauges
角度计图表用于绘制仪表/仪表类型图表。 在本节中，我们将讨论不同类型的角度计图表。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Angular Gauge 角度表。 |
| 2 | 实心仪表 实心图表。 |
| 3 | Clock 时钟。 |
| 4 | Gauge with dual axes 带双轴的仪表图。 |
| 5 | VU Meter VU表图表。 |
Highcharts - Heat Maps
热图图表用于绘制热图类型图表。 在本节中，我们将讨论不同类型的热图。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | Heat Map 热图。 |
| 2 | 大热图 大热图。 |
Highcharts - Tree Maps
树形图图用于绘制树形图类型图表。 在本节中，我们将讨论不同类型的树图。
| Sr.No. | 图表类型和描述 |
|---|---|
| 1 | 树地图 树图与颜色轴。 |
| 2 | Tree Map with Levels 树级地图与级别。 |
| 3 | Large Tree Map 大树地图。 |
