Highcharts是一个基于JavaScript的纯粹图表库，旨在通过添加交互式图表功能来增强Web应用程序。它支持各种图表。在标准浏览器(例如Chrome，Firefox，Safari，Internet Explorer(IE))中使用SVG绘制图表。在旧版IE 6中，VML用于绘制图形。

Highcharts库的功能

现在让我们讨论Highcharts库的一些重要功能。

• 兼容性-在所有主要的浏览器和移动平台(如android和iOS)上都可以正常工作。

• 多点触控支持-在基于触摸屏的平台(如android和iOS)上支持多点触控。适用于iPhone / iPad和基于android的智能手机/平板电脑。

• 免费使用-开源，可免费用于非商业目的。

• 轻量级的-highcharts.js核心库，大小接近35KB，是一个非常轻量级的库。

• 简单配置-使用json定义图表的各种配置，非常易于学习和使用。

• 动态-即使在生成图表后也可以修改图表。

• 多轴-不限于x，y轴。支持图表上的多轴。

• 可配置的工具提示-当用户将鼠标悬停在图表上的任何点上时，就会出现工具提示。 Highcharts提供了工具提示内置的格式化程序或回调格式化程序，以通过编程方式控制工具提示。

• DateTime支持-专门处理日期时间。对日期明智的类别提供许多内置控件。

• 导出-通过启用导出功能将图表导出为PDF / PNG / JPG / SVG格式。

• 打印-使用网页打印图表。

• 可缩放性-支持缩放图表以更精确地查看数据。

• 外部数据-支持从服务器动态加载数据。使用回调函数提供对数据的控制。

• 文本旋转-支持标签向任意方向旋转。

支持的图表类型

Highcharts库提供以下类型的图表-

在接下来的章节中，我们将通过示例详细讨论上述每种图表。

执照

Highcharts是开源的，可以免费用于非商业目的。为了在商业项目中使用Highcharts，请点击链接-许可和定价

高图-环境设置

在本章中，我们将讨论如何设置用于网络应用程序开发的Highcharts库。

Highcharts需要jQuery作为依赖项。首先，我们将安装jQuery库，然后安装Highcharts库。

安装jQuery

有两种使用jQuery的方法。

• 下载-从jQuery.com本地下载并使用。

• CDN访问权限-您还可以访问CDN。 CDN将使您可以在世界各地访问区域数据中心；在这种情况下，由Google托管。这意味着使用CDN将将文件托管的责任从您自己的服务器转移到一系列外部服务器上。这还提供了一个优势，即如果您网页的访问者已经从同一CDN下载了jQuery副本，则不必重新下载它。

使用下载的jQuery

使用以下脚本在HTML页面中包含jQuery JavaScript文件-

使用CDN

在本教程中，我们一直在使用jQuery库的CDN版本。

使用以下脚本在HTML页面中包含jQuery JavaScript文件-

安装图表

以下是使用Highcharts的两种方法。

• 下载-从highcharts.com本地下载并使用。

• CDN访问权限-您还可以访问CDN。 CDN将使您可以在世界各地访问区域数据中心；在这种情况下，Highcharts主机-Code.Highcharts.Com。

使用下载的Highcharts

使用以下脚本在HTML页面中包含Highcharts JavaScript文件-

使用CDN

在本教程中，我们一直在使用Highcharts库的CDN版本。

使用以下脚本在HTML页面中包含Highcharts JavaScript文件-

高图-配置语法

在本章中，我们将展示使用Highcharts API绘制图表所需的配置。

步骤1：建立HTML网页

使用jQuery和Highcharts javascript库创建HTML页面。

HighchartsTestHarness.htm

在这里，容器div用于包含使用Highcharts库绘制的图表。

步骤2：创建配置

Highcharts库使用json语法使用非常简单的配置。

$('#container').highcharts(json);

此处的json表示Highcharts库使用highcharts()方法在容器div中绘制图表的json数据和配置。现在，我们将配置各种参数以创建所需的json字符串。

标题

配置图表标题。

var title = {
   text: 'Monthly Average Temperature'   
};

字幕

配置图表的字幕。

var subtitle = {
   text: 'Source: WorldClimate.com'
};

x轴

配置股票代号以显示在X轴上。

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

y轴

配置标题，在Y轴上显示的绘图线。

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};  

工具提示

配置工具提示。将后缀添加到值(y轴)之后。

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]
   }
];

步骤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);

例

考虑以下示例，以进一步了解配置语法-

highcharts_configuration.htm

结果

验证结果。

高图-折线图

折线图用于绘制基于折线/样条的图表。在本节中，我们将讨论基于折线和样条图的不同类型。

高图-面积图

面积图用于绘制基于面积的图。在本节中，我们将讨论基于区域的图表的不同类型。

高图-条形图

条形图用于绘制基于面积的图表。在本节中，我们将讨论基于条形图的不同类型。

高图-柱形图

柱形图用于绘制基于柱形的图表。在本节中，我们将讨论基于列的图表的不同类型。

高图-饼图

饼图用于绘制基于饼图的图表。在本节中，我们将讨论基于饼图的不同类型。

高图-散点图

散点图用于绘制基于散点的图表。在本节中，我们将讨论基于散点图的不同类型。

高图-气泡图

气泡图用于绘制基于气泡的图表。在本节中，我们将讨论基于气泡的图表的不同类型。

高图-动态图表

动态图表用于绘制基于数据的图表，其中数据在呈现图表后可能会发生变化。在本节中，我们将讨论动态图表的不同类型。

高图-组合

组合图用于绘制混合图；例如，条形图和饼图。在本节中，我们将讨论组合图的不同类型。

Highcharts-3D图表

3D图表用于绘制3D图表。在本节中，我们将讨论不同类型的3D图表。

高图-角规

角规图表用于绘制仪表/量规类型图表。在本节中，我们将讨论不同类型的角度规图表。

高图-热图

热图图表用于绘制热图类型图表。在本节中，我们将讨论不同类型的热图。

高图-树图

树状图用于绘制树状图。在本节中，我们将讨论树形图的不同类型。