【highchart】经典问题
摘要
记录遇到的一些问题和解决方案
- 时差
- 数据容量
- 多表联动
1. 时差
问题描述
highcharts 默认是标准 UTC 时间，而国内默认是东八区时间，所以会有8个小时的时差
解决方法
使用highcart绘图之前，设置UTC属性为false，例子如下：
Highcharts.setOptions({
global: {
useUTC: false //关闭UTC
}
});
2. 数据容量
问题描述
当我们数据装填过多时，会出现highchart #12 Highcharts expects point configuration to be numbers or arrays in turbo mode
解决办法
这个错误是因为turboThreshold 阈值，默认为1000，为避免阈值检测，可以设置turboThreshold=0，不检查数据容量。不过从绘图效率 和 数据传输效率来考虑，最好数据量不要超过svg像素密度，一是会出现数据失真 二 是绘图效率降低 三是 传输效率降低。 可以使用highstock 实现大数据量的绘制， 阈值默认为5万+，同时可以拖动 rangeSelector ， 选择X 轴范围。
3. 多图联动
问题描述
我们经常会遇到多个图之间有关联，需要查看相同X 轴数据，2.0- 版本的highstock 4.0-highcharts 官网并没有这个特性， 升级到4.2 + 版本官网有例子。
解决办法
目前4.2.3 + highcharts , 4.0.2+ highstock 有官方例子，关键代码为：chart.tooltip.refresh(points);
完整例子：
- highcharts 例子 http://www.highcharts.com/demo/synchronized-charts
- highstock 例子 和官网一样
如果highchart4.0.3 highstock2.0.3 也有办法，方法为触发point的mouseover 事件，在事件中触发每个chart 显示此X轴上的tooltip 达到联动的效果。
具体例子如下：
highchart关键代码为 chart.tooltip.refresh( chart.series[0].data[j] );
highstock关键代码为 chart.tooltip.refresh( [ chart.series[0].data[j] ]);
- stockchart 创建例子
$(function () {
var chartList = [];
createHighStock('container');
createHighStock('container1');
// 同步提示
function syncTooltip(container, p) {
var i=0, j=0, data;
console.log(container, p);
for(; i<chartList.length; i++) {
if(container.id != chartList[i].container.id) {
data = chartList[i].series[0].data;
// 自己遍历寻找目标点，并显示tooltip， 高版本提供searchpoint 方法查找目标点
for(; j<data.length; j++)
if (data[j].x === p)
chartList[i].tooltip.refresh( [chartList[i].series[0].data[j] ]);
}
}
}
function createHighStock(id) {
$.getJSON('http://www.highcharts.com/samples/data/from-sql.php?callback=?',
function (data) {
console.log(data);
$('#' + id).highcharts('StockChart', {
navigator : {
adaptToUpdatedData: false,
},
scrollbar: {
liveRedraw: false
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
title: {
text: 'AAPL history by the minute from 1998 to 2011'
},
subtitle: {
text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
},
xAxis : {
minRange: 3600 * 1000 // one hour
},
tooltip: {
formatter: function () {
var tpl = '<b>' + Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x) + '</b>';
tpl += this.y;
return tpl;
}
},
yAxis: {
floor: 0,
},
plotOptions:{
series:{
shadow:false,
borderWidth:0,
groupPadding:0,
//pointPadding:.025,
lineWidth:1,
color:'#5a9bd4',
fillColor:'rgba(90,155,212, .25)',
marker:{
radius:0,
states:{
hover:{
radius:2
}
}
},
point: {
events: {
// key point 关键代码
mouseOver: function(){
syncTooltip(this.series.chart.container, this.x);
}
}
}
},
},
series :[{
data : data,
name : 'hehe',
},
{
data : data,
name : 'haha',
},
]
});
var chartObj = $('#' + id).highcharts();
chartList.push(chartObj);
}
);
};
});
- chart 创建例子
function syncTooltip(container, p) {
var i=0, j=0, data;
console.log(container, p);
for(; i<chartList.length; i++) {
if(container.id != chartList[i].container.id) {
data = chartList[i].series[0].data;
// 自己遍历寻找目标点，并显示tooltip， 高版本提供searchpoint 方法查找目标点
for(; j<data.length; j++) {
if (data[j].x === p){
// !!!!!! key point 关键代码
chartList[i].tooltip.refresh( chartList[i].series[0].data[j]);
}
}
}
}
}
