谷歌图表，每组的背景颜色

Question

我需要创建一个图表，该图表应按 7 条记录/条进行分组。我这样做如下。但我需要每个组的背景颜色。所以我尝试使用chartArea: {width: '100%', backgroundColor: 'silver'} 和backgroundColor: 'silver'，但它会将颜色应用于整个图表区域和图表，而不是每个组。

我还看到渲染的输出在每个组周围包裹了一个 div/span 以应用 CSS 背景，但似乎不可能像我想的那样包裹。

有没有办法为每个组应用背景颜色，它们之间有空白？ 这是代码：

  google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawColumnChart);
    function drawColumnChart() {
      var data = google.visualization.arrayToDataTable([
        ['Date', 'Value',{ role: 'style' }, 'Value',{ role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }],
          ['1-7', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
          ['8-14', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
          ['15-21', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],

        ]);

      var options = {
        legend: { position: "none" },
         vAxis: {
            gridlines: {
                color: 'transparent'
            }
         }, 
      };
        var container = document.getElementById('column-chart');
       var containerBounds = container.getBoundingClientRect();
      var chart = new google.visualization.ColumnChart(container);
        google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();

  });
      chart.draw(data, options);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

    <div id="chart_container">

      <div id="column-chart" class="chart-div"></div>
    </div>

Answer 1

我们可以使用组合图，并使用区域系列作为背景。

但我们无法使用 x 轴上的字符串到达​​那里，
我们必须使用数字。

但是，我们可以使用对象表示法，
为了设置值（v:）并显示格式化值（f:）

{v: 1, f: '1-7'}

我们也可以在 x 轴刻度中使用上述内容...

  ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],

所以我们将条形组设置为 1、3 和 5。
然后在 0-2、2-4 和 4-6 处使用区域系列作为背景。

首先，使用 x 轴的对象表示法创建数据表。

var data = google.visualization.arrayToDataTable([
  ['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
  [{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  [{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  [{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
]);

然后我们将区域系列列和值添加到单独的行中。
区域系列的值应该是 y 轴上的最大可见值。

var colArea = data.addColumn('number', 'Area');
var colAreaStyle = data.addColumn({role: 'style', type: 'string'});

var row = data.addRow();
data.setValue(row, 0, 0);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');
row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');

row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');
row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');

row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');
row = data.addRow();
data.setValue(row, 0, 6);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');

在我们的选项中，我们隐藏了 x 轴网格线，
设置刻度标签，并设置可见范围。

hAxis: {
  gridlines: {
    color: 'transparent'
  },
  ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
  viewWindow: {
    min: 0,
    max: 6
  }
},

并添加系列类型的选项...

series: {
  7: {
    areaOpacity: 1,
    type: 'area'
  }
},
seriesType: 'bars',

请参阅以下工作 sn-p...

google.charts.load("current", {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawColumnChart);

function drawColumnChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
    [{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
    [{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
    [{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  ]);

  var colArea = data.addColumn('number', 'Area');
  var colAreaStyle = data.addColumn({role: 'style', type: 'string'});

  var row = data.addRow();
  data.setValue(row, 0, 0);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'cyan');
  row = data.addRow();
  data.setValue(row, 0, 2);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'cyan');

  row = data.addRow();
  data.setValue(row, 0, 2);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'magenta');
  row = data.addRow();
  data.setValue(row, 0, 4);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'magenta');

  row = data.addRow();
  data.setValue(row, 0, 4);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'lime');
  row = data.addRow();
  data.setValue(row, 0, 6);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'lime');

  var options = {
    hAxis: {
      gridlines: {
        color: 'transparent'
      },
      ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
      viewWindow: {
        min: 0,
        max: 6
      }
    },
    legend: {
      position: "none"
    },
    series: {
      7: {
        areaOpacity: 1,
        type: 'area'
      }
    },
    seriesType: 'bars',
    vAxis: {
      gridlines: {
        color: 'transparent'
      }
    },
  };

  var container = document.getElementById('column-chart');
  var chart = new google.visualization.ComboChart(container);
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_container">
  <div id="column-chart" class="chart-div"></div>
</div>