个人中心
gpt4 book ai didi

javascript - Google Charts 帮助 - 尝试将 JSON 加载到 Google Charts 但图表未显示

转载 作者：行者123 更新时间：2023-11-28 04:13:19 25 4
gpt4 key购买 nike

我试图将虚拟数据加载到我的谷歌图表中，但不知怎的，我没有收到错误，但图表没有显示。我还是一个使用这个的初学者，我看不出这个问题。我使用 jquery 加载 JSON 数据，然后运行所有数据并将其作为行插入到图表中。

<!DOCTYPE html>
<html>
  <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://www.google.com/jsapi"></script>

    <script>

      // onload callback - Script funktion til hvad Chart skal indeholde, og opsætning af data.
      function drawChart() {

        // JSONP request - Laver et API kald, hvor data'ene hentes ind.
        var jsonData = $.ajax({
          url: 'http://nflarrest.com/api/v1/crime',
          data: {page: 1},
          dataType: 'jsonp',
        }).done(function (results) {

          // Opretter DataTable, som skal indeholde data'ene fra API'en i rows, samt kolonner.
          var data = new google.visualization.DataTable();

          // Tilføjer kolonner til DataTable, først hvilket format det er (string, number, datetime osv.), dernæst navnet på kolonnen.
          data.addColumn('string', 'Category');
          data.addColumn('number', 'arrest_count');

          // Tilføjer rows til DataTable, med data'ene fra API'en.
          // Man skal huske de navne man tilføjer til row, skal være det samme som navnene fra API'en.
          for(i=0; i<results.length; i++) {
            data.addRow([
                parseFloat(results[i].Category),
                parseInt(results[i].arrest_count)
            ]);
          };


          // Instantiere Chart, hvilken type Chart det er, samt ID den tilgives.
          var chart = new google.visualization.ColumnChart($('#chart').get(0));

          // Opretter at Chart skal tegnes, med hvilke parametre den skal indholde, som de data der skal tegnes, samt info i Chart som fx en titel.
          chart.draw(data, {
            title: 'Wimp Weather Station'
          });

        });

      }

      // load chart lib
      google.load('visualization', '1', {
        packages: ['corechart']
      });

      // call drawChart once google charts is loaded
      google.setOnLoadCallback(drawChart);

    </script>

  </head>
  <body>
    <!-- Opretter Chart i div, med det ID den blev tildelt i Script -->
    <div id="chart" style="width: 100%;"></div>
  </body>
</html>

最佳答案

您将第一列的类型设置为'string' 

data.addColumn('string', 'Category');

但是添加的行使用类型'number' 

parseFloat(results[i].Category),

类型需要匹配，尝试这样...

      for(i=0; i<results.length; i++) {
        data.addRow([
            results[i].Category,
            parseInt(results[i].arrest_count)
        ]);
      };
<小时/>

更新

以下代码片段对我有用...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  $.ajax({
    url: 'http://nflarrest.com/api/v1/crime/',
    dataType: 'json'
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Category');
    data.addColumn('number', 'arrest_count');

    for (var i = 0; i < jsonData.length; i++) {
      data.addRow([
        jsonData[i].Category,
        parseFloat(jsonData[i].arrest_count)
      ]);
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, {
      height: 600,
      title: 'NFL Arrests'
    });
  }).fail(function (jqXHR, status) {
    console.log(status);
  });
}

关于javascript - Google Charts 帮助 - 尝试将 JSON 加载到 Google Charts 但图表未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46075732/

25 4 0
文章推荐： javascript - 解析服务器 - Parse.User.become(sessionToken) - 无效 session
文章推荐： Javascript - 从 FileReader 异步 onload 方法获取值
文章推荐： javascript - 将 base64 字符串转换为 blob 后文件名无效
文章推荐： javascript - npm 更新 Firebase 后无法登录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com