Question

我想交换替代网格和普通网格的颜色，如何实现呢？

我的工作jsfiddle在

之下

function aoassortmentschart() {
  $(function() {
     $('#ao-assortments-container').highcharts({

    chart: {
    type: 'column',
    inverted: true,
    verticalAlign: "center"
  },
  credits: {
    enabled: false
  },
  title: null,


  xAxis: {
    alternateGridColor: '#F7F7F7',
    offset: 120,
    categories: ["5 CLUSTERS", "4 CLUSTERS", "3 CLUSTERS", "2 CLUSTERS", "1 CLUSTER"],
    tickWidth: 0,

    lineWidth: 0,
    min: 0,
    max: 4,
    labels: {
      enabled: true,
      useHTML: true,
      x: 100,
      formatter: function() {
        return '<div><input type="radio" class="ao-assortment-radio" style="margin-right: 10px" size="10" name="assortmentClusterValue"/><span class="ao-assortment-clustertitle">' + this.value + '</span></div>'
      }
    }
  },
  yAxis: {
    min: 0,
    max: 250,
    tickInterval: 50,
    title: null,
    gridLineColor: '#ede9e9'
  },
  legend: {
    enabled: true,
    layout: 'horizontal',
    align: 'bottom',
    width: 75,
    x: 30,
    y: 0,
    borderWidth: 0,
    symbolHeight: "0",
    borderWidth: "0",
    useHTML: true,

    labelFormatter: function() {

      return '<div class="ao-assortment-title"><span class="ao-assortment-legend-shape">&nbsp;</span> Sales </div>'
    }
  },
  plotOptions: {
    series: {

      pointWidth: 31,
      allowPointSelect: false,
      marginLeft: 50,
      dataLabels: {
        align: 'center',
        enabled: true,
        useHTML: true,
        x: -30,
        formatter: function() {
          return "$ " + this.y
        },
        style: {
          fontWeight: "normal",
          textAlign: "center",
          color: "#fff"
        }
      }
    }

  },
  series: [{
    name: "Clusters",
    data: [200, 120, 240, 170, 100],
    color: "#60B3D1"
  }]
});

}）;}

工作jsfiddle是here

偶数网格我有浅灰色，但我希望该颜色适用于奇数行，

帮助将不胜感激！提前谢谢:)

Answer 1

您可以将浅灰色应用为plotBackgroundColor，然后将alternateGridColor设置为白色。

chart: {
        plotBackgroundColor: '#F7F7F7',
        ...
},
xAxis: {
        alternateGridColor: '#fff',
        ...
}

示例：

https://jsfiddle.net/oojtn82s/

如何在highcharts中更改网格替换颜色

1 个答案: