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

Question

I'm working with highcharts char. I need to show the yaxis labels H:i:s time format(for ex. yaxis - 00:00:00, 00:05:00, 00:10:00 and etc.).

Here is my code (full code in this fiddle ):

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
        });
    }

};

This is a example but on Flot chart https://jsfiddle.net/p41d165j/14/ .

Answer 1

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

Answer 2

To change date format of labels you could use dateTimeLabelFormats like:

  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'
  },

Example: https://jsfiddle.net/hzjbb848/10/

Axis by default will display labels for each day, because of axis range, but if you zoom in - you will see hours.

You could consider using different format for day or use tickPositioner to set ticks not on days.

To fully control what is displayed in axis labels set up formatter function.