时间戳

首页 > 解决方案 > 错误：轴 #0 的数据列不能是字符串类型

javascript - 错误：轴 #0 的数据列不能是字符串类型

问题描述

我正在尝试使用谷歌图表和 React/JS 创建散点图。我制作了一个测试数组来检查它是否是将数据发送到图表的正确方法并且它有效。但是当我处理真实数据并创建一个类似的数组时，它给我一个错误：“轴#0 的数据列不能是字符串类型”。

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

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

这是真实的，这给了我错误：

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

如果您在 chrome 控制台上比较两者，它们具有相同的结构，所以我无法弄清楚为什么不起作用：[两个数组都打印在 chrome 控制台上][2]

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

标签： javascriptreactjschartsgoogle-visualization

解决方案

该错误表明 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,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  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', 'Enfado', 'Irritabilidad','Dolor', 'Ansiedad', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p'],
  ['28',  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  180,  190,  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', {
  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,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  null,  180,  190,  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%'
    },
    height: '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>

推荐阅读