highchart笔记第三天

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-more.js）
3D 图表模块 （highcharts-3d.js）
导出功能模块（modules/exporting.js）
金字塔图表类型（modules/funnel.js）
钻取功能模块（modules/drilldown.js）
数据加载功能模块（modules/data.js）
注意：使用功能模块很简单，只需要引入对应的文件即可，唯一需要注意的是保证 highcharts.js 的引用顺序是在功能模块之前。

3. Highstock 和 Highmaps
1)三款产品简介
Highcharts 基础图表
Highstock 股票及大数据量时间轴图表
Highmaps 地图
2)相关之间的关系
Highstock 是完全包含 Highcharts 的，是在 Highcharts 的基础上增加了更多高级功能；
Highmaps 则完全独立，不过我们提供了地图功能模块 map.js
（在 Highmaps 资源包的 modules 目录）供 Highcharts 或 Highstock 调用。
3)混合使用（重要）
1). Highcharts + Highstock 时只需要引入 highstock.js

<script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
2). Highcharts + Highmaps 混合使用是需要 引入 highcharts.js + map.js

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script>
3). Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入
highstock.js + map.js

<script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
<script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script>
注意：上面说到的 Highstock 是完全包含 Highcharts 的，
如果在同一个页面重复引用的话就会报 #16 号错误。

4.主题
除了自带的 主题文件放置在资源包的 themes 目录下
也可以自己设计
灰色主题
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<script src="http://cdn.hcharts.cn/highcharts/themes/gray.js"></script>

如何设置图表配置选项

var options = {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
};
var chart = Highcharts.chart('container', options);

1.对象的创建及赋值
var oiptions = new Object();

options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'line';

options.series = new Array();
options.series[0] = new Object();
options.series[0].name = '小明';
options.series[0].data = new Array(1, 0, 4);

2.对象取值
options.chart.type // JS 对象取值
options.chart['type'] // 同上
delete options.chart.type // 删除属性

3.数组相关操作
JS 数组的创建可以用 new Array() 或更简单的 [] 来创建，
其中 length 属性为数组的长度，
push() 函数可以添加数组元素；
join() 可以将数组转换成字符串，相应字符串可以通过的
split() 函数将其分隔成数组，下面用示例代码说明：

var series = [{
name: '小明',
data: []
}];

series.push({
name: '小红',
data: []
});

series[2].name;

var arr = [1, 2, 4, 10, 20];
var arrJoin = arr.join(); // 结果"1,2,4,10,20"，默认的分隔符是 ,
arrJoin.split(',');
// 将字符串按照 , 分隔，结果是 [1, 2, 4, 10, 20]

4.全局配置

Highcharts 在低版本 IE 上使用注意事项

很多人经常遇到图表在主流浏览器上运行正常，
在低版本IE（包括IE6、IE7、IE8等）下运行出错
（图表显示不出来或显示不正常）的情况，这不是兼容性问题，
而是 IE 浏览器自身的一些限制，我们只需要注意一些事项即可避免这种情况。

1、使用合适的HTML 文档模式
html 文档模式指的是文件的第一行

在低版本 IE 中请使用 HTML 4 严格模式

2、多余逗号
IE 对 JavaScript 语法要求比较严格，
数组或对象的最后一项有多余逗号时会报错，

3、禁用 IE 安全模式
另外一个导致 Highcharts 在IE上显示不正常的常见问题是 IE的安全模式，这种情况一般发生在用作服务器的浏览器上（本地ok，在服务器上的IE访问则不行，例如在 Window Server 2008的电脑上），避免这种情况的方法是禁用 IE 安全模式，设置如下：

IE 浏览器 —》 “工具” —》“Internet 选项” —》“安全”

将安全级别调到最低并去掉“ 启用保护模式”勾选。

4、不要使用太高版本 jQuery
高版本jQuery 对IE兼容性不好，我们推荐使用 jQuery 1.8.3

小技巧
在html head 部分加如下代码可以让 IE 使用兼容性模式，这样可以让IE 尽可能以最高模式渲染文档。

 

图标基础
图标主要组成
一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、
标示线（PlotLines）、标示区域（PlotBands）、
数据标签（dataLabels）等。