我的数据点包括以秒为单位表示的时间跨度,以小数点后两位表示。但是,出于显示目的,我希望这些值的格式为分钟,秒和百分之一。例如,值125.78应在工具提示中显示为2:05.78,Y轴标签应同样格式化。
$(function () {
$('#container').highcharts({
title: {
text: '800 Meter times',
x: -20 //center
},
xAxis: {
categories: ['3/7', '3/14', '3/21', '3/28']
},
yAxis: {
title: {
text: 'Times'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Joe Blow',
data: [125.78, 125.12, 123.88, 124.06]
}]
});
});
这里是JSFiddle:http://jsfiddle.net/dhf9nod8/
答案 0 :(得分:3)
您可以使用yAxis.labels.formatter
格式化y轴,使用tooltip.formatter
格式化工具提示。并插入以下函数来格式化时间:
var seconds2minutes = function (totalSeconds) {
//convert to mins and secs
var min = Math.floor(totalSeconds / 60);
var remainingSeconds = totalSeconds - 60 * min;
return min + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds.toFixed(2);
};
然后用它来格式化y轴
yAxis: {
//..your code, then
labels: {
formatter:function() {
return seconds2minutes(this.value);
}
}
},
http://api.highcharts.com/highcharts#yAxis.labels.formatter
然后再次使用它来格式化工具提示。基本要求是
tooltip: {
formatter:function () {
return seconds2minutes(this.y);
},
但是,这将覆盖默认情况下获得的所有漂亮HTML,因此为了保持这一点,这是完整的解决方案:
tooltip: {
formatter:function () {
//make the x val "small"
var retVal="<small>"+this.x+"</small><br />";
//put 2nd line in a div to center vertically
retVal+="<div style=height:14px;font-size:12px;line-height:14px;>";
//make the point dot
var dot="<div style='background-color:"+this.point.color+";height:6px;width:6px;display:inline-block;border-radius:50%;'> </div> ";
//print the dot, series name, and time in bold
retVal+=dot+this.series.name+": <strong>"+seconds2minutes(this.y)+"</strong>";
return retVal;
},
useHTML:true //not all styles and tags are enabled by default
},
http://api.highcharts.com/highcharts#tooltip.formatter
小提琴: