如何选择在 Google 可视化图表中使用哪些列并避免“给定轴上的所有系列必须具有相同的数据类型”错误

问题描述 投票：0回答：1

我正在尝试使用电子表格上的各个列来绘制运行持续时间的图表，并使用 Google 图表尝试不同的样式。 当我尝试查询超过 2 列时遇到问题。 我想在图表上的点上方使用一列（例如 B）作为归因文本或标签。 但是，当我使用“SELECT A、B、D”时，出现“给定轴上的所有系列必须具有相同数据类型”的错误。 如何查询/加载多个列，但仅使用我选择作为图表中的系列的列？ 看起来它会自动将所有内容用于一个系列，所以我认为它试图在 x 轴上绘制一个字符串和一个日期。 成功的图表（仅查询 A 列和 D 列）、电子表格和代码如下。 感谢您的帮助。

我确实尝试实施这篇文章的建议，但没有成功。 我不确定如何用 3 列与 2 列来实现它。对此的任何帮助将不胜感激。

enter image description here

enter image description here

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
   
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);



     function drawChart() {
      var queryString = encodeURIComponent('SELECT A, D');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1xRV24c1itTkK1OWLo3KdpVhkjXpuMzi8lXi4UFHanso/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
 

     


      var data = response.getDataTable();

     
         var options = {
          title: 'L\'s 2024 Cross Country Run Times ',
          
      
          width: 900,
          height: 500,
          trendlines: {
      0: {
        color: 'blue',
        
      }
    },
          vAxis: {
            format: 'mm:ss'
            
          }
          
        };





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

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>
javascript google-visualization
1个回答
0
投票

发生这种情况是因为您尝试在图表中将包含非数字值的列（B 列，具有文本/标签）与数字数据（A 列和 D 列）一起使用。

您可以将列分成两部分：一组用于绘图（仅数字数据），另一组用于标签（文本），以避免类型不匹配错误。

我已经修改了代码

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var queryString = encodeURIComponent('SELECT A, D'); // Select only the numeric columns

        var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1xRV24c1itTkK1OWLo3KdpVhkjXpuMzi8lXi4UFHanso/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString
        );
        query.send(handleSampleDataQueryResponse);
      }

      function handleSampleDataQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

        var data = response.getDataTable();

        // Create a DataView to add labels from column B (non-numeric data) without using it as an axis
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
          calc: function (dt, row) {
            return dt.getValue(row, 1); // Use D column's values for labels
          },
          type: 'string',
          role: 'annotation'
        }]);

        var options = {
          title: 'L\'s 2024 Cross Country Run Times',
          width: 900,
          height: 500,
          trendlines: {
            0: { color: 'blue' }
          },
          vAxis: {
            format: 'mm:ss'
          }
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(view, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.