错误:轴#0的数据列不能为字符串类型 [英] Error: Data column(s) for axis #0 cannot be of type string

问题描述

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

I'm trying to create a scatter chart with google charts and React/JS. I have made a test array to check if it was the correct way to send the data to the chart and it worked. But when I processed the real data and create a similar array, it gets me the error: "Data column(s) for axis #0 cannot be of type string".

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

This is the test array that works fine:

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

这是真实的，给我错误:

and this is the real one, which gives me the error:

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

[Real array that gives me the error][1]

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

If you compare both at the chrome console, they have the same structure, so I can't figure it out why isn't working: [Both arrays printed on chrome console][2]

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

Thank you very much in advance! [1]: https://i.stack.imgur.com/3efGN.png [2]: https://i.stack.imgur.com/hHzar.png

推荐答案

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

the error indicates that columns for the y-axis cannot be of type string.

该错误是由使用静态方法引起的-> arrayToDataTable

the error is caused by the use of static method --> arrayToDataTable

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

arrayToDataTable tries to guess at what type of data is being passed to the method.
if it cannot determine the type, it defaults to string.

数组，只有一行数据.
它唯一需要使用的值是 null .
因此它无法正确确定类型，并且默认为字符串.

in the example of the "real" array, there is only one row of data.
and the only value it has to work with is null.
so it cannot properly determine the type and defaults to string.

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

you can see this result in the following working snippet...

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>

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

instead, you will need to build the data table manually,
setting the specific column type for each column.

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数据.

but we can build the data table dynamically,
based on the json data received.

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

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

see following working snippet...

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>

这篇关于错误:轴#0的数据列不能为字符串类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！