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

#1楼 票数: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

还有一个小提琴:

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

  ask by PongGod translate from so

未解决问题?本站智能推荐:

1回复

格式化轴刻度标签

我使用的地图是根据百分比为区域着色的地图。 图例显示了颜色及其百分比之间的映射。 但是图例仅显示数字,而不显示百分比。 显然,这些数字是百分比。 因此,每个数字后面应有一个%符号,或在图表顶部有一个%符号。 似乎有图表刻度格式之类的东西,但我找不到改变它的方法。 也许这可以用做st
6回复

Highcharts具有向下钻取的柱形图,从x轴标签中删除格式化等超链接

我正在使用column chart和drilldown 。 这是我的JSFIDDLE 。 现在我的问题是: 我想从x轴和dataLabels上的标签中删除格式之类的超链接 正如您可以从我的小提琴中注意到我已经尝试使用以下代码在x轴标签上应用格式: 并使用以下代码格式化data
1回复

使用highcharts调整数据点的大小

我们正在使用highcharts并且正在尝试自定义图表,看起来与此类似: 我们能够设置记录的颜色,并通过使用lineWidth属性增加线条的粗细,但无法找到自定义数据点的方法,因此它们总是圆形且大于粗线条。 这就是它在这一点上的样子: 此外,我们找不到删除默认灰色水平线的方法。 救
1回复

Highcharts-如何创建多个y轴并分组数据序列

我想创建一个具有4系列的折线图,并且x轴是日期。 系列中的2个可以使用一个y轴(例如,温度从0到150),另一个2个将使用不同的y轴(例如,CO2含量从0到900)。 我在这里看到了多个y轴的示例。 https://www.highcharts.com/demo/combo-multi-a
2回复

如何在highcharts中按秒数格式化flotcharyaxis?

我正在使用highcharts char。 我需要显示yaxis标签H:i:s时间格式(例如yaxis-00:00:00、00:05:00、00:10:00等)。 这是我的代码(此小提琴中的完整代码): 这是一个示例,但在Flot图表https://jsfiddle.net/p41d1
1回复

Highcharts-多个Y轴堆积图表

我正在创建一个有两个Y轴的图表 - 距离和持续时间。 每个Y轴将有多个系列(跑步,自行车,游泳等)堆叠在一起。 持续时间是堆积区域或areaspline,距离是堆积柱形图。 这是图表的jsfiddle。 http://jsfiddle.net/baberuth22/u5QCB/3/
1回复

Highcharts多个系列,缺少数据点

Highcharts有一个奇怪的问题,似乎无法找到简单的解决方案。 我有我手动分析的数据,并转换为图表将使用的实际系列。 例如 问题是缺少某些类别的某些数据项。 这样第一个可能具有1月至5月的所有数据,而下一个类别可能仅具有Jan,Feb,May。 图表将呈现,但排序不正确。 我希
1回复

在HighCharts中限制数据点的数量

将新点添加到空的 HighChart图表时,图表上的点数会无限期增加,并且随着X轴范围变大,图表将水平压缩。 但是,当将更多数据点添加到非空图表时,图表将立即向左滚动以容纳新的数据点,而无需更改x轴比例。 一个示例将是http://www.highcharts.com/demo/dynam