javascript - 如何将背景颜色添加到 Highcharts 中的类别分组

Question

我有一个通过 Highcharts 呈现的柱形图，其中包含多个类别和多个系列。虽然 Highcharts 优雅地按类别对系列数据进行分组和对齐，但似乎没有允许为类别分组设置背景颜色的配置选项。

我想按类别实现斑马条纹，就像我在 Photoshop® 中制作的这个粗略模型:

这是一个 jsfiddle containing my current code ，以及我当前的图表配置:

var chartOptions = {
  "chart": {
    "type": "column"
  },
  "title": {
    "text": ""
  },
  "credits": {
    "enabled": false
  },
  "subtitle": {
    "text": ""
  },
  "xAxis": {
    "categories": [
      "Category 1",
      "Category 2",
      "Category 3",
      "Category 4",
      "Category 5",
      "Category 6"
    ],
    "opposite": true
  },
  "yAxis": {
    "title": {
      "text": "Score"
    },
    "tickPixelInterval": 40
  },
  "plotOptions": {
    "column": {
      "pointPadding": 0.2,
      "borderWidth": 0
    }
  },
  "series": [
    {
      "name": "Series 1",
      "data": [22.735, 5.9, -18.71, -41.17, -0.865, -6.03]
    },
    {
      "name": "Series 2",
      "data": [20.67, 5.46, -17.15, -37.66, -0.79, -5.52]
    },
    {
      "name": "Series 3",
      "data": [29, 2, -20, -29, -2, 16]
    }
  ]
};

Answer 1

您可以使用 alternateGridColor xAxis 上的选项:

"xAxis": {
    "categories": [
      "Category 1",
      "Category 2",
      "Category 3",
      "Category 4",
      "Category 5",
      "Category 6"
    ],
    "opposite": true,
     alternateGridColor: '#CCC'

如果您查看 xAxis documentation您可以使用许多不同的属性。

Demo