如何在highcharts中按秒数格式化flot char yaxis？

Question

我正在使用highcharts char。 我需要显示yaxis标签H：i：s时间格式（例如yaxis-00：00：00、00：05：00、00：10：00等）。

这是我的代码（此小提琴中的完整代码）：

LiveFeeds = {

    init: function(tab)
    {
        var tab = tab || '#calling-intensity';
        $(tab+'-chart').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: ''
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                min: 0,minRange: 0.1,
                title: {
                    text: chartYaxis
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
            tooltip: tooltipData,
            series: seriesData
        });
    }

};

这是一个示例，但在Flot图表https://jsfiddle.net/p41d165j/14/上 。

Answer 1

使用http://api.highcharts.com/highcharts#xAxis.labels.formatter来格式化标签。

Answer 2

要更改标签的日期格式，可以使用dateTimeLabelFormats例如：

  dateTimeLabelFormats: {
    millisecond: '%H:%M:%S',
    second: '%H:%M:%S',
    minute: '%H:%M:%S',
    hour: '%H:%M:%S',
    day: '%H:%M:%S',
    week: '%H:%M:%S',
    month: '%H:%M:%S',
    year: '%H:%M:%S'
  },

示例： https ： //jsfiddle.net/hzjbb848/10/

由于轴范围，默认情况下，轴默认会显示每天的标签，但是如果放大，则会看到小时数。

您可以考虑为day使用不同的格式，或者使用tickPositioner设置不在日期上的刻度。

要完全控制轴标签中显示的内容，请设置formatter功能。