如何在R Markdown的highcharter中重写Highcharts热力图排序函数

需求为使用R语言重写Highcharts热力图功能函数，已在原生Highcharts中实现热力图数值与类别排序逻辑：按年份列分组对类别数值排序，数值最高的类别展示在热力图顶部，数值最低的展示在底部，每个年份对应独立的类别排序结果。
当前需要在R Markdown文件中通过highcharter包复现该效果，核心需要适配的JS处理逻辑如下：

const processedData = [];

columnsData.forEach(column => {
  column.data.sort((a, b) => a.value - b.value);
  column.data.forEach((dataEl, index) => {
    processedData.push({
      name: column.year,
      y: index,
      value: dataEl.value,
      dataLabels: {
        format: dataEl.name + ': ' + dataEl.value
      }
    });
  });
});

附参考材料：

• 完整原生Highcharts JS实现代码

const columnsData = [{
  year: '2001',
  data: [{
    name: 'A',
    value: 55
  }, {
    name: 'B',
    value: 45
  }, {
    name: 'C',
    value: 67
  }]
}, {
  year: '2002',
  data: [{
    name: 'D',
    value: 15
  }, {
    name: 'E',
    value: 24
  }, {
    name: 'F',
    value: 67
  }]
}, {
  year: '2003',
  data: [{
    name: 'G',
    value: 77
  }, {
    name: 'H',
    value: 56
  }, {
    name: 'I',
    value: 58
  }]
}];

const processedData = [];

columnsData.forEach(column => {
  column.data.sort((a, b) => a.value - b.value);
  column.data.forEach((dataEl, index) => {
    processedData.push({
      name: column.year,
      y: index,
      value: dataEl.value,
      dataLabels: {
        format: dataEl.name + ': ' + dataEl.value
      }
    });
  });
});

console.log(processedData)

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },
  xAxis: {
    type: 'category'
  },

  yAxis: {
    visible: false
  },

  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },

  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },

  series: [{
    name: 'Sales per employee',
    borderWidth: 1,
    data: processedData,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

• 当前已编写的highcharter（R Markdown环境）基础代码片段

spx_highchart %>%
  hchart(type = "heatmap",
         hcaes(
           x = year,
           y = class,
           value = returns,
           color = colour,
           borderWidth = 1
         )

核心逻辑不需要注入复杂JS，直接在R侧完成数据预处理即可，完全对齐原生JS的排序规则：

• 按年份字段分组
• 同一年份内按数值字段升序排序
• 给排序后的同组数据分配从0开始的y轴索引，数值最小的对应y=0（热力图最底部），数值最大的对应y值最大（热力图最顶部）
• 提前生成数据标签需要展示的「类别: 数值」文本

具体代码 #

第一步：数据预处理 #

以现有spx_highchart数据集为例，用dplyr完成数据加工：

library(dplyr)
library(highcharter)

processed_spx <- spx_highchart %>%
  # 按年份分组
  group_by(year) %>%
  # 同一年份内按returns数值升序排序
  arrange(returns, .by_group = TRUE) %>%
  # 生成排序后的y轴位置、数据标签文本
  mutate(
    y_pos = row_number() - 1, # 和JS逻辑一致，索引从0开始
    point_label = paste0(class, ": ", returns)
  ) %>%
  ungroup()

第二步：热力图绘制 #

直接调用预处理后的数据绘图，配置和原生JS效果对齐：

hchart(
  processed_spx,
  type = "heatmap",
  hcaes(
    x = year,
    y = y_pos, # 替换原始y=class的写法，用预处理好的排序位置
    value = returns,
    color = colour # 保留原有的自定义颜色映射
  ),
  borderWidth = 1
) %>%
  # 配置数据标签
  hc_plotOptions(
    heatmap = list(
      dataLabels = list(
        enabled = TRUE,
        color = "#000000",
        format = "{point.point_label}"
      )
    )
  ) %>%
  # 轴配置对齐原生效果
  hc_xAxis(type = "category") %>%
  hc_yAxis(visible = FALSE) %>%
  hc_colorAxis(
    min = 0,
    minColor = "#FFFFFF",
    maxColor = "#7cb5ec" # 对应Highcharts默认首个主题色
  ) %>%
  # 图例配置对齐原生效果
  hc_legend(
    align = "right",
    layout = "vertical",
    margin = 0,
    verticalAlign = "top",
    y = 25,
    symbolHeight = 280
  )

补充说明 #

• 该方案在R Markdown环境下渲染稳定，不会出现JS动态加载的时序问题，渲染效果和原生JS演示完全一致
• 如果需要动态处理前端传入的数据，也可以通过hc_chart(events = list(load = JS("自定义JS处理逻辑")))注入原生JS重写series数据，但R侧预处理的方式性能更优、调试更简单

内容的提问来源于stack exchange，提问作者The Prescient Robot