【问题标题】:Change series order in stacked charts更改堆积图表中的系列顺序
【发布时间】:2019-11-12 00:41:06
【问题描述】:

当我使用任何堆叠模式时,突然系列不按其原始顺序(从左到右的列中的值)。

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

如果设置为 true,则在每个域中堆叠所有系列的元素 价值。注意:在 Column、Area 和 SteppedArea 图表中,Google Charts 反转图例项目的顺序以更好地与 系列元素的堆叠(例如,系列 0 将是最底部的 图例项目)。这不适用于条形图。

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

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

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

堆叠。系列乱序/倒序:

【问题讨论】:

  • 究竟是什么反转了?你是说这部分吗? - i.stack.imgur.com/7TBZ7.png
  • 对不起,没有标记这个。是的,我的意思是有传说的部分

标签: charts google-sheets google-visualization


【解决方案1】:

奇怪,想看看这个问题,因为之前从未注意到传说被颠倒了。

我知道这是脚本版本,而不是在纸上,
但通常,两者的工作方式相同。

但是在这里,
正如预期的那样,当位于右侧的默认位置时,图例会反转。
但是当移动到顶部时,图例会根据需要显示。
请参阅以下工作 sn-ps...

右侧图例

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>

注意:我检查了以前的旧版本的谷歌图表,所有的工作都一样。

【讨论】:

  • 所以问题出在最新版本的 JS 上? :)
【解决方案2】:

尝试按您想要的相反顺序放置数据?这对我有帮助

【讨论】:

  • 这对我也有用,我只是更改了列顺序,它切换了它们的堆叠顺序。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多