Google Charts色谱柱的颜色

Question

我有来自相同源数据的饼图和柱形图。

我希望条形图中的颜色具有像饼图中那样的相应颜色。这些是默认的Google Charts颜色（按顺序）。因此，第一列应为蓝色，第二列为红色，第三列为黄色，第四列为绿色。怎么做到这一点？

Answer 1

在柱形图中，默认情况下，同一系列中的值是相同的颜色

系列由列定义，默认情况下具有不同的颜色，
将每个值放在一个单独的列中

然而，这提出了一个问题

如果您按如下方式构建数据，则会丢失x轴标签
所有列只有一个标签

var data = google.visualization.arrayToDataTable([
  ['x', 'y0', 'y1', 'y2', 'y3'],
  ['Razina0', 898, 37319, 8980, 35400]
]);

如果您尝试下一种方法，那么列将无法正确间隔 空值

会有间隙

var data = google.visualization.arrayToDataTable([
  ['x', 'y0', 'y1', 'y2', 'y3'],
  ['Razina0', 898, null, null, null],
  ['Razina1', null, 37319, null, null],
  ['Razina2', null, null, 8980, null],
  ['Razina3', null, null, null, 35400],
]);

最好的选择是使用样式列
这将允许您保持当前的数据结构 并为每列提供不同的颜色

唯一的缺点是你必须提供颜色
所以你失去了默认的颜色

因此，建议先绘制饼图 然后使用分配给每个切片的颜色
当饼图的'ready'事件触发时

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

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    ['Razina0', 898],
    ['Razina1', 37319],
    ['Razina2', 8980],
    ['Razina3', 35400]
  ]);

  var chartPie = new google.visualization.PieChart(document.getElementById('chart_pie'));
  var chartColumn = new google.visualization.ColumnChart(document.getElementById('chart_column'));

  google.visualization.events.addListener(chartPie, 'ready', function () {
    var colIndex = data.addColumn({type: 'string', role: 'style'});
    $.each($('#chart_pie path'), function (rowIndex) {
      data.setValue(rowIndex, colIndex, $(this).attr('fill'));
    });

    chartColumn.draw(data, {
      legend: {
        position: 'none'
      }
    });
  });

  chartPie.draw(data, {
    height: 240
  });
}

＆＃13;

div {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_pie"></div>
<div id="chart_column"></div>

＆＃13;

＆＃13;

＆＃13;