当 x 轴采用时间格式 (HH:MM) 时，Highchart 的热图无法正确呈现

Question

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

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 的回复修改了 post -

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

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)

有了这个我想实现以下 -

在 x 轴上，我只想显示 HH:MM 而不是 HH:MM:SS。
y 轴应按 increasing order of day 排序。即 5 月 6 日应该在底部，4 月 30 日应该在顶部
还想更改颜色渐变，即颜色应从 red (for -1) 开始并在 green (+1) 结束，并且 yellow for midpoint (0)
要是能自定义tooltip就好了。我理想的工具提示应该是 <Value: data-value><br><Date: date as in y-axis><br><Time: Time as in x-axis in HH:MM format>

任何关于如何实现它们的指示都将非常有帮助

Answer 1

简答：您的数据有问题。

说明：我设法从你的 R 图表中获取了你的数据。您有 865 分，简化后，您的数据如下所示：

{x: 0.00694444444444444, y: 0, value: 0.28064949112013},
{x: 0.0138888888888889, y: 0, value: -0.600626351311803},
{x: 0.0208333333333333, y: 0, value: 0.30516293970868},
...
{x: 0.166666666666667, y: 4, value: -0.619758530985564},
...

您的 x 值不是整数 - 这就是为什么当您将鼠标悬停在图表上时，图表看起来和行为都令人毛骨悚然。

这是一个 JavaScript 使用您的数据进行的简化演示：https://jsfiddle.net/BlackLabel/5s3gft6u/ 这是一个包含十进制 x 数据的简单示例，可帮助您了解它的行为方式：https://jsfiddle.net/BlackLabel/4j29o3Lh/

所以，如果我对你的问题的理解是正确的，那么问题出在你的数据（x 值）上，如果你想让它在 Highcharts 中工作，你需要提供不同的数据。我不知道具体是什么数据，因为我不知道你要显示什么。

此外，您可以尝试 https://api.highcharts.com/highcharts/series.heatmap.colsize

也许设置为 0.01 就可以满足您的要求。

编辑您的新要求：

同样，您的数据有问题。在 JavaScript 中使用适当的数据，您可以通过多种方式格式化 xAxis 标签，例如在 labels.formatter 中有 this.value 问题在于 Highcharter（或 R）以某种方式解析您的数据，并且 this.value 是一个没有时间戳值的更复杂的对象。不知道怎么解析..
再次 - 您的数据。您在 4 月 30 日获得 y: 0 积分，5 月 3 日获得 y: 1 积分。在 Highcharts 中，y 价值很重要。如果你想有一个正确的顺序，那么你需要解析你的数据并将正确的日期与 y.
您可以使用tooltip.formatter来定义您想要在工具提示中显示的内容

当 x 轴采用时间格式 (HH:MM) 时，Highchart 的热图无法正确呈现

Highchart's heat-map plot not rendering correctly when x-axis is in time format (HH:MM)

javascript

highcharts

r-highcharter