谷歌图表颜色为柱形图-Java 学习之路

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

enter image description here

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

1 回答

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

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

然而，这提出了一个问题

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

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

如果你尝试下一个方法，那么列将不会正确间隔
null值会有间隙

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' 事件触发时

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

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
  });
}

div {
  display: inline-block;
}

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

回复于 2024-04-29T10:28:51+08:00

谷歌图表颜色为柱形图

1 回答

相关问题