mes*_*600 10 charts google-visualization google-sheets
当我使用任何堆叠模式时,系列突然不再按其原始顺序(从左到右的列中的值)。
我在https://developers.google.com/chart/interactive/docs/gallery/barchart上找到了此描述:
如果设置为 true,则在每个域值处堆叠所有系列的元素。注意:在柱形图、面积图和阶梯面积图中,Google 图表会反转图例项的顺序,以更好地对应系列元素的堆叠(例如,系列 0 将是最底部的图例项)。这不适用于条形图。
这实际上是不正确的(或者也许我在这里做错了什么),因为我真的对堆叠的条形感兴趣。请检查下面的屏幕截图。
有什么方法可以改变堆叠图表中的顺序吗?
不堆叠,系列按正确顺序排列:
堆叠。系列无序/颠倒顺序:
奇怪,想看看这个问题,因为以前从未注意到传说被颠倒了。
我意识到这是脚本版本而不是在纸上,
但通常两者的工作原理相同。
然而在这里,
当图例位于右侧的默认位置时,图例会反转,正如预期的那样。
但当移动到顶部时,图例会根据需要显示。
请参阅以下工作片段...
右侧图例
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);
});Run Code Online (Sandbox Code Playgroud)
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>Run Code Online (Sandbox Code Playgroud)
顶部的图例
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);
});Run Code Online (Sandbox Code Playgroud)
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>Run Code Online (Sandbox Code Playgroud)
注意:我检查了以前的旧版本的谷歌图表,所有的工作原理都是一样的。
| 归档时间: |
|
| 查看次数: |
23707 次 |
| 最近记录: |