"Row given with size different than 3" Google 图表
"Row given with size different than 3" Google Charts
我在名为 Klipfolio 的系统中使用 Google 图表。这几天一直在修修补补。好奇是否有其他人尝试过相同的方法。这个问题并不是 Kipfolio 特有的,但我认为了解一点背景知识可能会大有帮助。
这是代码:
var _component = this;
var _dataModel = this.dataModel;
var thearray = $.map(_dataModel, function(value, index) {
return [value];
});
var thearrays = ('['+thearray.toString()+']');
var datadone = (JSON.parse(thearrays));
console.table(datadone);
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([datadone]);
// Sets chart options.
var options = {
sankey: {
iterations: 700,
node: {
label: {
fontName: 'Arial',
fontSize: 12,
color: 'rgb(74,74,74)',
bold: true,
italic: false
},
interactivity: true, // Allows you to select nodes.
labelPadding: 3, // Horizontal distance between the label and the node.
nodePadding: 20, // Vertical distance between nodes.
width: 10, // Thickness of the node.
colors: [
'rgb(82,144,233)', // Custom color palette for sankey nodes.
'rgb(113,179,124)', // Nodes will cycle through this palette
'rgb(206,226,55)', // giving each node its own color.
'rgb(239,209,64)',
'rgb(236,147,47)',
'rgb(225,77,87)',
'rgb(150,89,148)',
'rgb(157,121,82)',
'rgb(154,146,137)']
}
}
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
_dataModel 变量在 console.table 中输出如下:http://imgur.com/hQD9V2W.
thearray 变量在 console.table 中输出为:http://imgur.com/TFwkkfQ
图表呈现时,抛出错误:
Uncaught Error: Row given with size different than 3 (the number of columns in the table)
我是否应该采取任何其他步骤来消除此错误?我刚开始使用 javascript 和 objects/arrays。我看到 thearray 变量出现了 4 列,但这是问题所在吗?
看来我的问题是在 data.addRows 函数上添加括号。所以代替:
data.addRows([datadone]);
没有生成,我将其替换为:
data.addRows(datadone);
感谢 Henrik 指点我查看数据源。一旦我验证了编队,我就能够识别问题并解决它。图表现在看起来很棒!
我在名为 Klipfolio 的系统中使用 Google 图表。这几天一直在修修补补。好奇是否有其他人尝试过相同的方法。这个问题并不是 Kipfolio 特有的,但我认为了解一点背景知识可能会大有帮助。
这是代码:
var _component = this;
var _dataModel = this.dataModel;
var thearray = $.map(_dataModel, function(value, index) {
return [value];
});
var thearrays = ('['+thearray.toString()+']');
var datadone = (JSON.parse(thearrays));
console.table(datadone);
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([datadone]);
// Sets chart options.
var options = {
sankey: {
iterations: 700,
node: {
label: {
fontName: 'Arial',
fontSize: 12,
color: 'rgb(74,74,74)',
bold: true,
italic: false
},
interactivity: true, // Allows you to select nodes.
labelPadding: 3, // Horizontal distance between the label and the node.
nodePadding: 20, // Vertical distance between nodes.
width: 10, // Thickness of the node.
colors: [
'rgb(82,144,233)', // Custom color palette for sankey nodes.
'rgb(113,179,124)', // Nodes will cycle through this palette
'rgb(206,226,55)', // giving each node its own color.
'rgb(239,209,64)',
'rgb(236,147,47)',
'rgb(225,77,87)',
'rgb(150,89,148)',
'rgb(157,121,82)',
'rgb(154,146,137)']
}
}
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
_dataModel 变量在 console.table 中输出如下:http://imgur.com/hQD9V2W.
thearray 变量在 console.table 中输出为:http://imgur.com/TFwkkfQ
图表呈现时,抛出错误:
Uncaught Error: Row given with size different than 3 (the number of columns in the table)
我是否应该采取任何其他步骤来消除此错误?我刚开始使用 javascript 和 objects/arrays。我看到 thearray 变量出现了 4 列,但这是问题所在吗?
看来我的问题是在 data.addRows 函数上添加括号。所以代替:
data.addRows([datadone]);
没有生成,我将其替换为:
data.addRows(datadone);
感谢 Henrik 指点我查看数据源。一旦我验证了编队,我就能够识别问题并解决它。图表现在看起来很棒!