Highcharts_Highstock_Highmaps使用教程

下载 0

快召唤伙伴们来围观吧
微博 QQ QQ空间 贴吧
文档嵌入链接
<iframe src="https://www.slidestalk.com/u3815/Highcharts_Highstock_Highmaps32403?embed" frame border="0" width="640" height="360" scrolling="no" allowfullscreen="true">复制
微信扫一扫分享
已成功复制到剪贴板

乱世佳人

发布于

6年前

2049

人观看

#信息技术

Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。 Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图

展开查看详情

1 .

2 . 目录致谢快速上手 Highcharts 系列软件简介 1 分钟上手 Highcharts 文件下载与使用通过 npm 安装通过 Bower 安装如何设置图表配置选项 Highcharts 兼容性 Highcharts 使用协议基础教程图表主要组成图表配置标题坐标轴数据列颜色数据提示框图例版权信息 HTML标签标示线标示带图表缩放语言文字标签及字符串格式化钻取功能 3D 图表响应式数据处理数据处理概述服务端动态渲染图表 Ajax 请求数据接口处理文本或文本数据文件数据功能模块图表类型本文档使用书栈(BookStack.CN) 构建 - 2 -

3 . 图表类型直线图曲线图面积图及面积范围图柱状图和条形图饼图范围图散点图及气泡图漏斗图及金字塔图极地图瀑布图误差线图箱线图高级特性堆叠图自由绘图国际化图表导出模块图表导出模块概述客户端导出搭建导出服务器命令行导出导出 Excel 数据文件图表设计及样式图表设计及样式颜色主题插件扩展插件扩展概述创建插件提交插件到官方插件库地图开始使用 Highmaps 地图数据集经纬度地图导航器 Highstock 开始使用 Highstock 本文档使用书栈(BookStack.CN) 构建 - 3 -

4 . 范围选择器导航器滚动条 K 线图技术指标自定义技术指标 Highcharts.NET Highcharts .NET 使用教程本文档使用书栈(BookStack.CN) 构建 - 4 -

5 .致谢致谢当前文档《Highcharts、Highstock、Highmaps 使用教程》由进击的皇虫使用书栈 (BookStack.CN) 进行构建，生成于 2018-07-12。书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。文档内容由网友们编写和整理，书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，将知识准确、高效且有效地传递给每一个人。同时，如果您在日常工作、生活和学习中遇到有价值有营养的知识文档，欢迎分享到书栈(BookStack.CN) ，为知识的传承献上您的一份力量！如果当前文档生成时间太久，请到书栈(BookStack.CN) 获取最新的文档，以跟上知识更新换代的步伐。文档地址：http://www.bookstack.cn/books/Highcharts-tutorial 书栈官网：http://www.bookstack.cn 书栈开源：https://github.com/TruthHun 分享，让知识传承更久远！感谢知识的创造者，感谢知识的分享者，也感谢每一位阅读到此处的读者，因为我们都将成为知识的传承者。本文档使用书栈(BookStack.CN) 构建 - 5 -

6 .快速上手快速上手 Highcharts 系列软件简介 1 分钟上手 Highcharts 文件下载与使用通过 npm 安装通过 Bower 安装如何设置图表配置选项 Highcharts 兼容性 Highcharts 使用协议本文档使用书栈(BookStack.CN) 构建 - 6 -

7 .Highcharts 系列软件简介 Highcharts 系列软件简介兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库；成熟稳定的商业软件，72 个全球 100 强企业共同的信任。一、产品简介 Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。 1. Highcharts Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。 Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。相关链接产品介绍在线实例 API 文档 2. Highstock Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。相关链接产品介绍在线实例 API 文档 3. Highmaps Highmaps 是一款基于 HTML5 的优秀地图组件。 Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。 Highmaps 可以单独使用，也可以作为 Highcharts 的一个组件来使用。相关链接产品介绍本文档使用书栈(BookStack.CN) 构建 - 7 -

