使用HighCharts格式化数据点和Y轴标签

Question

我的数据点包括以秒为单位表示的时间跨度，以小数点后两位表示。 但是，出于显示目的，我希望这些值的格式为分钟，秒和百分之一。 例如，值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/

Answer 1

您可以使用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

还有一个小提琴：

http://jsfiddle.net/dhf9nod8/2/