没有足够的列来绘制 - 谷歌图表答案

【问题标题】：not enough columns to draw -google charts没有足够的列来绘制 - 谷歌图表
【发布时间】：2016-03-19 03:16:46
【问题描述】：

我试图将一些数组数据传递给谷歌图表，但它说没有足够的列来绘制图表。这是我的代码。

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
var someStr = '["JAN","1088626"],["FEB","1478093"],["MAR","1232870"],["APR","1151634"],["MAY","1083623"],["JUN","740591"],["JUL","769227"],["AUG","1162995"],["SEP","951794"],["OCT","884736"],["NOV","500902"],["DEC","1221438"]';

var data1=someStr.replace(/(["'])(\d+)\1/g,"$2")
console.log(data1);
var data = google.visualization.arrayToDataTable([['year'],[data1]]);
console.log(data);
    var options = {
      title: 'My Daily Activities',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>

请帮我做这件事。

提前致谢。

【问题讨论】：

标签： google-visualization

【解决方案1】：

您收到此错误，因为无效的输入数据被传递到 google.visualization.arrayToDataTable 函数。提供的正则表达式 /(["'])(\d+)\1/g 在解析输入字符串时失败，我建议使用 JSON.parse 函数解析输入字符串。

google.visualization.PieChart 对象期望数据在以下格式：

var data = google.visualization.arrayToDataTable([
      ['Name', 'Value'],
      ['<name1>',  <value1>],
      ['<name2>',  <value2>],
      ['<name3>',  <value3>],
      ...
      ['<namen>',  <valuen>]
    ]);

下面是修改的例子：

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var stringData = '["JAN","1088626"],["FEB","1478093"],["MAR","1232870"],["APR","1151634"],["MAY","1083623"],["JUN","740591"],["JUL","769227"],["AUG","1162995"],["SEP","951794"],["OCT","884736"],["NOV","500902"],["DEC","1221438"]';
    var data = JSON.parse("[" + stringData + "]");
    data = data.map(function (item) {
        item[1] = parseInt(item[1]);
        return item;
    });
    data.splice(0, 0, ['year', 'hours']);
   
    var dataTable = google.visualization.arrayToDataTable(data);
    var options = {
        title: 'My Daily Activities',
        is3D: true,
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(dataTable, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>

【讨论】：

【解决方案2】：

您的数据有两列：月份和数字。 ("JAN","1088626")
但是您只为一列提供标题：year
另外，您需要将实际的array 传递给arrayToDataTable。（不是字符串）
试试这样的...

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var someStr = '["JAN","1088626"],["FEB","1478093"],["MAR","1232870"],["APR","1151634"],["MAY","1083623"],["JUN","740591"],["JUL","769227"],["AUG","1162995"],["SEP","951794"],["OCT","884736"],["NOV","500902"],["DEC","1221438"]';

    var data1 = JSON.parse('[' + someStr.replace(/(["'])(\d+)\1/g,"$2") + ']');
    
    // data array - add two column headings to data1
    data1.splice(0, 0, ['month', 'number']);
    
    // data table
    var data = google.visualization.arrayToDataTable(data1);
    
    // chart options
    var options = {
      title: 'My Daily Activities',
      is3D: true
    };

    // chart
    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }

<script src="https://www.google.com/jsapi"></script>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>

【讨论】：