8 .Highcharts 系列软件简介在线实例 API 文档二、产品优势 1. 兼容性 Highcharts 系列软件支持IE6 +、iPhone/iPad、Android 等目前市面上所有主流的浏览器，即开创性的支持 IE6 浏览器，又前瞻性的支持手机浏览器（响应式、缩放、手势操作等）。这里可以查看我们提供的兼容性测试及说明文档。 2. 开源个人及非商业使用完全免费，并且提供完整的源代码，方便您学习和研究；同时基于 Github 开源社区，我们可以第一时间吸取用户反馈及社区力量，丰富和完善我们的产品。对于商业用途，只需要支付少量的授权费用即可使用我们的产品，同时我们会提供相应的技术支持服务。 3. 纯 Javascript Highcharts 系列软件完全基于本地浏览器技术，不需要任何插件（例如 Flash、java），不需要安装任何服务器环境或动态语言库支持，只需要两个 js 文件即可运行。同时基于 HTML5 技术，方便跨平台使用，您只需要创建一套程序即可运行在 PC、手机、嵌入设备上。 4. 图表类型丰富 Highcharts 支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中很多图表可以集成在同一个图形中形成综合图。 Highstock 支持股票走势图、K线图及大数据量时间轴图表，方便您创建股票、大数据量时间轴图表。 Highmaps 支持各种地图，支持经纬度、GeoJSON 标准地图数据，方便您创建于地理位置相关数据可视化图表。 5. 丰富的交互特性提供丰富的 API 接口，方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。支持众多的 Javascript 事件，结合jQuery、MooTools、Prototype 等 Javascript 框架提供的 Ajax 接口，可以实时地从服务器取得数据并实时刷新图表。 6. 多轴支持对于需要比较的数据，Highcharts 系列软件提供多轴支持。并且可以针对每个轴设置其位置、文字和样式等属性。本文档使用书栈(BookStack.CN) 构建 - 8 -

9 .Highcharts 系列软件简介 7. 动态提示框当鼠标悬停在图表上的数据点时，Highcharts 系列软件支持显示信息提示框，当然，显示的内容和样式可以自己指定和设置。 8. 图表导出和打印功能你可以将 Highcharts 系列软件生成的图表导出为 PNG、JPG、PDF 和 SVG 格式文件或直接在网页上打印出来。 9. 图表缩放可以设置图表的缩放、平移、手势缩放，让你更方便查看图表数据及交互互动。 Highstock 还支持滚动条、范围选择器、日期选择器等更多高级功能。 10. 支持外部数据加载 Highcharts 系列软件支持多种数据形式，可以是 Javascript 数组、json 文件、json 对象、表格数据、CSV 文件等，这些数据来源可以是本地文件、数据接口，甚至是不同网站。 11. 支持扩展及二次开发 Highcharts 提供插件机制，方便您进行二次开发；同时也有非常多的社区贡献的插件供您使用；另外我们也提供相关的图表定制、项目开发等技术支持、项目合作业务。三、服务优势 Highcharts 系列软件是由专业的图表软件厂商 HIGHSOFT 开发的，第一个版本是在 2009年发布的，截止到目前已经有 3 款成熟的图表软件及相关的云服务。在全球范围内客户众多，包括 72 个全球 100 强企业，国内的知名企业包括阿里巴巴、支付宝、中国移动等也都有在使用 Highcharts系列软件。在国内，Highcharts 系列软件由简数科技提供全面、完善服务，让更多人用上优秀的产品。 1. 专注于数据可视化图表 HIGHSOFT 一直专注于提供优秀的图表软件，经过 8 年的发展，目前已经是市面上 Web 图表的领导者，下图表示了 Highcharts 与其他知名图表软件的受欢迎程序的趋势图 2. 专业的技术支持服务针对购买授权或购买技术支持服务的客户，我们提供更加专业及周到的技术支持服务。服务的内容包括软件使用咨询服务，功能可否实现、技术方案是否可行咨询服务，子版本更新维护服务等；服务的形式是提供远程电话、远程实时聊天、电子邮件与我们的一线工程师联系；服务时间是 5 * 8小时（工作日 10:00 ~ 18:00）。本文档使用书栈(BookStack.CN) 构建 - 9 -

