Question

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

<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>

请帮我这样做。

提前感谢。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

由于无效的输入数据传递到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>]
    ]);

下面提供了修改过的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

没有足够的列来绘制-google图表

2 个答案: