当x轴为时间格式(HH:MM)时,Highchart的热图图无法正确渲染

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当x轴为时间格式(HH:MM)时,Highchart的热图图无法正确渲染相关的知识,希望对你有一定的参考价值。

我想使用R中的heatmap highchart绘图库为我的数据绘制js->

library(highcharter)
library(dplyr)
library(chron)
library(viridisLite )


fntltp <- JS("function()
  return this.series.yAxis.categories[this.point.y] + this.point.x + ':' + ':<br>' +
  Highcharts.numberFormat(this.point.value, 4);
")

Data = data.frame(Time1 = seq(as.POSIXct('2020-04-30 00:00:00', tz = "UTC"), as.POSIXct('2020-05-06 00:00:00', tz = "UTC"), by = '10 min')) %>%
           mutate(Date = paste(substr(weekdays(as.Date(Time1, tz = "UTC")), 1, 3), format(as.Date(Time1, tz = "UTC"), "%b,%d"), " "),
                'Value' = runif(865, -1, 1),
                Time = times(format(Time1, "%H:%M:%S"))) 

hchart(Data, "heatmap", hcaes(x = Time, y = Date, value = Value)) %>% 
  hc_colorAxis(stops = color_stops(30, rev(viridis(30)))) %>% 
  hc_yAxis(reversed = TRUE, offset = 2, tickLength = 0,
           gridLineWidth = 0, minorGridLineWidth = 0,
           labels = list(style = list(fontSize = "12px"))) %>%
  hc_xAxis(labels = list(type = 'datetime', dateTimeLabelFormats = list(day = '%H:%M'))) %>%
  hc_legend(layout = "vertical", verticalAlign = "middle",
            align = "right", valueDecimals = 0) %>% 
  hc_size(height = 800) %>% 
  hc_tooltip(formatter = fntltp)

显然,当我的x-axis格式化为HH:MM(及时)时,这不是正确的绘图。另外,在legend中,x-axis的值也未正确输入。

此外,y-axis的顺序也不平滑,因为我想让最下面的第一天位于顶部,第一天位于顶部。

任何指针如何纠正这些不规则都会很有帮助。

根据@ raf18seb的回复修改的帖子-

下面是我的简化数据的新图-

library(highcharter)
library(dplyr)
library(chron)

set.seed(1)
Data = data.frame(Time1 = seq(as.POSIXct('2020-04-30 00:00:00', tz = "UTC"), as.POSIXct('2020-05-06 00:00:00', tz = "UTC"), by = '10 min')) %>%
           mutate(Date = paste(substr(weekdays(as.Date(Time1, tz = "UTC")), 1, 3), format(as.Date(Time1, tz = "UTC"), "%b,%d"), " "),
                            'Value' = runif(865, -1, 1),
                    Day_Time = as.character(times(format(Time1, "%H:%M:%S"))))

tail(Data)

hchart(Data, "heatmap", hcaes(x = Day_Time, y = Date, value = Value)) %>% 
  hc_yAxis(reversed = TRUE, offset = 2, tickLength = 0,
           gridLineWidth = 0, minorGridLineWidth = 0,
           labels = list(style = list(fontSize = "12px"))) %>%
  hc_xAxis(labels = list(type = 'datetime', dateTimeLabelFormats = list(day = '%H:%M'))) %>%  
  hc_size(height = 800)

有了这个,我想在下面实现-

  1. 在x轴上,我只想显示HH:MM而不是HH:MM:SS
  2. y轴应在increasing order of day中排序。即5月6日应该在底部,4月30日应该在顶部
  3. 也要更改颜色渐变,即颜色应从read (for -1)开始并在green (+1)yellow for (0)处结束
  4. 如果我可以自定义工具提示,那也很好。我的理想工具提示应该是<Value: data-value><br><Date: date as in y-axis><br><Time: Time as in x-axis in HH:MM format>
  5. ,而不是此处的默认显示。

    任何指针如何实现它们都将非常有帮助

[我想使用R中的highchart js绘图库为我的数据绘制热图-库(highcharter)库(dplyr)库(chron)库(viridisLite)fntltp

答案

简短的回答:您的数据有问题。

说明:我设法从您的R图表中获取了您的数据。您有865分,简化后的数据如下:

以上是关于当x轴为时间格式(HH:MM)时,Highchart的热图图无法正确渲染的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Java 中将“HH:MM”格式字符串转换为时间戳?

将字符串“7.30”转换为时间格式 hh:mm

如何将hAxis(x轴)格式更改为HH:mm?

如何将日期时间转换为时间

QProgressBar 文本格式为时间

LibreOffice SUM 时间段,格式为 HH:MM:SS