在堆叠图表中更改系列顺序

时间:2019-07-01 10:44:14

标签: charts google-sheets google-visualization

当我使用任何一种堆叠模式时,突然序列都没有按其原始顺序排列(从左到右的列中的值)。

我在https://developers.google.com/chart/interactive/docs/gallery/barchart上找到了此描述:

  

如果设置为true,则在每个域中堆叠所有系列的元素   值。注意:在“柱形图”,“面积图”和“阶梯区域图”中,“ Google图表”   反转图例项的顺序以更好地与   系列元素的堆叠(例如,系列0将是最底部   图例项)。这不适用于条形图。

实际上不是真的(或者我在这里做错了什么),因为我对堆叠条非常感兴趣。请查看下面的屏幕截图。

有什么办法可以改变堆积图的顺序?

没有堆叠,序列的顺序正确:

No stacking, series are in correct order

堆叠。系列无序/逆序:

Stacked. Series are out of order/reversed order

2 个答案:

答案 0 :(得分:1)

奇怪,想看看这个问题,因为以前从未注意到图例被颠倒过。

我意识到这是脚本版本,而不是在纸上,
但通常情况下,两者都是一样的。

但是在这里,
如所预期的那样,图例在右侧的默认位置被反转。
但是将图例移到顶部时会按需显示。
参见以下工作片段...

右侧的

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    isStacked: true,
    
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 32,
      right: 128,
      bottom: 32
    },
    height: 400,
    width: '100%'    
  };
  var dataTable = google.visualization.arrayToDataTable([
    ['Date', 'Series 1', 'Series 2', 'Series 3'],
    ['04/01/2019', 40, 13, 20],
    ['16/01/2019', 50, 15, 33],
    ['28/01/2019', 60, 20, 10],
    ['09/02/2019', 43, 7, 6]
  ]);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

顶部的传奇

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    isStacked: true,
    legend: {
      alignment: 'center',
      position: 'top'
    },
    
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 32,
      right: 128,
      bottom: 32
    },
    height: 400,
    width: '100%'    
  };
  var dataTable = google.visualization.arrayToDataTable([
    ['Date', 'Series 1', 'Series 2', 'Series 3'],
    ['04/01/2019', 40, 13, 20],
    ['16/01/2019', 50, 15, 33],
    ['28/01/2019', 60, 20, 10],
    ['09/02/2019', 43, 7, 6]
  ]);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意:我检查了以前的旧版本的Google图表,它们的工作原理相同。

答案 1 :(得分:1)

尝试以所需的相反顺序放置数据?这对我有帮助