“以不同于3的尺寸给出的行” Google图表 [英] "Row given with size different than 3" Google Charts

问题描述

我在名为Klipfolio的系统中使用Google Charts。一直在修补它好几天。好奇，如果其他人也尝试过相同的。这个问题对于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）; 
 
函数drawChart（）{
 
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'From'）; 
 data.addColumn（'string'，'To'）; 
 data.addColumn（'number'，'Weight'）; 
 
 data.addRows（[datadone]）; 
 
 //设置图表选项。 
 var options = {
 sankey：{
迭代：700，
节点：{
 label：{
 fontName：'Arial'，
 fontSize：12，
 color：'rgb（74,74,74）'，
 bold：true，
 italic：false 
}，
 interactivity：true ，//允许你选择节点。 
 labelPadding：3，//标签和节点之间的水平距离。 
 nodePadding：20，//节点之间的垂直距离。 
 width：10，//节点的厚度。 
颜色：[
'rgb（82,144,233）'，//用于sankey节点的自定义调色板。 
'rgb（113,179,124）'，//节点将循环通过这个调色板
'rgb（206,226,55）'，//给每个节点自己的颜色。 
'rgb（239,209,64）'，
'rgb（236,147,47）'，
'rgb（225,77,87）'，
'rgb（150， 89,148）'，
'rgb（157,121,82）'，
'rgb（154,146,137）'] 
} 
} 
 
 
 }; 
 
 //实例化并绘制我们的图表，并传入一些选项。 
 var chart = new google.visualization.Sankey（document.getElementById（'sankey_basic'））; 
 chart.draw（data，options）; 
} 
  

console.table中的 _dataModel 变量输出为这： http://imgur.com/hQD9V2W 。

console.table中的 thearray 变量输出为： http://imgur.com/TFwkkfQ

当图表呈现时，它会抛出错误：

未捕获的错误：给出的行大小不同于3（表中的列数）

是否有其他步骤I应该采取消除这个错误？我是新来的使用JavaScript和对象/数组。我发现 thearray 变量有4列出现，但是问题出在哪里？

解析方案

看起来像我的问题是在data.addRows函数中添加括号。所以，而不是：

  data.addRows（[datadone]）; 
  

没有生成，我将其替换为：

  data.addRows（datadone）; 
  

感谢Henrik指引我查看数据源。一旦我验证了队形，我就可以找出问题并加以解决。图表看起来不错！

I'm using Google Charts inside of a system called Klipfolio. Been tinkering with it for days. Curious if anyone else has tried the same. This issues isn't particular to Kipfolio but I figured a little bit of background may go a long way.

This is the code:

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);
  }

The _dataModel variable outputs in console.table as this: http://imgur.com/hQD9V2W.

The thearray variable outputs in console.table as this: http://imgur.com/TFwkkfQ

When the chart renders, it throws up the error:

Uncaught Error: Row given with size different than 3 (the number of columns in the table)

Are there any other steps I should take to eliminate this error? I'm new to using javascript and objects/arrays. I see that the thearray variable has 4 columns that appear, but is that the issue?

解决方案

Looks like my issue was adding the brackets on data.addRows function. So instead of:

data.addRows([datadone]);

which didn't generate, I replaced it with:

data.addRows(datadone);

Thanks Henrik for pointing me to look at the data source. Once I verified the formation, I was able to identify the issue and fix it. Chart looks great now!

这篇关于“以不同于3的尺寸给出的行” Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！