如何为三组数据创建堆叠的条形图？ [英] How to create a stacked bar chart for three sets of data?
问题描述
我正在使用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）;
函数drawChart（）{
var data = google.visualization.arrayToDataTable（[
['Branch Office'，'DataSet 1'，'DataSet 2'，'DataSet 3']，
['芝加哥'，400，500，1000]，
['纽约'，400，500，1000]，
['西雅图'，400，500，1000]，
['Average'，400，500，1000]
]）；
var选项= {
图表：{
//标题：销售订单绩效，
//子标题：销售，费用和利润：2014 -2017'，
}，
条形：'horizontal'，//材质条形图必需。
hAxis：{格式：十进制}，
高度：400，
颜色：[’＃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 =函数（e）{
if（e.target.tagName ==='按钮'）{
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>
从一些类似的答案中，我得到的最接近的是修改一些已经发布的小提琴，但似乎没有完全按照我的需要来工作。我正在尝试将我提供的图表与堆积条形图结合起来（如
如何将已经拥有的图表变成一个堆叠的条形图，每个数据点有3个条形？如果不能这样做，最近的是什么我可以做得到类似的结果吗？
编辑：忘记添加前面提到的小提琴了，这与最终结果很接近我需要 http： //jsfiddle.net/qv325979/126/ ，但这仍然不太正确，我开始使用的示例必须经过大量修改才能达到目的。我本质上是在尝试将其达到3条（而不是2条）的位置，并且每个项目的顶部2条具有1个数据点，底部条可以分为5个左右。
我不完全了解如何分解，为什么小提琴中的顶部条有5个单独的部分，而红色条中只有1个部分，所以如果有更多知识的人可以解释为什么会这样
到有2条只有1段的小节，然后是3条大约5条的小节 ...
在前两个系列中使用 series 选项来隔离每个条形
使用 hAxes 选项隐藏其他轴的标签
请参阅以下工作摘要...
go ogle.charts.load（'current'，{回调：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]，[ '纽约'，400、500、200、200、200、200、200]，['西雅图'，400、500、200、200、200、200、200]，['平均'，400、500、200 ，200，200，200，200]]）; var options = {hAxes：{1：{textStyle：{color：'transparent'}}，2：{textStyle：{color：'transparent'}}}，条形：'horizontal'，颜色：['＃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））; }，软件包：['bar']}）;
< script src = https://www.gstatic.com/charts/loader.js>< / script>< div id = chart_div>< / div>
编辑
使用 core 图表是另一种选择，
以下配置选项将使图表 close 与外观相同。 实质
主题的感觉：'material'
但是，核心图表与 material
的分组不同所以必须在数据中手动创建组，
包括行距
也不会自动调整最后一个颜色
请参阅以下工作摘要...
google.charts.load（'current'，{回调：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]， ['芝加哥'，null，500，null，null，null，null，null]，[''，null，null，200、200、200、200、200] ，[''，null，null，null，null，null，null，null，null]，[''，400，null，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，null]，['西雅图'，null，500，null，null，null，null，null，null]，[''，null，null，200，200，200 ，200，200]，[''，null，null，null，null，null，null，null，null]，[''，400，null，null，null，null，null，null，null]，['Average'，null ，500，null，null，null，null，null]，[''，null，null，200，200，200，200，200]，]）; var options = {颜色：['＃1b9e77'，'＃d95f02'，'＃4a148c'，'＃7b1fa2'，'＃9c27b0'，'＃ba68c8'，'＃e1bee7']，条形：{groupWidth：'90 ％'}，hAxis：{format： decimal}，高度：400，isStacked：true，主题： material} var chart = new google.visualization.BarChart（document.getElementById（’chart_div’））; chart.draw（数据，选项）; }，软件包：['corechart']}）;
< script src = https://www.gstatic.com/charts/loader.js>< / script>< div id = chart_div>< / div>
I'm using Google Charts to visualize some metrics and I've ran into a bit of a snag. Right now I have a bar graph that looks like this (code below) and the code behind it is
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>
Taken from some similar answers, the closest I have gotten is modifying a few already posted fiddles but nothing seems to work quite how I need it to. I am trying to combine the chart that I've provided with a Stacked Bar Graph (as demonstrated and explained here but all the little one-off hacks I've seen around Google or on Stack Overflow do not get me what I need.
I essentially want the "DataSet 3" bar to be able to be broken down into a bar similar to this
How can I turn the chart I already have into a stacked bar graph that has 3 bars per data point? And if that can't be done, what is the closest that I can do to get a similar result?
Edit: Forgot to add the fiddle I mentioned earlier. This is as close as I've gotten to the final result that I need http://jsfiddle.net/qv325979/126/ but it's still not quite right and the example that I started working with had to be heavily modified to get to this point. I essentially am trying to get it to where there are 3 bars (instead of 2) and that the top 2 bars for each item have 1 data point and the bottom bar can be split up into 5 or so.
I do not fully understand how to break the bars up though and why the top bar in that fiddle has 5 separate segments while the red bar only has 1 so if anyone more knowledgeable can explain why that would also be greatly appreciated.
to have 2 bars with only 1 segment and then a 3rd bar with 5 or so...
use the series option on the first two series to isolate each bar
use the hAxes option to hide the additional axis' labels
see following working snippet...
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>
EDIT
using a core chart is another option,
the following config option will get the chart close to the look & feel of material
theme: 'material'
however, core charts don't group the same as material
so have to create the groups manually, within the data,
including rows for spacing
nor will it adjust the last color automatically
see following working snippet...
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>
这篇关于如何为三组数据创建堆叠的条形图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
