对象没有 getColumnType 方法错误

Question

我已经阅读了这篇帖子的解决方案，但似乎无法完全适用于我的问题。我正在使用Google Charts来构建一条折线图，X轴是日期，Y轴是整数。

当我运行代码时，会出现一个大的错误消息：

Object {"然后列出所有JSON格式化数据"} has no method 'getColumnType'.

我通过AJAX调用从Web服务获取我的JSON图表数据。我的代码如下：

<script type="text/javascript">

            google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawChart);


            function drawChart() {
                var jsonData = $.ajax({
                    url: "WebService.asmx/HelloWorld",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false
                }).responseText;

                var options = {
                    title: 'Company Performance'
                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));
                chart.draw(jsonData, options);
            }


    </script>

- JDV590

---

drawChart在声明之前被使用了。这可能不是解决方案，但是... - nozzleman

@nozzleman JavaScript 将所有函数声明视为在其作用域顶部发生的情况。 - Pointy

Answer 1

解决方案很简单....无法直接从JSON数据中填充Google图表。首先需要将JSON格式化为DataTable。解决方案如下所示:

  // Load the Visualization API and the piechart package.
          google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });

          // Set a callback to run when the Google Visualization API is loaded.
          google.setOnLoadCallback(drawChart);

          function drawChart() {
              var jsonData = $.ajax({
                  url: "JSON.txt",
                  dataType: "json",
                  async: false
              }).responseText;

              // HERE IS THE FIX!!! Create our data table out of JSON data loaded from server.
              var data = new google.visualization.DataTable(jsonData);

              // Instantiate and draw our chart, passing in some options.
              var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
              chart.draw(data, { width: 400, height: 240 });
          }

- JDV590

Answer 2

我认为你需要显式解析JSON；在这种情况下，$.ajax()不会为你完成。

尝试添加：

 jsonData = JSON.parse(jsonData);

在构建图表之前。

话虽如此，我不知道正在寻找getColumnType()函数的是什么；无论是字符串形式还是解析形式，它都不会出现在您的JSON响应中。

- Pointy