Question

我目前正在尝试使用谷歌图表作为我在我们网站上显示实时数据的方法。我希望能够将CSV数据文件加载到图表中并让它显示3条单独的行。

我的代码在我的CSV中只有两列数据时有效，如下所示：

year,daily
2008,26.541
2009,24.748
2010,24.803
2011,25.483
2012,24.729
2013,24.413
2014,24.879

我的问题发生在我尝试加载两个以上的图表时，这里大致是我想要的格式（Thornton.M2.csv）：

ID,Value,HighValue,LowValue
1,376,386,366
2,386,396,376
3,396,406,386
4,406,416,396
5,416,426,406

当我尝试使用此格式运行时，我得到了谷歌图表错误

 "Not enough columns given to draw the requested chart."

这是我的html代码，其中脚本将数组字符串转换为二维数组，以便在数据表中使用。

        <!DOCTYPE html>
        <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
         <meta name="HandheldFriendly" content="True">
         <meta name="MobileOptimized" content="320">

         <title>Google Graph and CSV</title>
         <meta name="description" content="test">

         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
         <script src="jquery.csv.min.js"></script>
         <script type="text/javascript" src="http://www.google.com/jsapi"></script>

        <script type="text/javascript"> // load the visualisation API
          google.load('visualization', '1', { packages: ['corechart', 'controls'] });
        </script>

        <script type="text/javascript">
        function drawVisualization() {
           $.get("Thornton.M2.csv", function(csvString) {
              // transform the CSV string into a 2-dimensional array
              var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

              // this new DataTable object holds all the data
              var data = new google.visualization.arrayToDataTable(arrayData);
              // CAPACITY - En-route ATFM delay - YY - CHART
              var crt_ertdlyYY = new google.visualization.ChartWrapper({
                 chartType: 'LineChart',
                 containerId: 'crt_ertdlyYY',
                 dataTable: data,
                 options:{
                    width: 450, height: 160,
                    title: 'EU-wide en-route ATFM delays (year to date)',
                    titleTextStyle : {color: 'grey', fontSize: 11},
                 }
              });
              crt_ertdlyYY.draw();
           });
        }
        google.setOnLoadCallback(drawVisualization)
        </script>

        </head>

          <body>

            <div id="crt_ertdlyYY"></div>

          </body>

        </html>

我无法理解为什么列号现在给我一个错误，如果有人能帮我指出正确的方向我会很感激！

Answer 1

我意识到我仍在尝试将CSV字符串解析为只有两个参数

var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

我在这里使用相同的语法解析了第二行条目

var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});

对你们中的某些人来说可能没什么新鲜的，也许它会帮助别人。

包含CSV数据的Google图表：列错误

1 个答案: