javascript - 使用 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

还有一把 fiddle :

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