我正在使用 Google 图表来可视化一些指标，但遇到了一些障碍。现在我有一个条形图，如下所示(代码如下)
其背后的代码是
Javascript
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar', 'corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3'],
['Chicago', 400, 500, 1000],
['New York', 400, 500, 1000],
['Seattle', 400, 500, 1000],
['Average', 400, 500, 1000]
]);
var options = {
chart: {
//title: 'Sales Order Performance',
//subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: { format: 'decimal' },
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
html
<body>
<div id="chart_div"></div>
</body>
从一些类似的答案中，我得到的最接近的是修改一些已经发布的 fiddle ，但似乎没有什么能完全按照我需要的方式工作。我正在尝试将我提供的图表与堆积条形图结合起来(如演示和解释的 here 但我在 Google 或 Stack Overflow 上看到的所有一次性小黑客都没有得到我需要的东西.
我本质上希望“DataSet 3”栏能够分解为与此类似的栏
如何将已有的图表转换为每个数据点有 3 个条形的堆积条形图？如果无法做到这一点，我能做的最接近的结果是什么？
编辑:忘记添加我之前提到的 fiddle 。这与我需要的最终结果非常接近 http://jsfiddle.net/qv325979/126/但它仍然不太正确，我开始使用的示例必须进行大量修改才能达到这一点。我本质上是试图让它达到有 3 个条形图(而不是 2 个)的位置，并且每个项目的顶部 2 个条形图有 1 个数据点，而底部的条形图可以分成 5 个左右。
我不完全理解如何分解这些条，以及为什么 fiddle 中的顶部条有 5 个独立的部分，而红色条只有 1 个，所以如果任何更有知识的人可以解释为什么这也将不胜感激。
最佳答案
有 2 个条形只有 1 个段，然后是第 3 个条形有 5 个左右...
在前两个系列上使用series选项来隔离每个条形
使用hAxes选项隐藏附加轴的标签
请参阅以下工作片段...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
['Chicago', 400, 500, 200, 200, 200, 200, 200],
['New York', 400, 500, 200, 200, 200, 200, 200],
['Seattle', 400, 500, 200, 200, 200, 200, 200],
['Average', 400, 500, 200, 200, 200, 200, 200]
]);
var options = {
hAxes: {
1: {
textStyle: {
color: 'transparent'
}
},
2: {
textStyle: {
color: 'transparent'
}
}
},
bars: 'horizontal',
colors: ['#1b9e77', '#d95f02', '#7570b3'],
hAxis: {
format: 'decimal'
},
height: 400,
isStacked: true,
series: {
0: {
targetAxisIndex: 1
},
1: {
targetAxisIndex: 2
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
},
packages: ['bar']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>编辑
使用核心图表是另一种选择，
以下配置选项将使图表接近 Material 的外观和感觉
主题:' Material '
但是，核心图表与 Material 的分组方式不同
因此必须在数据中手动创建组，
包括行间距
也不会自动调整最后一种颜色
请参阅以下工作片段...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
[' ', 400, null, null, null, null, null, null],
['Chicago', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
[' ', null, null, null, null, null, null, null],
[' ', 400, null, null, null, null, null, null],
['New York', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
[' ', null, null, null, null, null, null, null],
[' ', 400, null, null, null, null, null, null],
['Seattle', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
[' ', null, null, null, null, null, null, null],
[' ', 400, null, null, null, null, null, null],
['Average', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
]);
var options = {
colors: ['#1b9e77', '#d95f02', '#4a148c', '#7b1fa2', '#9c27b0', '#ba68c8', '#e1bee7'],
bar: {
groupWidth: '90%'
},
hAxis: {
format: 'decimal'
},
height: 400,
isStacked: true,
theme: 'material'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>关于javascript - 如何为三组数据创建堆积条形图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40049619/