Google 个图表 javascript : 堆积柱形，透明色

Question

这是我的堆积图，我希望能够将会话的颜色（此处为红色）更改为透明。你有什么想法吗？谢谢。

这是我的代码：

var data = google.visualization.arrayToDataTable(my_data);
var options = {
        title: 'S-Score',
        colors: ['red', '#70a1c0'],
        width: 700,
        height: 400,
        chartArea: { width: "60%" },
        fontSize: 14,
        legend: { position: 'right' },
        bar: { groupWidth: '75%' },
        isStacked: true
    };
    var chart = new google.visualization.ColumnChart(document.getElementById('E_chart'));

Answer 1

你可以使用'transparent'作为颜色名称，这里...

    colors: ['transparent', '#70a1c0'],

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'white', 'colored'],
    ['E', 0, 4],
    ['S', 4, 3],
    ['G', 7, 3],
    ['E', 10, 6],
    ['Score', 0, 16]
  ]);

  var options = {
    title: 'S-Score',
    colors: ['transparent', '#70a1c0'],
    width: 700,
    height: 400,
    chartArea: { width: "60%" },
    fontSize: 14,
    legend: { position: 'right' },
    bar: { groupWidth: '75%' },
    isStacked: true
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('E_chart'));
  chart.draw(data, options);
});

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

Google 个图表 javascript : 堆积柱形，透明色

Google charts javascript : Stacked column, transparent color

javascript

charts

google-visualization

opacity

stacked-chart