Question

请查看http://jsfiddle.net/v1u1afzn/228/

google.load('visualization', '1.1', {
  'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 321, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 123, 578],
    ['2004', 197, 536, 613, 298]
  ]);

  var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      0: {
      },
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
    },
    colors: ['blue', 'red'],
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
};

如何将褪色/浅蓝色（第一列顶部堆叠）更改为黄色？

我找不到改变分组的单个系列颜色的方法。

有什么想法吗？

提前致谢。

Answer 1

使用series选项更改单个系列/列/堆栈的颜色

series: {
  0: {
    color: 'yellow'
  },
  1: {
    color: 'green'
  },
  2: {
    color: 'blue',
    targetAxisIndex: 1
  },
  3: {
    color: 'red',
    targetAxisIndex: 1
  }
}

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 321, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 123, 578],
    ['2004', 197, 536, 613, 298]
  ]);

  var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      0: {
        color: 'yellow'
      },
      1: {
        color: 'green'
      },
      2: {
        color: 'blue',
        targetAxisIndex: 1
      },
      3: {
        color: 'red',
        targetAxisIndex: 1
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意： jsapi不应再用于加载图表库了根据发行说明......

通过jsapi加载程序保留的Google图表版本不再一致更新。出于安全考虑，最后一次更新是预先发布的v45。请从现在开始使用新的gstatic loader.js。

这只会更改load语句，请参阅上面的代码段...

更改堆积的分组Google柱形图的颜色

1 个答案: