Pass time values to Highcharts Column chart

问题

I want a chart, where the Y-axis contains time values like '%H:%M:%S'

I have used Highcharts plugin for this

X-axis: ["dep1","dep2","dep3"]

Y-axis: ["00:15:30","00:55:30","00:45:30"]

My code is as follows:

$('#durationChart').highcharts({


        chart: {
            type: 'column'
        },
        title: {
            text: 'Avg. values'
        },

        xAxis: {
            categories: ["dep1","dep2","dep3"],
     labels: {
                rotation: -45,
                style: {
                    fontSize: '11px',
                    fontFamily: 'tahoma, sans-serif'
                }
            }
        },
        yAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b \'%y',
                year: '%Y'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                dataLabels: {
                        enabled: true,
                        formatter:function() {
                              return ''+ Highcharts.dateFormat('%H:%M:%S', this.y);
                        }
                    }
            }
        },credits: {
              enabled: false
          },

        series: [{
            name: 'Territories',
            colorByPoint: false,
            data: ["00:15:24", "00:13:51", "00:11:17", "00:20:02", "00:11:55", "00:10:00", "00:15:46", "00:10:54", "00:00:01", "00:01:01", "00:01:03", "00:01:47", "00:02:47", "00:01:50", "00:01:53", "00:00:43", "00:11:46", "00:00:02", "00:01:03", "00:05:07", "00:01:42", "00:16:11"]


        }]


    });`

I am having trouble generating a chart with time values on the Y-axis

I don't need to display any dates

Sample picture I've shared below...

回答1:

See answer here:

How to pass time in "highcharts"?

You will still need to send the full date. Then you can format the output to only show the time portion.

Or you can send the time as an integer number of seconds.

来源：https://stackoverflow.com/questions/24493021/pass-time-values-to-highcharts-column-chart

标签

jquery

Highcharts