图表底部的高图绘制行与轴对齐

Question

参见附图。所以基本上我需要的是用图表绘制行。如下图所示，我希望将图表上的温度显示为与轴对齐的行上的线和雪/雨。我的系列阵列中有温度，雨雪数据。

样本数据（对于雨雪，1表示是）：

colSums(myDF[c("L2", "L3", "L4")] > 0)

Answer 1

您可以使用Renderer绘制表格，但数据不会被视为系列，但它们将是带有线条的简单静态数字。但是，您可以使用热图系列来生成图像中的图表。

你需要4 y轴 - 1代表线，2代表标签，最后两代代表雪和雨。其余的是通过高度和顶部属性调整轴位置。

  Highcharts.chart('container', {
chart: {
  spacingBottom: 0,
  marginBottom: 0
},
legend: {
  enabled: false
},
credits: {
  enabled: false
},
xAxis: {
  visible: false
},
yAxis: [{
  height: '60%',
  title: {
    text: null
  }
}, {
  height: '10%',
  top: '60%',
  gridLineWidth: 0,
  offset: 0,
  endOnTick: false,
  startOnTick: false,
  title: {
    text: null
  },
  visible: false
}, {
  height: '10%',
  top: '70%',
  gridLineWidth: 0,
  offset: 0,
  //    min: 0, max: 0,
  endOnTick: false,
  startOnTick: false,
  title: {
    text: null
  },
  categories: ['Rain']
}, {
  height: '10%',
  top: '80%',
  gridLineWidth: 0,
  offset: 0,
  endOnTick: false,
  startOnTick: false,
  title: {
    text: null
  },
  categories: ['Snow']
}],

colorAxis: {
  stops: [
    [0, 'white'],
    [1, 'red']
  ]
},

plotOptions: {
  heatmap: {
    borderColor: 'black',
    borderWidth: 0.5
  }
},

series: [{
  data: [1, 2, 3, 4, 5, 6, 7, 5, 4, 3, 9, 7],
  name: 'Temperature',
  step: 'left'
}, {
  yAxis: 1,
  type: 'heatmap',
  data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(v => [0, v, 'white']),
  showInLegend: false,
  enableMouseTracking: false,
  keys: ['y', 'value', 'color'],
  dataLabels: {
    enabled: true
  }
}, {
  yAxis: 2,
  type: 'heatmap',
  data: [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0].map(v => [0, v]),
  name: 'Rain'
}, {
  type: 'heatmap',
  yAxis: 3,
  data: [0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0].map(v => [0, v]),
  name: 'Snow'
}]

});

示例：http://jsfiddle.net/euLz99mk/