在 Highcharts 中创建类似网格的柱形图

Question

我是 Highcharts 的新手，我需要帮助来创建如下图所示的图表。

非常感谢对此的帮助。

Answer 1

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

一定要将 gridZIndex 设置为更高的数字以使其超过系列：gridZIndex: 4。要减少列的 space，请使用 poitPadding 和 plotOptions 下的 groupPaddingenter code here。

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]
    }]
  });
});

在 Highcharts 中创建类似网格的柱形图

Creating a grid-like column graph in Highcharts

graphing

highcharts