Highcharts配置
一、基础使用
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
二、功能模块的使用
功能模块是在 Highcharts 主要功能的基础做的扩展,是由官方发布的功能包,常用功能模块有:
- 更多图表类型扩展模块(
highcharts-more.js
) - 3D 图表模块 (
highcharts-3d.js
) - 导出功能模块(
modules/exporting.js
) - 金字塔图表类型(
modules/funnel.js
) - 钻取功能模块(
modules/drilldown.js
) - 数据加载功能模块(
modules/data.js
)
- 更多图表类型扩展模块(
更多模块可以在下载的资源包的 modules
目录找到。
使用方法:
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
三、产品间的混合模式使用
1、三款产品简介:
- Highcharts 基础图表
- Highstock 股票及大数据量时间轴图表
- Highmaps 地图
2、产品间的关系:
Highstock 是完全包含 Highcharts 的,是在 Highcharts 的基础上增加了更多高级功能;
Highmaps 则完全独立,不过官方提供了地图功能模块 map.js (在 Highmaps 资源包的 modules 目录)供 Highcharts 或 Highstock 调用。
3、混合使用方法:
- Highcharts + Highstock 时只需要引入 highstock.js
- Highcharts + Highmaps 混合使用是需要 引入 highcharts.js + map.js
- Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js
注意: Highstock 是完全包含 Highcharts 的,如果在同一个页面重复引用的话就会报 #16 号错误。
四、主题
官方提供图表更换主题功能,引入想应用的主题 JS 文件即可改变图表样式。除默认主题样式外,还提供了多款主题,另外也可以根据需要自己设计图表主题。
主题文件放置在资源包的 theme
目录下,可以按需引用。
相关示例:
给图表加上灰色(Gray)主题时需要引用的文件如下:
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script>
Highcharts配置的更多相关文章
- Highcharts 配置选项详细说明
Highcharts 配置选项详细说明 Highcharts 提供大量的配置选项参数,您可以轻松定制符合用户要求的图表,本章节为大家详细介绍Highcharts 配置选项使用说明: 参数配置(属性+事 ...
- Highcharts 配置语法
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...
- Highcharts 配置语法;Highcharts 配置选项详细说明
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置. 第一步:创建 HTML 页面 创建一个 HTML 页面,引入 jQuery 和 Highchar ...
- highcharts配置的效果如下
配置如下: function init(categoryArray,seriesData,month_first_day,month_last_day,currDay){ var chart = Hi ...
- Highcharts Highstock 学习笔记 第一篇 Highcharts配置
Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...
- Highchart基础教程-图表配置
一.图表容器: Highcharts 实例化中绑定容器的两种方式: 1.通过 dom 调用 highcharts() 函数的方式 $("#container").highchart ...
- Highcharts结合PhantomJS在服务端生成高质量的图表图片
项目背景 最近忙着给部门开发一套交互式的报表系统,来替换原有的静态报表系统. 老系统是基于dotnetCHARTING开发的,dotnetCHARTING的优势是图表类型丰富,接口调用简单,使用时只需 ...
- Highcharts入门+Highcharts基础教程,【非常值得学习的资料】
http://www.hcharts.cn/docs/index.php?doc=index Highcharts入门章节目录 Highcharts简介 Highcharts下载与使用 Highcha ...
- 纯后台生成highcharts图片有哪些方法?
比如说,领导抛给你一个需求,把一些数据做成图表,每天通过邮件发送,让领导能在邮件中就看到图片,你会有什么思路呢?本人使用的是phantomjs这个神器,它的内核是WebKit引擎,不提供图形界面,只能 ...
随机推荐
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 集成基于OAuth协议的单点登陆
在之前的一篇文章中,我们已经介绍了如何为一个应用添加对CAS协议的支持,进而使得我们的应用可以与所有基于CAS协议的单点登陆服务通讯.但是现在的单点登陆服务实际上并不全是通过实现CAS协议来完成的.例 ...
- Atitit webservice发现机制 WS-Discovery标准的规范attilax总结
Atitit webservice发现机制 WS-Discovery标准的规范attilax总结 1.1. WS-Discovery标准1 1.2. 一.WS-Discovery1 1.2.1. ...
- pod Spec管理配置
pod Spec 为自己的项目添加pod管理功能.前言: 上一篇文章中提到,因为自己在操作的时候遇到很多坑,所在在此做一个记录,同样也希望可以帮到在这个操作上遇到坑的人. 本文将采用配图和加文字的方式 ...
- WCF学习之旅—WCF中传统的异常处理(十六)
WCF中的异常处理 在软件开发过程中,不可能没有异常的出现,所以在开发过程中,对不可预知的异常进行解决时,异常处理显得尤为重要.对于一般的.NET系统来说,我们简单地借助try/catch可以很容易地 ...
- try...catch..finally
try..catch..finally try{ 代码块1 }catch(Exception e){ 代码块2 }finally{ 代码块3 } catch是抓取代码块1中的异常 代码块2是出异常后的 ...
- SQL Server 在缺少文件组的情况下如何还原数据库
SQL Server 在缺少文件组的情况下如何还原数据库 一.背景 我有一个A库,由于a,b两张表的数据量比较大,所以对表进行分区:在把A库迁移到一个新的集群上去,我只备份了A库的主分区过去进行还原为 ...
- 【.net 深呼吸】使用二进制格式来压缩XML文档
在相当多的情况下,咱们写入XML文件默认是使用文本格式来写入的,如果XML内容是通过网络传输,或者希望节省空间,特别是对于XML文档较大的情况,是得考虑尽可能地压缩XML文件的大小. XmlDicti ...
- CSS权威指南之css声明,伪类,文本处理--(简要笔记一)
1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...
- Angular Service和Factory应用的区别
Service可以用来将返回同类业务的多种返回值 Factory可以用来提供对同类业务的多个方法的调用 另外:Provider可以用来封装各独立职责