前面......非常感谢您在论坛寻求帮助！
我正在尝试使用group()函数构建一个包含4个堆叠列和1行的图表。
原始数据表看起来像这样（请忽略目标）： [！[在此处输入图像说明] [1]] [1]
分组数据表应如下所示（请忽略目标和总目标）： [！[在此处输入图像说明] [2]] [2]
我可以看到仪表板呈现，但它真的很瘦，我无法弄清楚它是做什么的。看起来它至少会收集分组的EZ数字，因为鼠标悬停显示了预期的分组总数。
目标也表现得很奇怪。我想我需要对总日数进行某种计算才能修复这一部分。我会在纠正堆积的条形图之后解决这个问题。（编辑：我现在已经知道如何处理它了。）
但是我无法真正说出它在做什么，因为它太小了！
编辑：WhiteHat的回复工作非常精彩。
// 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() {
drawDashboard_TEMPLATE4("2", "LineName");
};
function drawDashboard_TEMPLATE4(p1, v1) {
var divID_suffixFunction = '_TEMPLATE';
var divID_suffixParameter1 = '';
var urlParameter1 = '?prodID=';
var urlParameter1_Value = p1; //comes from index
var prodID_Name = v1; //comes from index
//Temporary until final data source. Then use above.
var urlParameter1 = '?ohg='
var urlParameter1_Value = '982A01';
//Temporary until final data source used as filter instead. Use above.
var prodFilter = Number(p1);
var urlString = '../WWIDetailRaws/filterWWIDetails' + urlParameter1 + urlParameter1_Value;
var urlString_temp = 'https://httpbin.org/get'; //HTTP Test server that accepts GET/Post calls
$.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,
"calDay": new Date(2017, 10, 15),
"v1": 100,
"goal": 200,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0024"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 110,
"goal": 210,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0025"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 120,
"goal": 220,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0024"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 130,
"goal": 230,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0025"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 140,
"goal": 240,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017423"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 150,
"goal": 250,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017424"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 160,
"goal": 260,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017423"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 170,
"goal": 270,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017424"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 180,
"goal": 280,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 190,
"goal": 290,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 300,
"goal": 400,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 310,
"goal": 410,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 17),
"v1": 320,
"goal": 420,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 17),
"v1": 330,
"goal": 430,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
}
];
//Create DataTable
var data = new google.visualization.DataTable();
//Add Columns
data.addColumn('number', 'prodID'); //0 prodID
data.addColumn('date', 'Calendar Day'); //1 calDay
data.addColumn('number', 'EZFE'); //2 case from v1
data.addColumn('number', 'EZRS'); //3 case from v1
data.addColumn('number', 'EZ'); //4 case from v1
data.addColumn('number', 'Other'); //5 case from v1
data.addColumn('number', 'Goal'); //6 goal
data.addColumn('string', 'Plant'); //7 p1
data.addColumn('string', 'GB'); //8 p2
data.addColumn('string', 'Overhead Group'); //9 p3
data.addColumn('string', 'Profit Center'); //10 p4
data.addColumn('string', 'MRP'); //11 p5
data.addColumn('string', 'MBR Stock Category'); //12 p6
data.addColumn('string', 'Valuation Class'); //13 p7
data.addColumn('string', 'Inventory Element'); //14 p8
data.addColumn('string', 'Material'); //15 p9
//Format date object into from JSON to ISO
var dateJSON = new Date(); //obj.clnDate
var y = dateJSON.getFullYear();
var m = dateJSON.getMonth();
var d = dateJSON.getDate();
var dateISO = new Date(y, m, d);
//Add Rows
var dataArray = [];
$.each(result, function(i, obj) {
var bar1 = 0; //EZRS
var bar2 = 0; //EZFE
var bar3 = 0; //FE
var bar4 = 0; //Other
switch (obj.p6) {
case 'EZRS':
bar1 = obj.v1;
break;
case 'EZFE':
bar2 = obj.v1;
break;
case 'FE':
bar3 = obj.v1;
break;
default:
bar4 = obj.v1;
}
dataArray.push([
obj.prodID,
//dateISO,
obj.calDay,
bar1, bar2, bar3, bar4, obj.goal,
obj.p1, obj.p2, obj.p3, obj.p4, obj.p5, obj.p6, obj.p7, obj.p8, obj.p9
]);
});
data.addRows(dataArray);
//Create Data View
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 0,
value: prodFilter
}]));
//view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
//Create Data Aggregation
var groupView = google.visualization.data.group(view, [{
column: 1,
type: 'date'
}, //0
{
column: 12,
type: 'string'
} //1 MBR
], [{
column: 2,
aggregation: google.visualization.data.sum,
type: 'number'
}, //2 EZRS
{
column: 3,
aggregation: google.visualization.data.sum,
type: 'number'
}, //3 EZFE
{
column: 4,
aggregation: google.visualization.data.sum,
type: 'number'
}, //4 FE
{
column: 5,
aggregation: google.visualization.data.sum,
type: 'number'
}, //5 OTHER
//{
//column: 6,
//aggregation: google.visualization.data.sum,
//type: 'number'
//} //6
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('div_dashboard' + divID_suffixFunction + divID_suffixParameter1));
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
'options': {
filterColumnIndex: 0,
ui: {
chartType: 'ComboChart',
chartView: {
columns: [0, 2, 3, 4, 5] //removed 6 goal
},
chartOptions: {
//seriesType: 'bars',
height: 50,
//width: 600,
chartArea: {
width: '80%'
},
series: {
//column 1 is first v1 - Start couting 0 here for series.
0: {
color: 'rgb(0, 86, 145)'
},
/* Dark Blue */
1: {
color: 'rgb(0, 142, 207)'
},
/* Light Blue */
2: {
color: 'rgb(127, 198, 231)'
},
/* Light Blue Pastell */
3: {
color: 'rgb(191,192,194)'
},
/* Light Gray */
4: {
color: 'rgb(226,0,21)'
},
/* Red */
},
}, //END chartOptions
} //END ui
} //END 'options'
}); //END categoryPicker1
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
'view': {
'columns': [0, 2, 3, 4, 5] //removed 6 goal
},
'options': {
width: '100%',
height: 'auto',
seriesType: 'bars',
isStacked: true,
series: {
//column 1 is first v1 - Start couting 0 here for series.
0: {
color: 'rgb(0, 86, 145)'
},
/* Dark Blue */
1: {
color: 'rgb(0, 142, 207)'
},
/* Light Blue */
2: {
color: 'rgb(127, 198, 231)'
},
/* Light Blue Pastell */
3: {
color: 'rgb(191,192,194)'
},
/* Light Gray */
4: {
color: 'rgb(226,0,21)',
type: 'line',
} /* Red */
},
}
});
//Object binding
dashboard.bind([categoryPicker1], [chart]);
//Draw dashboard
dashboard.draw(groupView);
} //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="">
<div id="div_dashboard_table_TEMPLATE" style="width:100%;"></div>
<div id="div_dashboard_chart_TEMPLATE" style="width:100%;"></div>
<div id="div_dashboard_categoryPicker1_TEMPLATE" style="width:100%;"></div>
</div>
答案 0 :(得分：1)
x轴上的日期值导致瘦小列，
因为每个日期代表一个毫秒的时间
如果x轴上有3个日期，则
这是代表
在我看来，柱状图与离散轴的效果更好，
或字符串值
但是，范围过滤器不适用于字符串值
所以我们可以单独留下数据，
并将计算列添加到图表的view属性...
var formatDate = new google.visualization.DateFormat({
pattern: 'MM/dd/yyyy'
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
'view': {
columns: [
{
label: groupView.getColumnLabel(0),
type: 'string',
calc: function (dt, row) {
return formatDate.formatValue(dt.getValue(row, 0));
}
}, 1, 2, 3, 4
]
},
...
请参阅以下工作代码段...
// Load the Visualization API and the corechart package.
google.charts.load('current', {
callback: gChart0,
packages: ['corechart', 'table', 'gauge', 'controls']
});
function gChart0() {
drawDashboard_TEMPLATE4("2", "LineName");
};
function drawDashboard_TEMPLATE4(p1, v1) {
var divID_suffixFunction = '_TEMPLATE';
var divID_suffixParameter1 = '';
var urlParameter1 = '?prodID=';
var urlParameter1_Value = p1; //comes from index
var prodID_Name = v1; //comes from index
//Temporary until final data source. Then use above.
var urlParameter1 = '?ohg='
var urlParameter1_Value = '982A01';
//Temporary until final data source used as filter instead. Use above.
var prodFilter = Number(p1);
var urlString = '../WWIDetailRaws/filterWWIDetails' + urlParameter1 + urlParameter1_Value;
var urlString_temp = 'https://httpbin.org/get'; //HTTP Test server that accepts GET/Post calls
$.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,
"calDay": new Date(2017, 10, 15),
"v1": 100,
"goal": 200,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0024"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 110,
"goal": 210,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0025"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 120,
"goal": 220,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0024"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 130,
"goal": 230,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZRS",
"p7": "3000",
"p8": "I",
"p9": "6002LG0025"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 140,
"goal": 240,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017423"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 150,
"goal": 250,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017424"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 160,
"goal": 260,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017423"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 170,
"goal": 270,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "EZFE",
"p7": "7900",
"p8": "I",
"p9": "0258017424"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 180,
"goal": 280,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 15),
"v1": 190,
"goal": 290,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 300,
"goal": 400,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 16),
"v1": 310,
"goal": 410,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 17),
"v1": 320,
"goal": 420,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MG"
},
{
"prodID": 2,
"calDay": new Date(2017, 10, 17),
"v1": 330,
"goal": 430,
"p1": "9820",
"p2": "GS",
"p3": "982G01",
"p4": "P00258",
"p5": "315",
"p6": "FE",
"p7": "7920",
"p8": "I",
"p9": "02580173502MF"
}
];
//Create DataTable
var data = new google.visualization.DataTable();
//Add Columns
data.addColumn('number', 'prodID'); //0 prodID
data.addColumn('date', 'Calendar Day'); //1 calDay
data.addColumn('number', 'EZFE'); //2 case from v1
data.addColumn('number', 'EZRS'); //3 case from v1
data.addColumn('number', 'EZ'); //4 case from v1
data.addColumn('number', 'Other'); //5 case from v1
data.addColumn('number', 'Goal'); //6 goal
data.addColumn('string', 'Plant'); //7 p1
data.addColumn('string', 'GB'); //8 p2
data.addColumn('string', 'Overhead Group'); //9 p3
data.addColumn('string', 'Profit Center'); //10 p4
data.addColumn('string', 'MRP'); //11 p5
data.addColumn('string', 'MBR Stock Category'); //12 p6
data.addColumn('string', 'Valuation Class'); //13 p7
data.addColumn('string', 'Inventory Element'); //14 p8
data.addColumn('string', 'Material'); //15 p9
//Format date object into from JSON to ISO
var dateJSON = new Date(); //obj.clnDate
var y = dateJSON.getFullYear();
var m = dateJSON.getMonth();
var d = dateJSON.getDate();
var dateISO = new Date(y, m, d);
//Add Rows
var dataArray = [];
$.each(result, function(i, obj) {
var bar1 = 0; //EZRS
var bar2 = 0; //EZFE
var bar3 = 0; //FE
var bar4 = 0; //Other
switch (obj.p6) {
case 'EZRS':
bar1 = obj.v1;
break;
case 'EZFE':
bar2 = obj.v1;
break;
case 'FE':
bar3 = obj.v1;
break;
default:
bar4 = obj.v1;
}
dataArray.push([
obj.prodID,
//dateISO,
obj.calDay,
bar1, bar2, bar3, bar4, obj.goal,
obj.p1, obj.p2, obj.p3, obj.p4, obj.p5, obj.p6, obj.p7, obj.p8, obj.p9
]);
});
data.addRows(dataArray);
//Create Data View
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{
column: 0,
value: prodFilter
}]));
//view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
//Create Data Aggregation
var groupView = google.visualization.data.group(view, [1], [
{
column: 2,
aggregation: google.visualization.data.sum,
type: 'number'
}, //2 EZRS
{
column: 3,
aggregation: google.visualization.data.sum,
type: 'number'
}, //3 EZFE
{
column: 4,
aggregation: google.visualization.data.sum,
type: 'number'
}, //4 FE
{
column: 5,
aggregation: google.visualization.data.sum,
type: 'number'
} //5 OTHER
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('div_dashboard' + divID_suffixFunction + divID_suffixParameter1));
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
'options': {
filterColumnIndex: 0,
ui: {
chartType: 'LineChart',
chartOptions: {
height: 50,
chartArea: {
width: '80%'
},
series: {
//column 1 is first v1 - Start couting 0 here for series.
0: {
color: 'rgb(0, 86, 145)'
},
/* Dark Blue */
1: {
color: 'rgb(0, 142, 207)'
},
/* Light Blue */
2: {
color: 'rgb(127, 198, 231)'
},
/* Light Blue Pastell */
3: {
color: 'rgb(191,192,194)'
},
/* Light Gray */
4: {
color: 'rgb(226,0,21)'
},
/* Red */
},
}, //END chartOptions
} //END ui
} //END 'options'
}); //END categoryPicker1
var formatDate = new google.visualization.DateFormat({
pattern: 'MM/dd/yyyy'
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
'view': {
columns: [
{
label: groupView.getColumnLabel(0),
type: 'string',
calc: function (dt, row) {
return formatDate.formatValue(dt.getValue(row, 0));
}
}, 1, 2, 3, 4
]
},
'options': {
width: '100%',
height: 'auto',
seriesType: 'bars',
isStacked: true,
series: {
//column 1 is first v1 - Start couting 0 here for series.
0: {
color: 'rgb(0, 86, 145)'
},
/* Dark Blue */
1: {
color: 'rgb(0, 142, 207)'
},
/* Light Blue */
2: {
color: 'rgb(127, 198, 231)'
},
/* Light Blue Pastell */
3: {
color: 'rgb(191,192,194)'
},
/* Light Gray */
4: {
color: 'rgb(226,0,21)',
type: 'line',
} /* Red */
},
}
});
//Object binding
dashboard.bind([categoryPicker1], [chart]);
//Draw dashboard
dashboard.draw(groupView);
} //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="">
<div id="div_dashboard_table_TEMPLATE" style="width:100%;"></div>
<div id="div_dashboard_chart_TEMPLATE" style="width:100%;"></div>
<div id="div_dashboard_categoryPicker1_TEMPLATE" style="width:100%;"></div>
</div>