10 .Highcharts 系列软件简介另外我们还提供高级的图表扩展开发、数据可视化项目合作开发等各种高级的图表定制服务。技术支持服务图表定制服务 3. 完善的技术社区我们提供完善的技术社区，目前已经拥有包括技术社区、QQ 交流群、Github 开源项目等众多社区支持，同时我们也投入大量的技术人员参与技术社区维护、开源项目维护，让您在使用过程中可以更快速的完成您的数据可视化需求，让您的数据可视化更简单！技术社区第三方扩展官方插件（国外网站） Github 4. 简单易用的 API 我们提供非常方便的易用的 API文档，分层次词条、每个词条都对应有相应的实例演示、方便易用的搜索功能等。 Highcharts API 文档 Highstock API 文档 Highmaps API 文档 5. 丰富的实例除了正式对外发布的实例外，基于我们的代码托管平台 HCODE，已经累计有 3800 个实例代码运行在我们的系统中，这些代码可以方便的在 API 文档、社区帖子、教程中查看。立即创建代码 HCODE 使用文档意见建议原文: https://www.hcharts.cn/docs/start-introduction 本文档使用书栈(BookStack.CN) 构建 - 10 -

11 .1 分钟上手 Highcharts 1 分钟上手 Highcharts 获取 Highcharts 你可以通过以下几种方式获取 Highcharts ：直接引用我们提供的 CDN 服务，无需下载，高速稳定通过官网下载页面获取资源包，资源包包含所有相关文件的源代码及压缩版本，丰富的实例及使用说明文档，关于下载包的详细文件说明请参考资源包下载及使用通过 Npm， Bower 等第三方包管理工具下载引入 Highcharts Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是： 1. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 创建一个简单的图表在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小 1. <div id="container" style="width: 600px;height:400px;"></div> 然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，代码如下： 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>第一个 Highcharts 图表</title> 6. </head> 7. <body> 8.  9. <div id="container" style="width: 600px;height:400px;"></div> 10.  11. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 12. <script> 13. // 图表配置 14. var options = { 15. chart: { 16. type: 'bar' //指定图表的类型，默认是折线图（line） 17. }, 18. title: { 19. text: '我的第一个图表' // 标题 20. }, 本文档使用书栈(BookStack.CN) 构建 - 11 -

