Question

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

Answer 1

我发现了一些问题......

1）请务必加入JQuery，不要将其视为HTML
2）将AJAX呼叫类型设置为get
3）tmpData拼写错误 - ＆gt; parseInt(tempData[1])
4）每行数据应为数组值

来自：dataArray.push(tmpData[0], parseInt(tempData[1]));
收件人：dataArray.push([tmpData[0], parseInt(tmpData[1])]);

5）在querySelector上使用id时，请务必使用#前缀

这应该画出你的图表......

<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>

需要从.txt文件中的数据创建Google图表

1 个答案: