javascript - 需要根据 .txt 文件中的数据创建 Google 图表

标签 javascript jquery ajax google-visualization

html 和 txt 文件都在同一文件夹中。

尝试将完整位置放入网址,例如:/home/lp505/Desktop/chart/output.txt ,但没有成功。

尝试使用 type 作为 'get' ,它也不起作用。

我认为错误出在方法drawchart中 请帮助我调试代码以创建图表

html代码是

    <html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

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

function drawChart () {
    $.ajax({
        url: 'output.txt',
        type: 'text',
        success: function (txt) {
            var dataArray = [['Name', 'Date']];
            var txtArray = txt.split('\n');
            for (var i = 0; i < txtArray.length; i++) {
                var tmpData = txtArray[i].split(/\s+/);
                dataArray.push(tmpData[0], parseInt(tempData[1]));
            }
             var data = google.visualization.arrayToDataTable(dataArray);
            var chart = new google.visualization.LineChart(document.querySelector('chart_div'));
      var options = {'title':'What is this','width':400,'height':300};
            chart.draw(data,options);
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

txt文件

Screen_Home 13 
Screen_Home 26 
Screen_Explore 26 
Screen_Explore 27 
Screen_Home 27 
Screen_Home 28 

最佳答案

我发现了一些问题...

1) 请务必包含 JQuery,没有在您的 HTML 中看到它
2) 设置AJAX调用类型为get
3) tmpData 此处拼写错误 --> parseInt(tempData[1])
4) 每行数据应该是一个数组

From: dataArray.push(tmpData[0], parseInt(tempData[1]));
To: dataArray.push([tmpData[0], parseInt(tmpData[1])]);

5) 在 id 上使用 querySelector 时,请务必添加前缀 #

这应该绘制你的图表...

<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);

  function drawChart () {
      $.ajax({
          url: 'output.txt',
          type: 'get',
          success: function (txt) {
              var dataArray = [['Name', 'Date']];
              var txtArray = txt.split('\n');
              for (var i = 0; i < txtArray.length; i++) {
                  var tmpData = txtArray[i].split(/\s+/);
                  dataArray.push([tmpData[0], parseInt(tmpData[1])]);
              }
              var data = google.visualization.arrayToDataTable(dataArray);
              var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
              var options = {'title':'What is this','width':400,'height':300};
              chart.draw(data,options);
          }
      });
  }

  google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>

<div id="chart_div"></div>

关于javascript - 需要根据 .txt 文件中的数据创建 Google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34774254/

相关文章:

Javascript/Jquery 尝试在另一个函数中应用 .html

javascript - 为什么我的 ajax multipart/form-data POST 请求的正文为空?

javascript - 有一个大整数数组需要返回一个数组,该数组将数组表示的值加 1

javascript - jQuery CSS 'or' 选择器

javascript - 如何在 jquery nextUntil 中选择每隔一个元素?

javascript - 具有绝对路径的angular js templateUrl

jquery - 如何强制 jQuery 追加不自动关闭标签?

javascript - 将 javascript 变量传递给 Twig

javascript - 从 Javascript 更新数据库属性

php - 我可以使用 POST 向其他网站的页面发送请求吗?