在 HighCharts 中使用小时值

Question

我在使用 HighCharts 时遇到了一些问题，我不知道如何使用小时数。现在我设法使用白天的时间（00 到 24），但它在 24 停止并在 0 重新启动，因为 HighCharts 认为一天已经过去了。我只想有一个小时值，例如 1h30 或 55h10。这是我的图表：

$('#chart2').highcharts({
        chart: {
            type: 'column',
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            borderWidth: 2,
            borderRadius: 7,
            borderColor: '#D8D8D8',
            width:dialogWidth/2,
            height:dialogWidth/2+50
        },
        title: {
            text: 'Time Worked per Day'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            type: 'datetime', //y-axis will be in milliseconds
            dateTimeLabelFormats: { //force all formats to be hour:minute:second
               second: '%H:%M',
               minute: '%H:%M',
               hour: '%H:%M',
               day: '%d %H:%M',
               week: '%H:%M',
               month: '%H:%M',
               year: '%H:%M'
            },
            title: {
                text: 'Hours'
            }
        },

        credits: {
              enabled: false
          },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return  Highcharts.dateFormat('%Hh%M',new Date(this.y));
                    }
                }
            }
        },
         tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +' : </b>' +
                    Highcharts.dateFormat('%Hh%M',new Date(this.y));
            }
        },
        series: [{
            name: 'Hours',
            colorByPoint: true,
            data: datas
        }]
    });

希望能帮到你。

Answer 1

您不需要使用 datetime 来解决这个问题。由于您想知道的是每天的小时数，基于 JSON 数据中的毫秒值，您需要将该值视为数字，而不是日期。

我是这样解决这个问题的：

首先，我更改了您在 y 轴上描述标签的方式。我放弃了 datetime 类型并使用 formatter 函数将标签显示为整小时。我还定义了一个 tickInterval 来显示标签之间相隔一小时。

yAxis: {
    labels: {
        formatter: function() {
            // show the labels as whole hours (3600000 milliseconds = 1 hour)
            return Highcharts.numberFormat(this.value/3600000,0);
        }
    },
    title: {
        text: 'Hours'
    },
    tickInterval: 3600000 // number of milliseconds in one hour
},

接下来，我更新了您工具提示中的代码。我们正在获取您的 y 值并使它们整整几个小时。我将 Highcharts.numberFormat 中的第二个参数设置为“2”，以便您的工具值显示为两位小数（例如“2.50”表示两个半小时）。

tooltip: {
    formatter: function() {
        return  '<b>' + this.series.name +' : </b>' + 
            Highcharts.numberFormat(this.y/3600000,2);
    }
},

根据您提供的样本数据，您可以在此处看到有效的 fiddle：http://jsfiddle.net/brightmatrix/kk7odqez/

这是我在此 fiddle 中截取的图表的屏幕截图，显示了标签和工具提示现在的显示方式：

感谢您在评论中提供的额外信息。这确实帮助我解决了这个问题，并为您提供了我希望有用的解决方案。

在 HighCharts 中使用小时值

Using hours value with HighCharts

javascript

hour

highcharts