Google图表，柱形图，每列两种不同的颜色 [英] Google charts, Column chart two different colors per column
问题描述
假设我有一个这样的数据表:
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeType');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
然后我添加4行，如下所示:
drivingData.addRow(['Trucks-S',0, 1000, 1200])
drivingData.addRow(['Trucks-F',1, 300, 500])
drivingData.addRow(['Trailer-S',0, 1200, 1500])
drivingData.addRow(['Trailer-F',1, 100, 500])
我想要一个堆积式"柱形图.第一个显示的是TimeType 0的Trucks-S，具有黄色和橙色. 第二个将显示带有灰色和浅灰色颜色的TimeType 1的Trucks-F.
然后，第三种将再次是黄色和橙色，第四种是灰色和浅灰色，依此类推...
这可能吗?
类似这样的事情: https://imgur.com/a/oNOiP
所请求的图表仅作为材料条形图
提供 材料-> google.charts.Bar-packages: ['bar']
经典-> google.visualization.ColumnChart-packages: ['corechart']
您可以将材料条形图分成多个堆栈，
通过将一组序列分配给不同的y轴
这可以通过使用series选项
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
这将在图表的右侧创建第二个轴，
默认情况下会具有不同的比例
要使两个y轴保持同步，请分配一个特定的视图窗口
vAxis: {
viewWindow: {
min: 0,
max: 3000
}
}
请参阅以下工作片段...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var drivingData = new google.visualization.DataTable();
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var options = google.charts.Bar.convertOptions({
colors: ['#fbc02d', '#616161'],
height: 400,
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
viewWindow: {
min: 0,
max: 3000
}
}
});
chart.draw(drivingData, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
注意:请记住，
材料图表不支持某些配置选项
请参阅-> 物料图特征奇偶校验的跟踪问题
编辑
材料图表当前不支持 isStacked: 'percent'
要解决此问题，请在绘制图表之前手动转换数据
请参阅以下工作片段，
y轴列将以两个为一组进行转换...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var drivingData = new google.visualization.DataTable();
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])
// convert data to percent
var percentData = new google.visualization.DataTable();
for (var col = 0; col < drivingData.getNumberOfColumns(); col++) {
percentData.addColumn(drivingData.getColumnType(col), drivingData.getColumnLabel(col));
}
for (var row = 0; row < drivingData.getNumberOfRows(); row++) {
var newRow = percentData.addRow();
percentData.setValue(newRow, 0, drivingData.getValue(row, 0));
for (var col = 1; col < drivingData.getNumberOfColumns(); col++) {
if ((col % 2) !== 0) {
var rowTotal = drivingData.getValue(row, col) + drivingData.getValue(row, (col + 1));
percentData.setValue(newRow, col, (drivingData.getValue(row, col) / rowTotal));
percentData.setValue(newRow, (col + 1), (drivingData.getValue(row, (col + 1)) / rowTotal));
}
}
}
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var options = google.charts.Bar.convertOptions({
colors: ['#fbc02d', '#616161'],
height: 400,
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
format: '0%',
viewWindow: {
min: 0,
max: 1
}
}
});
chart.draw(percentData, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Let's say I have a datatable like this:
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeType');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
then I add 4 rows like this:
drivingData.addRow(['Trucks-S',0, 1000, 1200])
drivingData.addRow(['Trucks-F',1, 300, 500])
drivingData.addRow(['Trailer-S',0, 1200, 1500])
drivingData.addRow(['Trailer-F',1, 100, 500])
I would like to have a 'stacked' column chart. First one shows Trucks-S with TimeType 0 with yellow and orange colors. Second would show Trucks-F with TimeType 1 with grey and light-grey colors.
Third would then again be yellow and orange and fourth grey and light-grey and so on...
Is this possible?
Something like this: https://imgur.com/a/oNOiP
the requested chart is only available as a Material bar chart
Material --> google.charts.Bar -- packages: ['bar']
Classic --> google.visualization.ColumnChart -- packages: ['corechart']
you can break Material bar charts into multiple stacks,
by assigning a group of series to a different y-axis
this is accomplished by using the series option
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
this will create a second axis on the right side of the chart,
which will have a different scale by default
to keep both y-axis in sync, assign a specific view window
vAxis: {
viewWindow: {
min: 0,
max: 3000
}
}
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var drivingData = new google.visualization.DataTable();
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var options = google.charts.Bar.convertOptions({
colors: ['#fbc02d', '#616161'],
height: 400,
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
viewWindow: {
min: 0,
max: 3000
}
}
});
chart.draw(drivingData, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: just keep in mind,
there are several configuration options that are not supported by Material charts
see --> Tracking Issue for Material Chart Feature Parity
EDIT
isStacked: 'percent' is currently not support by Material charts
to work around this issue, convert the data manually, before drawing the chart
see following working snippet,
y-axis columns will be converted in groups of two...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var drivingData = new google.visualization.DataTable();
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])
// convert data to percent
var percentData = new google.visualization.DataTable();
for (var col = 0; col < drivingData.getNumberOfColumns(); col++) {
percentData.addColumn(drivingData.getColumnType(col), drivingData.getColumnLabel(col));
}
for (var row = 0; row < drivingData.getNumberOfRows(); row++) {
var newRow = percentData.addRow();
percentData.setValue(newRow, 0, drivingData.getValue(row, 0));
for (var col = 1; col < drivingData.getNumberOfColumns(); col++) {
if ((col % 2) !== 0) {
var rowTotal = drivingData.getValue(row, col) + drivingData.getValue(row, (col + 1));
percentData.setValue(newRow, col, (drivingData.getValue(row, col) / rowTotal));
percentData.setValue(newRow, (col + 1), (drivingData.getValue(row, (col + 1)) / rowTotal));
}
}
}
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var options = google.charts.Bar.convertOptions({
colors: ['#fbc02d', '#616161'],
height: 400,
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
format: '0%',
viewWindow: {
min: 0,
max: 1
}
}
});
chart.draw(percentData, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于Google图表，柱形图，每列两种不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
