将时间值传递给Highcharts柱状图 [英] Pass time values to Highcharts Column chart

问题描述

我想要一个图表，其中Y轴包含时间值，例如'％H：％M：％S'

我已经使用 Highcharts 插件为此

X轴：[dep1，dep2，dep3]

Y轴：[00:15:30，00:55:30，00:45:30]

我的代码是如下：

  $（'＃durationChart'）。highcharts（{
 
 
图表：{
类型：'列'
}，
标题：{
 text：'平均值'
}，
 
 xAxis：{
 categories：[dep1，dep2，dep3]，
标签：{
 rotation：-45，
 style：{
 fontSize：'11px'，
 fontFamily：'tahoma，sans-serif'
} 
} 
}，
 yAxis：{
 type：'datetime '，
 dateTimeLabelFormats：{
 second：'％ H：％M：％S'，
分钟：'％H：％M'，
小时：'％H：％M'，
日：'％e。 ％b'，
星期：'％e。 ％b'，
 month：'％b \'％y'，
 year：'％Y'
} 
}，
 plotOptions：{
列：{
 pointPadding：0.2，
 borderWidth：0，
 dataLabels：{
 enabled：true，
 formatter：function（）{
返回''+ Highcharts.dateFormat（'％H：％M：％S'，this.y）; 
} 
} 
} 
}，学分：{
启用：false 
}，
 
系列：[{
 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] 
 
 
}] 
 
 
}）;`
  

我无法在Y轴上生成包含时间值的图表

我无需显示任何日期

p>

我在下面分享的示例图片...

>

• 如何在highcharts中传递时间？

您仍然需要发送完整日期。然后，您可以格式化输出以仅显示时间部分。

或者您可以将时间发送为整数秒。

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...

解决方案

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.

这篇关于将时间值传递给Highcharts柱状图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！