在Highcharts中创建类似网格的列图

Question

我是Highcharts的新手，我需要帮助创建一个看起来像下图所示的图表。

真的很感激这方面的帮助。

Answer 1

使用gridLineWidth设置网格的宽度：gridLineWidth: 2,

请务必将gridZIndex设置为更高的数字，以使其超过系列：gridZIndex: 4。 减少列数＆＃39; poitPadding下的空格使用enter code here和groupPadding plotOptions。

pointPadding: 0,
groupPadding:0,

检查示例（jsfiddle）

  $('#container').highcharts({
    chart: {
      type: 'column',
      backgroundColor: '#000000',
      plotBackgroundColor: '#808080'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ],
      gridLineWidth: 2,
      gridZIndex: 4,
      gridLineColor:'#000000'
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      gridLineWidth: 2,
      gridZIndex: 4,
      gridLineColor:'#000000'
    },
    plotOptions: {
      series: {
        pointPadding: 0,
        groupPadding:0,
        borderColor:'#808080',
      }
    },
    series: [{
      name: 'Tokyo',
      color:'#D2691E',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  });
});