我想要一个堆积的条形图。以下示例应为2017-W30堆叠两个值。相反,它在x轴上给了我2017-W30两次。
我在选项中使用了isStacked
,但它无效。
'options': {
width: '100%',
height: 'auto',
seriesType: 'bars',
isStacked: true
}
旁注:我稍后会尝试让一个球门线上班。这就是我使用'chartType': 'ComboChart',
。
这是我的工作代码:
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);
function gChart0() {
drawChart();
};
function drawChart() {
var divID_suffixFunction = '_TEMPLATE';
var divID_suffixParameter1 = '';
//var urlString = '../Logs/clnLogsCountingEvents?grade=All&SC=1&CauseSC=3';
//var urlString_temp = 'https://jsonplaceholder.typicode.com/users';
var urlString_temp = 'https://httpbin.org/get'; //source: https://resttesttest.com/
$.ajax({
type: 'GET',
dataType: 'json',
contentType: "application/json",
//url: urlString,
url: urlString_temp,
success: function(result) {
//Manually loaded "result" with JSON that normally comes from "urlString".
result = [{
"prodID": 2,
"calendarWeek": "2017-W29",
"qty": 1,
"goal": 5
},
{
"prodID": 2,
"calendarWeek": "2017-W30",
"qty": 3,
"goal": 5
},
{
"prodID": 1,
"calendarWeek": "2017-W30",
"qty": 2,
"goal": 5
}
];
//Create DataTable
var data = new google.visualization.DataTable();
//Add Columns
data.addColumn('number', 'prodID');
data.addColumn('string', 'calendarWeek');
data.addColumn('number', 'qty');
data.addColumn('number', 'goal');
//Add Rows
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([
obj.prodID,
obj.calendarWeek,
obj.qty,
obj.goal
]);
});
data.addRows(dataArray);
//Create Data View
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('div_dashboard' + divID_suffixFunction + divID_suffixParameter1));
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
'options': {
'filterColumnIndex': 0, //Column used in control
'ui': {
//'label': 'Storage Bin',
'labelStacking': 'vertical',
'labelSeparator': ':'
}
}
});
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'div_dashboard_categoryPicker2' + divID_suffixFunction + divID_suffixParameter1,
'options': {
'filterColumnIndex': 1, //Column used in control
'ui': {
//'label': 'Storage Bin',
'labelStacking': 'vertical',
'labelSeparator': ':'
}
}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
'view': {
'columns': [1, 2]
},
'options': {
width: '100%',
height: 'auto',
seriesType: 'bars',
isStacked: true,
//series: { 2: { type: 'line' } }
}
});
//Object Binding
dashboard.bind([categoryPicker1, categoryPicker2], [chart]);
// Draw the dashboard.
dashboard.draw(view);
} //END success: function (result) {
}); //END $.ajax({
} //END function drawChart()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard_TEMPLATE" style="">
<table style="width:100%">
<tr>
<td style="width:15%;">
<div id="div_dashboard_categoryPicker1_TEMPLATE" style="padding-right:35px;"></div>
</td>
<td style="width:15%;">
<div id="div_dashboard_categoryPicker2_TEMPLATE" style="padding-right:35px;"></div>
</td>
</tr>
</table><br />
<div id="div_dashboard_chart_TEMPLATE"></div>
</div>
与往常一样,非常感谢您的帮助!
答案 0 :(得分:2)
isStacked
选项堆叠同一行中每列的值
为了在同一周堆叠多个值,
您的数据需要与以下内容类似......
['calendarWeek', 'prodID 1', 'prodID 2', 'goal'],
['2017-W29', null, 1, 5],
['2017-W30', 2, 3, 5],
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['controls']
}).then(function () {
//Manually loaded "result" with JSON that normally comes from "urlString".
result = [{
"prodID": 2,
"calendarWeek": "2017-W29",
"qty": 1,
"goal": 5
},
{
"prodID": 2,
"calendarWeek": "2017-W30",
"qty": 3,
"goal": 5
},
{
"prodID": 1,
"calendarWeek": "2017-W30",
"qty": 2,
"goal": 5
}
];
//Create DataTable
var data = new google.visualization.DataTable();
//Add Columns
data.addColumn('string', 'calendarWeek');
$.each(result, function(i, obj) {
var colIndex = getColumnIndex('prodID ' + obj.prodID);
if (colIndex === -1) {
data.addColumn('number', 'prodID ' + obj.prodID);
}
});
data.addColumn('number', 'goal');
//Add Rows
var dataArray = [];
$.each(result, function(i, obj) {
var rowIndex = getRowIndex(obj.calendarWeek);
if (rowIndex === -1) {
rowIndex = data.addRow();
}
data.setValue(rowIndex, 0, obj.calendarWeek);
data.setValue(rowIndex, getColumnIndex('prodID ' + obj.prodID), obj.qty);
data.setValue(rowIndex, getColumnIndex('goal'), obj.goal);
});
//Create Data View
var view = new google.visualization.DataView(data);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('div_dashboard'));
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'div_dashboard_categoryPicker1',
'options': {
'filterColumnIndex': getColumnIndex('calendarWeek'), //Column used in control
'ui': {
'labelStacking': 'vertical',
'labelSeparator': ':'
}
}
});
var series = {};
series[getColumnIndex('goal') - 1] = { type: 'line' };
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'div_dashboard_chart',
'options': {
width: '100%',
height: 'auto',
seriesType: 'bars',
isStacked: true,
series: series
}
});
//Object Binding
dashboard.bind([categoryPicker1], [chart]);
// Draw the dashboard.
dashboard.draw(view);
function getColumnIndex(label) {
var colIndex = -1;
for (var i = 0; i < data.getNumberOfColumns(); i++) {
if (data.getColumnLabel(i) === label) {
colIndex = i;
}
}
return colIndex;
}
function getRowIndex(week) {
var rowIndex = -1;
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 0) === (week)) {
rowIndex = i;
}
}
return rowIndex;
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard">
<div id="div_dashboard_categoryPicker1"></div>
<div id="div_dashboard_categoryPicker2"></div>
<div id="div_dashboard_chart"></div>
</div>
&#13;