javascript - Highchart 在图表底部绘制与轴对齐的行

Question

请参阅附图。所以基本上我需要的是用图表绘制行。如下图所示，我想在图表上将温度显示为一条线，将雪/雨显示在与轴对齐的行上。我的系列数组中有温度、雨和雪数据。

示例数据(对于雨雪，1 表示是):

series: [{
        type: 'line',
        data: [1,2,3,4,5,6,7,5,4,3,9,7],
        name: 'Temperature'
    }, {
        data: [0,1,0,0,0,0,1,0,1,0,0,0],
        name: 'Rain'
    },{
        data: [0,1,0,0,0,0,1,0,0,0,0,0],
        name: 'Snow'
    }]

Answer 1

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

您需要 4 个 y 轴 - 1 个用于线条，2 个用于标签，最后两个用于雪和雨。剩下的就是通过 height 和 top 属性调整轴位置。

  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/