highcharts开发目录

前言

记录在实践中遇到的highcharts实用问题，大部分实现直接翻看官网demo和API即可。

用目录看，感觉这个markdown的样式不太清晰

基础资源

highcharts入门

highcharts在线演示

highcharts API文档

配置实例

y轴刻度控制

1.控制刻度的最大值和最小值

yAxis - max/min
yAxis - ceiling/floor

2.固定所有刻度

yAxis - categories

3.控制间隔数量

yAxis - tickPixelInterval

tickPixelInterval默认X轴100px，y轴75px

如果有两列y轴记得都加上~

4.间隔显示刻度

yAxis - labels - step
xAxis: {
labels: {
step: 2 // 间隔1个刻度
}
}

加载多个json后创建图表

$.when(
$.getJSON('json/data1.json'),
$.getJSON('json/data2.json'),
$.getJSON('json/data3.json'),
$.getJSON('json/data4.json')
).then(function(data1,data2,data3,data4) {
// create charts
});

K线图颜色配置

基于highstock，chart-type为candlestick

plotOptions: {
candlestick: {
upLineColor: 'red',
upColor: 'red',
lineColor: 'green',
color: 'green'
}
}

这里的color会被添加到colors中占位

阴影区域绘制

　1. 基于highstock, 这是根据x轴绘制阴影区域

series: [{
type: 'candlestick',
name: '绘制阴影的数据',
data: [{
from: 4,
to: 5,
color:'#F9FAD1'
},{}],
yAxis: 1
}]

2. 基于highcharts, 直接在xAxis/yAxis下配置

xAxis: {
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
},{}]
}

{},{}这么写是说数据可以多组

UTC时间换算及工具*

highcharts中采用UTC时间戳

时间戳在线转换工具 注意要到毫秒所以转换出来的数据还要加000

其实可以在js中直接这么写 Date.UTC(2015, 3, 1)

如果与后台统一不用UTC，那么 (未测试)

Highcharts.setOptions({
global: { useUTC: false  }
});

IE8及以下highchart对象取不到

很多时候我们要获取chart对象并修改它的一些属性和参数。

获取

$(dom).highcharts(chart_config);
var chart = $(dom).highcharts();

// OR

var chart = new Highcharts.Chart(chart_config);

比如说添加series中的数据

chart.series[0].setData(data);

但在IE8及以下打印chart对象发现该对象不完全，取不到series等属性。

原因 不支持SVG，所以生成非常慢

解决 依赖处理，如回调实现

某点tooltip默认显示

chart.tooltip.refresh([1,3]); // x为1的点和x为3的点的tooltip默认显示

饼图动画反方向旋转*

默认饼图动画是顺时针旋转的。

Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'animate', function (proceed, init) {
this.startAngleRad += Math.PI * 1;
proceed.call(this, init);
});

highstock 时间轴固定

问题 在X轴上所有的点都是按时间或者距离等比分配的，这就意味着没有出现的点或者后来延迟加进来的点不会占用掉x轴上的位置和空间

解决

xAxis - ordinal: false

优秀案例

highstock K线图 深入研究 （大量改动源码）

highstock 新属性及进阶用法 (实现鼠标移到某个点上，会显示一个十字架，同时x和y轴上有对应点的具体值，同时上面会有当前价和时间)

遗留问题

highstock的lengen显示不出来只能自己绘制触发事件

siderbar箭头按钮每次移动只有一个月

highcharts下x轴为每隔三个月的配置？