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

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',

看下面的工作片段..。

​

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>

​