1.formatter方式
优点:易于控制格式,支持js多种方法
缺点:只有一个浮窗
tooltip : {
formatter : function() {
var sum = 0;
var content = '';
for (var i = 0; i < this.points.length; i++) {
sum = this.points[0].point.stackTotal;
//sum += this.points[i].y;
content += '<span style="color: ' + this.points[i].series.color + '">'
+ this.points[i].series.name + '</span>: ' +
this.points[i].y.toFixed(2) + '小时<br/>';
};
//var t = pattern.exec(formatDateTime(new Date(this.x)))[0];
var t = Highcharts.dateFormat('%Y-%m-%d', new Date(this.x))
content += '<span style="font-size: 10px;">' + t + '总时间:'+ sum +'小时
</span><br/>';
return content;
}
},
2.pointFormat等多数据和横坐标都有浮窗
tooltip: {
split: true,
shared: true,
followTouchMove: true,
shape: 'callout',
//xDateFormat: '%Y-%m-%d %H:%M:%S.%L',
xDateFormat: '%Y-%m-%d',
headerFormat: '<small class="headerFormat">{point.key}总时间:{point.stackTotal}小
时<div></div></small><table>',
pointFormat: '<tr><td style="color: {series.color}"><b>{series.name}: </b>
</td>' +
'<td style="text-align: right"><b>{point.y:.2f}小时</td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
x轴时间格式:
xAxis: {
type : 'datetime',
min : 0,
dateTimeLabelFormats: {//时间格式
day : '%m-%d',
week : '%m-%d',
month : '%y-%m',
year : '%Y'
},
tickPixelInterval : 0,//刻度间隔为0
labels : {
align : 'left',
style : {
color : '#888'
},
fontSize : '12px',
fontFamily : 'Verdana, sans-serif',
rotation : '75',//调节倾斜角度偏移
y : 20,
x : -3,
tickInterval : 0,
tickmarkPlacement : 'between'
}
},
一般情况下已经够用了,但是有的时候浮窗就是不按lang设置的时间用中文显示,先检查一下,注意是shortMonths而不是months哦
Highcharts.setOptions({
global : {
useUTC : false//世界时间
},
lang: {
rangeSelectorZoom : '范围:',
shortMonths : ['一月', '二月',
'三月', '四月', '五月',
'六月', '七月', '八月',
'九月', '十月', '十一月',
'十二月'],
weekdays : [ '星期日', '星期一',
'星期二', '星期三',
'星期四', '星期五', '星期六' ]
}
});