【问题标题】:Pass time values to Highcharts Column chart将时间值传递给 Highcharts 柱形图
【发布时间】:2014-06-30 14:56:18
【问题描述】:

我想要一个图表,其中 Y 轴包含时间值,例如 '%H:%M:%S'

我为此使用了 Highcharts 插件

X 轴:["dep1","dep2","dep3"]

Y 轴:["00:15:30","00:55:30","00:45:30"]

我的代码如下:

$('#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"]


        }]


    });`

我无法在 Y 轴上生成带有时间值的图表

我不需要显示任何日期

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

【问题讨论】:

    标签: jquery highcharts


    【解决方案1】:

    在这里查看答案:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-08-11
      • 1970-01-01
      • 2023-03-11
      • 1970-01-01
      相关资源
      最近更新 更多