如何基于给定数据绘制区分滚轮通过次数的车辆时间线图表？

你之前尝试的column、heatmap、treemap没达到预期效果，大概率是轴的映射方向或数据格式没匹配对。下面给你两种贴合需求的实现方式：

先整理好数据格式 #

不管用哪种方案，先把数据转换成Highcharts可直接识别的结构：

// 格式规则：[滚轮索引, 时间戳, 通过次数]
const rawData = [
  [0, Date.parse('2024-05-20 08:00:00'), 1],
  [0, Date.parse('2024-05-20 08:15:00'), 2],
  [1, Date.parse('2024-05-20 08:05:00'), 1],
  [1, Date.parse('2024-05-20 08:20:00'), 3],
  // 替换成你的真实数据
];

• 滚轮索引：把你的滚轮/车辆ID转成0、1、2这类数字，对应图表的水平类别轴
• 时间戳：用Date.parse()把时间转成时间戳，保证时间轴能正确解析
• 通过次数：作为颜色映射的核心数值

方案1：热力图（完美匹配预期效果） #

你之前试热力图没成功，大概率是没开启轴反转。直接用下面的配置：

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    inverted: true // 关键配置：反转轴，让时间轴垂直显示
  },
  title: {
    text: '车辆滚轮通过时间线'
  },
  xAxis: {
    categories: ['滚轮1', '滚轮2', '滚轮3'], // 替换成你的滚轮名称
    title: { text: '滚轮编号' }
  },
  yAxis: {
    type: 'datetime',
    title: { text: '时间' },
    labels: {
      format: '{value:%H:%M}' // 时间显示格式，可按需调整为年月日时分
    }
  },
  colorAxis: {
    min: 1,
    max: 3, // 替换成你的最大通过次数
    stops: [
      [0, '#FFFFFF'], // 1次对应的颜色
      [0.5, '#FFCC00'], // 2次对应的颜色
      [1, '#FF3300'] // 3次对应的颜色
    ],
    labels: {
      format: '{value}次'
    }
  },
  series: [{
    name: '通过次数',
    borderWidth: 1,
    data: rawData,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

核心说明 #

• inverted: true：交换坐标轴显示方向，让时间轴垂直排列、滚轮类别轴水平排列，完全匹配你要的垂直时间线布局
• colorAxis：通过stops配置不同通过次数对应的颜色，实现直观区分

方案2：散点图（用圆点标记时间点） #

如果不想用色块填充，只想用圆点标记每个通过记录，可选择散点图方案：

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    inverted: true
  },
  title: {
    text: '车辆滚轮通过时间线'
  },
  xAxis: {
    categories: ['滚轮1', '滚轮2', '滚轮3'],
    title: { text: '滚轮编号' }
  },
  yAxis: {
    type: 'datetime',
    title: { text: '时间' },
    labels: { format: '{value:%H:%M}' }
  },
  colorAxis: {
    min: 1,
    max: 3,
    stops: [
      [0, '#55AAFF'],
      [0.5, '#FFDD44'],
      [1, '#EE4444']
    ]
  },
  series: [{
    name: '通过次数',
    data: rawData.map(item => ({
      x: item[0],
      y: item[1],
      value: item[2],
      marker: { radius: 6 } // 可按需调整圆点大小
    })),
    tooltip: {
      pointFormatter: function() {
        return `<b>${this.series.xAxis.categories[this.x]}</b><br/>时间：${Highcharts.dateFormat('%Y-%m-%d %H:%M', this.y)}<br/>通过次数：${this.value}次`;
      }
    }
  }]
});

调试注意事项 #

• 务必将时间转换为时间戳，否则时间轴会显示异常
• 颜色轴的min和max要与你的实际通过次数范围匹配，避免颜色映射混乱
• 热力图中同一个（滚轮，时间）组合只能有一条数据，否则会被覆盖

内容的提问来源于stack exchange，提问作者Navitas28