代码之家 › 专栏 › 技术社区 › smbeaudry

Highcharts modulo alternateGridColor

highcharts html javascript

smbeaudry · 技术社区 · 6 年前

在HighCharts中,是否有一种内置的方法在功能上与“alternateGridColor”相似,以便在每三行、第四行等中添加网格颜色?目前,“alternateGridColor”只允许您每隔一行着色一次。

这就是我试图完成的设计:

1 回复 | 直到 6 年前

Barbara Laird 6 年前

虽然没有自动化的方法,但您可以使用plotBands来实现外观。

var categories = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var plotBands = [];
for (var i = 0; i < categories.length; i++) {
  if (i % 3 == 1) {
    plotBands.push({
      color: '#fecdfe',
      from: i - .5,
      to: i + .5
    });
  } else if (i % 3 == 2) {
    plotBands.push({
      color: '#cdfee5',
      from: i - .5,
      to: i + .5
    });
  }
}
Highcharts.chart('container', {
  yAxis: {

  },
  xAxis: {
    categories: categories,
    plotBands: plotBands,
  },

  series: [{
    type: 'bar',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],

  }]
});

http://jsfiddle.net/wskt4hzz/