12 .1 分钟上手 Highcharts 21. xAxis: { 22. categories: ['苹果', '香蕉', '橙子'] // x 轴分类 23. }, 24. yAxis: { 25. title: { 26. text: '吃水果个数' // y 轴标题 27. } 28. }, 29. series: [{ // 数据列 30. name: '小明', // 数据列名 31. data: [1, 0, 4] // 数据 32. }, { 33. name: '小红', 34. data: [5, 7, 3] 35. }] 36. }; 37. // 图表初始化函数 38. var chart = Highcharts.chart('container', options); 39. </script> 40. </body> 41. </html> 这样你的第一个图表就诞生了！在线试一试原文: https://www.hcharts.cn/docs/start-helloworld 本文档使用书栈(BookStack.CN) 构建 - 12 -

14 .文件下载与使用建议初学者从我们提供的例子代码入手，我们提供的丰富例子可以让你轻松入门。 2、在线 CDN 服务您也可以直接引用我们的在线 CDN 服务，我们的 CDN 服务已经累计为上千个项目、企业提供稳定的服务，目前我们的 CDN 提供所有相关的文件，并提供 Https 协议访问，您可以不用下载即可享受高速的 CDN 服务。更多详情详见：简数 CDN 3、在线实例 Highcharts 在线演示 Highstock 在线演示 Highmaps 在线演示另外这里有简单例子，供兼容性测试 Highcharts 在线演示 Highstock 在线演示 Highmaps 在线演示二、文件的使用 1、基础使用 Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js ，例如引入下面的文件即可创建基础的图表了。 1. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 注：Highcharts 从 4.2.0 开始，已经不依赖 jQuery（参考例子），如果你的页面中不需要 jQuery，那么无需引入；不依赖 jQuery 的原因是我们将去掉了适配器并支持 CommonJS 模块标准，也就是说 Highcharts 可以在所有 CommonJS 规范下的环境中运行（例如 Nodejs），这也使得我们的产品可以结合目前市面上常用的库使用，例如 React、Browserify 、Webpack、Vue、AngularJS 等。 2、功能模块功能模块是在 Highcharts 主要功能的基础做的扩展，是由官方发布的功能包，常用功能模块有：更多图表类型扩展模块（highcharts-more.js） 3D 图表模块（highcharts-3d.js）导出功能模块（modules/exporting.js）金字塔图表类型（modules/funnel.js）钻取功能模块（modules/drilldown.js）数据加载功能模块（modules/data.js）本文档使用书栈(BookStack.CN) 构建 - 14 -

15 .文件下载与使用更多模块可以在下载的资源包的 modules 目录找到，具体的功能我们会在后面的教程中讲解。使用功能模块很简单，只需要引入对应的文件即可，唯一需要注意的是保证 highcharts.js 的引用顺序是在功能模块之前。例如启用导出功能时需要引入的文件及顺序是： 1. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 2. <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script> 3. Highstock 和 Highmaps Highstock 和 Highmaps 是另外两款针对不同使用场景的图表产品，三款产品之间相互独立又有密切关系，他们关系和混合使用的说明如下 1）三款产品简介 Highcharts 基础图表 Highstock 股票及大数据量时间轴图表 Highmaps 地图 2）相关之间的关系 Highstock 是完全包含 Highcharts 的，是在 Highcharts 的基础上增加了更多高级功能；Highmaps 则完全独立，不过我们提供了地图功能模块 map.js （在 Highmaps 资源包的 modules 目录）供 Highcharts 或 Highstock 调用。 3）混合使用（重要） A. Highcharts + Highstock 时只需要引入 highstock.js 1. <script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> B. Highcharts + Highmaps 混合使用是需要引入 highcharts.js + map.js 1. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 2. <script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script> C. Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js 1. <script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> 2. <script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script> 注意：上面说到的 Highstock 是完全包含 Highcharts 的，如果在同一个页面重复引用的话就会报 #16 号错误。本文档使用书栈(BookStack.CN) 构建 - 15 -

16 .文件下载与使用 4. 主题我们提供图表更换主题功能，引入相应的主题 JS 文件即可改变图表样式。除默认主题样式外，我们提供了多款主题，另外你也可以根据需要自己设计图表主题。我们提供的主题文件放置在资源包的 themes 目录下，您可以按照自己需要引用。给图表加上灰色（Gray）主题时需要引用的文件如下： 1. <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 2. <script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script> 以上所有文件均可在我们的简数 CDN 服务页面找到。原文: https://www.hcharts.cn/docs/start-download 本文档使用书栈(BookStack.CN) 构建 - 16 -

17 .通过 npm 安装通过 npm 安装提示：npm 是 nodejs 包管理工具，可以方便的管理和使用 nodejs 包，如果你暂时没有用到，可以跳过本文。我们提供的 Highcharts npm 包，包含了 Highcharts、Highstock、Highmaps 及所有的功能模块，通过下面的命令即可完成安装 1. npm install highcharts --save 1. 加载 Highcharts 1. var Highcharts = require('highcharts'); 2. 3. // 在 Highcharts 加载之后加载功能模块 4. require('highcharts/modules/exporting')(Highcharts); 5. // 创建图表 6. Highcharts.chart('container', { 7. /*Highcharts 配置*/ 8. }); 2. 加载 Highstock 或 Highmaps Highstock 是完全包含 Highcharts的，所以没必要将两个文件都引用；Highmaps 可以单独使用也可以通过地图模块来引用。 1. var Highcharts = require('highcharts/highstock'); 2. 3. // 加载地图模块 4. require('highcharts/modules/map')(Highcharts); 如果只需要 Highmaps 功能，那么只需要引用 highmaps.js 即可 1. var Highcharts = require('highcharts/highmaps'); 3. import 语法 1. import Highcharts from 'highcharts/highstock'; 2. import HighchartsMore from 'highcharts/highcharts-more'; 3. import HighchartsDrilldown from 'highcharts/modules/drilldown'; 4. import Highcharts3D from 'highcharts/highcharts-3d'; 5. 6. HighchartsMore(Highcharts) 7. HighchartsDrilldown(Highcharts); 8. Highcharts3D(Highcharts); 本文档使用书栈(BookStack.CN) 构建 - 17 -

18 .通过 npm 安装 4. TypeScript 1. import * as Highcharts from 'highcharts'; 2. // 加载 Highstock 或 Highmaps 方式类似 3. // import Highcharts from 'highcharts/highstock'; 4. 5. // 加载导出模块 6. import * as Exporting from 'highcharts/modules/exporting'; 7. // 初始化导出模块 8. Exporting(Highcharts); 9. 10. // 其他模块的加载方式同上 11. 12. // 初始化图表 13. Highcharts.chart('container', { 14. // 配置 15. }); 5. 相关内容在 Vue 中使用 Highcharts 在 React 及 Webpack 中使用 Highcharts 在 ionic 中使用 Highcharts 原文: https://www.hcharts.cn/docs/install-from-npm 本文档使用书栈(BookStack.CN) 构建 - 18 -

19 .通过 Bower 安装通过 Bower 安装提示：Bower 是一个前端资源包管理工具，使用它可以方便的下载和管理前端包资源。如果你暂时没有用到 Bower，可以跳过本文。我们提供的 Bower 包，包含了 Highcharts、Highstock、Highmaps 及相关的 js 文件，通过以下命令即可安装 1. bower install highcharts --save 1. 加载 Highcharts 1. <script src="/bower_components/highcharts/highcharts.js"></script> 2. <script> 3. // 创建图表 4. Highcharts.Chart('container', { 5. /*Highcharts 配置*/ 6. }); 7. </script> 2. 加载功能模块在 Highcharts 的基础上增加模块功能，只需要引入相应的模块文件即可 1. <script src="/bower_components/highcharts/modules/exporting.js"></script> 3. 加载 Highstock 或 Highmaps Highstock 是完全包含 Highcharts的，所以没必要将两个文件都引用；Highmaps 可以单独使用也可以通过地图模块来引用。 1. <script src="/bower_components/highcharts/highstock.js"></script> 2. <script src="/bower_components/highcharts/modules/map.js"></script> 如果只需要 Highmaps 功能，那么只需要引用 highmaps.js 即可 1. <script src="/bower_components/highcharts/highmaps.js"></script> 原文: https://www.hcharts.cn/docs/install-from-bower 本文档使用书栈(BookStack.CN) 构建 - 19 -

20 .如何设置图表配置选项如何设置图表配置选项 1. Highcharts 是通过 JavaScript 对象的形式（JSON）来定义图表的配置参数。一、图表配置对象当使用图表构造函数 Highcharts.Chart 来初始化图表时，图表的配置对象是以第二个参数传递给该构造函数的。下面是示例代码（其中红色部分是配置对象）： 1. var options = { 2. chart: { 3. type: 'bar' 4. }, 5. title: { 6. text: 'Fruit Consumption' 7. }, 8. xAxis: { 9. categories: ['Apples', 'Bananas', 'Oranges'] 10. }, 11. yAxis: { 12. title: { 13. text: 'Fruit eaten' 14. } 15. }, 16. series: [{ 17. name: 'Jane', 18. data: [1, 0, 4] 19. }, { 20. name: 'John', 21. data: [5, 7, 3] 22. }] 23. }; 24. var chart = Highcharts.chart('container', options); 为了更好的使用 Highcharts 配置，你需要了解 JavaScript 对象的基本知识，下面我们简单的说一些 JavaScript 对象操作的要点。 1、对象的创建及赋值对于 C语言风格的开发者来说，下面的方式更符合编写习惯 1. var oiptions = new Object(); 2. 3. options.chart = new Object(); 4. options.chart.renderTo = 'container'; 5. options.chart.type = 'line'; 6. 本文档使用书栈(BookStack.CN) 构建 - 20 -

21 .如何设置图表配置选项 7. options.series = new Array(); 8. options.series[0] = new Object(); 9. options.series[0].name = '小明'; 10. options.series[0].data = new Array(1, 0, 4); 上述编写方式在 JS 里是不推荐的，更好的做法应该是 1. var options = { 2. chart: { 3. renderTo: 'container', 4. type: 'line' 5. }, 6. series: [{ 7. name: '小明', 8. data: [1, 0, 4] 9. }] 10. } 因为后面的方式更简单易读（当然上述两种方式运行的结果是一样的），这也是 JSON 的优势。创建配置对象后，我们就可以通过构造函数来创建图表了。 1. var chart = Highcharts.chart('container', options); 2、对象取值在 JS 中可以通过逗号或中括号的形式取对象的值，另外可以通过 delete 删除对象属性，示例代码如下： 1. options.chart.type // JS 对象取值 2. options.chart['type'] // 同上 3. delete options.chart.type // 删除属性 3、数组相关操作 JS 数组的创建可以用 new Array() 或更简单的 [] 来创建，其中 length 属性为数组的长度， push() 函数可以添加数组元素； join() 可以将数组转换成字符串，相应字符串可以通过的 split() 函数将其分隔成数组，下面用示例代码说明： 1. var series = [{ 2. name: '小明', 3. data: [] 4. }]; 5. 6. series.push({ 7. name: '小红', 8. data: [] 9. }); 10. 本文档使用书栈(BookStack.CN) 构建 - 21 -

22 .如何设置图表配置选项 11. series[2].name; 12. 13. 14. var arr = [1, 2, 4, 10, 20]; 15. var arrJoin = arr.join(); // 结果"1,2,4,10,20"，默认的分隔符是 , 16. arrJoin.split(','); // 将字符串按照 , 分隔，结果是 [1, 2, 4, 10, 20] 二、全局配置全局配置是针对同一个页面多个图表有效的配置，我们将多个图表的相同配置提取出来并配置在全局配置中（这样就可以省去在每个图表中配置一样的参数，这也是 Highcharts API 灵活性的表现）。实例代码如下： 1. // 全局配置，针对页面上所有图表有效 2. Highcharts.setOptions({ 3. chart: { 4. backgroundColor: { 5. linearGradient: [0, 0, 500, 500], 6. stops: [ 7. [0, 'rgb(255, 255, 255)'], 8. [1, 'rgb(240, 240, 255)'] 9. ] 10. }, 11. borderWidth: 2, 12. plotBackgroundColor: 'rgba(255, 255, 255, .9)', 13. plotShadow: true, 14. plotBorderWidth: 1 15. } 16. }); 17. 18. var chart1 = Highcharts.chart('container', { 19. xAxis: { 20. type: 'datetime' 21. }, 22. 23. series: [{ 24. data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 25. pointStart: Date.UTC(2010, 0, 1), 26. pointInterval: 3600 * 1000 // one hour 27. }] 28. }); 29. 30. var chart2 = Highcharts.chart('container', { 31. chart: { 32. type: 'column' 33. }, 34. 35. xAxis: { 36. type: 'datetime' 37. }, 本文档使用书栈(BookStack.CN) 构建 - 22 -

23 .如何设置图表配置选项 38. 39. series: [{ 40. data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 41. pointStart: Date.UTC(2010, 0, 1), 42. pointInterval: 3600 * 1000 // one hour 43. }] 44. }); 在线试一试原文: https://www.hcharts.cn/docs/how-to-set-options 本文档使用书栈(BookStack.CN) 构建 - 23 -

24 .Highcharts 兼容性 Highcharts 兼容性 Highcharts 系列软件支持 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。在线实例测试下载实例进行测试注意事项以下是我们对 Highcharts、Highstock、Highmaps 进行兼容性测试的结果及相关内容。 Highcharts 6 从 Highcharts 6.0.0 开始，我们将兼容低版本 IE 的代码单独成一个模块文件，这样用户可以根据需求是否加载对应的文件，可以减少在主流浏览器上加载代码的大小，推荐以下面形式加载这个文件： 1. <script src="https://img.hcharts.cn/highcharts/highcharts.js"> 2.  3. 4.  Nodejs Highcharts 4.2.0 起支持 CommonJS 模块标准，即你可以在支持 CommonJS 环境中使用 Highcharts。详细参考：通过 Npm 安装 Highcharts JavaScript 框架对于低版本浏览器（IE6、IE8等）我们支持 jQuery 1.6+，主流浏览器（新版 Chrome、Firefox等）支持 jQuery 2.0+ 浏览器版本我们在很多最新版浏览器上测试我们的软件，考虑到 IE 用户一般不愿意升级更新浏览器，我们还系统的测试过旧版本浏览器，Highcharts 可以正常在如下版本的浏览器中运行：浏览器品牌支持的版本 Internet Explorer ——- 6.0 + Firefox ——- 2.0 + Chrome 本文档使用书栈(BookStack.CN) 构建 - 24 -

25 .Highcharts 兼容性 ——- 1.0 + Safari ——- 4.0 + Opera ——- 9.0 + iOS (Safari) ——- 3.0 + Android 浏览器 ——- 2.0 + *) *) Android 2.x（andorid 2.x 最后一版是在 2010年12月发布的，目前已经很少使用了）有部分限制，详见 Android 2.x 对于其他的 JavaScript 框架，其他未测试的版本可能会运行正常渲染引擎及性能不同的浏览器支持不同的图形渲染技术, 在现代主流的浏览器上我们用 SVG 进行图形渲染，在低版本 IE 中，我们则使用 VML 技术。下面的表格展示了不同浏览器使用的渲染引擎及性能：浏览器版本渲染技术渲染性能 Internet Explorer 9 SVG 非常快 Internet Explorer 8 VML 快 Internet Explorer 7 VML 慢 Internet Explorer 6 VML 慢 Firefox SVG 非常快 Chrome SVG 非常快 Safari SVG 非常快 Opera SVG 非常快 iOS Safari SVG 快 Android 3+ SVG 快 Android 2.x Canvas 慢 Android 2.x 本文档使用书栈(BookStack.CN) 构建 - 25 -

26 .Highcharts 兼容性 Android 2.x 没有提供对 SVG 支持, 针对 Android 2.x，我们创建了基于 canvg 的独立渲染引擎，它有如下限制：不建议在 Android 2.x 上使用 Highstock，因为 Highstock 依赖大量的缩放及鼠标交互；共享的数据提示框一直是启用的。在第一次渲染的时候，独立渲染引擎及相关的依赖文件（合并在一起的 canvg renderer + rgbcolor.js + canvg.js）将会从 code.highcharts.com 下载，这个链接可以通过全局属性 global.canvasToolsURL 来指定；图表及数据列动画关闭；通过图例来进行数据里的显示与隐藏无效；数据列及数据点触摸事件无效；缩放无效；使用渲染引擎添加图形元素相关的接口无效原文: https://www.hcharts.cn/docs/start-environment 本文档使用书栈(BookStack.CN) 构建 - 26 -

27 .Highcharts 使用协议 Highcharts 使用协议成熟稳定的商业软件，开源但不完全免费。个人及非盈利组织可以随意使用；商业用途只需要支付少量的费用并可以获得我们的技术支持服务。感谢您选择 Highcharts 系列图表软件，Highcharts 系列软件包含 Highcharts JS，Highstock JS， Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放。 1、非商用免费授权以下使用用途属于非商业行为：学校公益组织或非盈利机构软件测试阶段上述情况属于非商业使用，可以直接下载我们的软件并直接使用而不用取得我们的授权。使用时请遵守 CC BY-NC 3.0 (Creative Commons Attribution-NonCommercial 3.0 License) 协议。 CC BY-NC 3.0 中文详情请参考：署名-非商业性使用 3.0 中国大陆 (CC BY-NC 3.0 CN) 2、商业授权针对商业用户及政府的商业授权许可，包含商业使用许可、技术支持服务、升级维护服务等使用协议软件定价 3、技术支持服务在尚未购买产品授权或技术支持服务之前，我们不承诺对免费用户提供任何形式的技术支持、使用担保，也不承担任何因使用本软件而产生问题的相关责任；购买产品授权后，我们会从授权生效之日起，提供为期一年的技术支持服务。服务的内容包括软件使用疑难解答，提供技术文档地址、文档解释及相关的例子，功能可否实现、技术方案是否可行咨询服务，子版本更新维护服务等；服务的形式是提供远程电话、远程实时聊天、电子邮件与我们的一线工程师联系；服务时间是 5 * 8小时（工作日 10:00 ~ 18:00）。详细的信息请参考我们的技术支持服务页面技术支持服务图表定制服务VIP专属服务原文: https://www.hcharts.cn/docs/start-license 本文档使用书栈(BookStack.CN) 构建 - 27 -

28 .基础教程基础教程图表主要组成图表配置标题坐标轴数据列颜色数据提示框图例版权信息 HTML标签标示线标示带图表缩放语言文字标签及字符串格式化钻取功能 3D 图表响应式本文档使用书栈(BookStack.CN) 构建 - 28 -

29 .图表主要组成图表主要组成一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。 Highcharts 基本组成部分如下图所示图2-1 Highcharts基本组成部分 1. 标题（Title）图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。 2. 坐标轴（Axis）坐标轴包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。 3. 数据列（Series）数据列即图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。 4. 数据提示框（Tooltip）当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可本文档使用书栈(BookStack.CN) 构建 - 29 -

9点赞

2收藏

0下载