错误：轴＃0的数据列不能为字符串类型

如何解决错误：轴＃0的数据列不能为字符串类型

我正在尝试使用Google图表和React / JS创建散点图。我做了一个测试数组，以检查它是否是将数据发送到图表的正确方法，并且工作正常。但是，当我处理实际数据并创建类似的数组时，会收到以下错误消息：“轴＃0的数据列不能为字符串类型”。

这是可以正常工作的测试数组：

       let dataTest = [
        ['Día','Enfado','Irritabilidad','Dolor','Ansiedad'],['1',null,10,20,30],['2',30,null],]   
 

这是真实的，给我错误：

[给我错误的实数数组] [1]

如果您在chrome控制台上进行比较，则它们的结构相同，因此我无法弄清楚为什么它不起作用： [两个阵列都在chrome控制台上打印] [2]

非常感谢您！ [1]：https://i.stack.imgur.com/3efGN.png [2]：https://i.stack.imgur.com/hHzar.png

解决方法

该错误表明y轴的列不能为字符串类型。

该错误是由于使用静态方法-> arrayToDataTable

arrayToDataTable尝试猜测要传递给该方法的数据类型。
如果无法确定类型，则默认为字符串。

在“真实”数组的示例中，只有一行数据。
它唯一需要使用的值是null。
因此无法正确确定类型，默认为字符串。

您可以在以下工作摘要中看到此结果...

google.charts.load('current',{
  packages:['corechart']
}).then(function () {
  var jsonData = [
    ['Día','Enfado','Irritabilidad','Dolor','Ansiedad','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'],['28',null,180,190,null]
  ];

  var data = google.visualization.arrayToDataTable(jsonData);

  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    console.log(i,data.getColumnType(i));
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>

---

相反，您将需要手动构建数据表，
设置每列的特定列类型。

var data = new google.visualization.DataTable();
data.addColumn('string','Día');            // <-- x-axis - string
data.addColumn('number','Enfado');         // <-- y-axis - number
data.addColumn('number','Irritabilidad');  // <-- y-axis - number
...

但是我们可以动态地建立数据表，
基于收到的json数据。

var jsonData = [
  ['Día',null]
];

var data = new google.visualization.DataTable();

jsonData.forEach(function (row,indexRow) {
  if (indexRow === 0) {
    row.forEach(function (column,indexCol) {
      if (indexCol === 0) {
        data.addColumn('string',column);
      } else {
        data.addColumn('number',column);
      }
    });
  } else {
    data.addRow(row);
  }
});

请参阅以下工作摘要...

google.charts.load('current',null]
  ];

  var data = new google.visualization.DataTable();

  jsonData.forEach(function (row,indexRow) {
    if (indexRow === 0) {
      row.forEach(function (column,indexCol) {
        if (indexCol === 0) {
          data.addColumn('string',column);
        } else {
          data.addColumn('number',column);
        }
      });
    } else {
      data.addRow(row);
    }
  });

  var options = {
    chartArea: {
      left: 64,top: 48,right: 32,bottom: 64,height: '100%',width: '100%'
    },legend: {
      position: 'none'
    },width: '100%'
  };

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

html,body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
  min-height: 400px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>