怎么调用一个pythonapi或者本地数据到js库google.visualization.DataTable()？

Question

我已经工作了 2 周来尝试获取 CSV 文件（本地）以加载 google.visualization.DataTable()。或者我希望我们 Ajax 调用我创建的 Python 烧瓶 API。我想动态创建甘特图。

我的代码：

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);
    
    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }
    



  function drawChart() {
      var jsonData = $.ajax({
          url: "http://127.0.0.1:5042/crudSEapi/D3test",
          dataType: "json",
          async: false
          }).responseText;
          var jsonData = JSON.parse(jsonData);
          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(jsonData);
      // Create our data table out of JSON data loaded from server.
    
      console.log(jsonData["Column 0"])
      data.addColumn('string',jsonData["Column 0"]);
      data.addColumn(jsonData["Column 1"][1], jsonData["Column 1"][0]);
     
      
      data.addRows([
        [jsonData["Column 1"][2]]
       
      ]);


        // Instantiate and draw our chart, passing in some options.

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };
        var container = document.getElementById('chart_div');
        var chart = new google.visualization.Gantt(container);
    
    // throw error for testing

    google.visualization.events.addListener(chart, 'ready', function () {
      throw new Error('Test Google Error');
    });

      // listen for error
      google.visualization.events.addListener(chart, 'error', function (err) {
        // check error

      });
        chart.draw(data, options);
    }



  </script>
         
     
          <main id="main">
              <section id="data-section">
                  <h2>Data Input</h2>
                  <div id="data"></div>
              </section>
          </main>
          <h2>chart output</h2>
    
          <div id="chart_div"></div>
      
      <script>
          function apicall(url) {
              $.ajax({
                  type:"POST", url:url, 
                  success: (data) => { $("#data").html(data); }
              });
          }
          window.onload = function () {
              apicall("http://127.0.0.1:5042/crudSEapi/D3test");
          }
      </script>

无论我观看了多少 YouTube 视频，我都无法理解如何从我的 Python Flask API 进行 Ajax 调用并将所需数据加载到 google.visualization.DataTable() 用于动态创建甘特图:) 请帮助

我的问题确实是缺乏对 JS 的掌握。如何从 API 或本地 CSV 导入数据？我如何解析数据，然后组织要在 google.visualization.DataTable() 中使用的数据。我希望我能找到一个简单的例子。请帮助...

我的Python烧瓶Api代码：

import json
@crudSEapi.route("/D3test", methods=["GET", "POST"])
def d3():
    df = pd.read_csv("SkillBook/static/Sheet4.csv")
    chartdata = df.to_json()
    data = json.dumps(chartdata, indent=2)
    print(data)
    return Response(data)

CSV 文件：

id,title,start,end,dependencies,completed
m1,milestone 1,addDuration(startOfDay(new Date()),addDuration(startOfDay(new Date()),m2: start-to-start,0.6
m2,milestone 2,addDuration(startOfDay(new Date()),addDuration(startOfDay(new Date()),[m3: end-to-start,m4: end-to-end],0
m3,milestone 3,addDuration(startOfDay(new Date()),addDuration(startOfDay(new Date()),,0.75
m4,milestone 4,addDuration(startOfDay(new Date()),addDuration(startOfDay(new Date()),,0.2

输出应如下所示：

Answer 1

感谢@WhiteHat，我弄明白了。

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-csv@1.0.21/src/jquery.csv.js"></script>
<div id="chart_div"></div>
<li><input></li>
<li><input></li>
<li><input></li>
<button>update data in chart</button>
<button>print SVG</button>
<script>
   function toMilliseconds(minutes) {
     return minutes * 60 * 1000;
   }
   
   google.charts.load('current', {
     callback: function () {
       $.get("/static/Sheet4.csv", function(csvString) {
         var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
         console.log(arrayData[6][1])
         var data = new google.visualization.DataTable();
     
         data.addColumn(arrayData[2][1], arrayData[1][1]);
         data.addColumn(arrayData[2][2], arrayData[1][2]);
         data.addColumn(arrayData[2][4], arrayData[1][4]);
         data.addColumn(arrayData[2][5], arrayData[1][5]);
         data.addColumn(arrayData[2][6], arrayData[1][6]);
         data.addColumn(arrayData[2][7], arrayData[1][7]);
         data.addColumn(arrayData[2][8], arrayData[1][8]);
         data.addRows([
         [
         arrayData[3][1],
         arrayData[3][2],
           null,
           null,
           toMilliseconds(5),
           100,
           null,
         ],
         [
         arrayData[4][1],
         arrayData[4][2],
           null,
           null,
           toMilliseconds(70),
           100,
           null,
         ],
         [
         arrayData[5][1],
         arrayData[5][2],
           null,
           null,
           toMilliseconds(10),
           100,
           arrayData[3][1],
         ],
         [
         arrayData[6][1],
         arrayData[6][2],
           null,
           null,
           toMilliseconds(45),
           75,
           arrayData[5][1],
         ],
         [
         arrayData[7][1],
         arrayData[7][2],
           null,
           null,
           toMilliseconds(10),
           0,
           arrayData[6][1],
           ],
         [
         arrayData[8][1],
         arrayData[8][2],         
          null,
           null,
           toMilliseconds(2),
           0,
           arrayData[5][1],
         ],
       ]);
         
   
         var options = {
           height: 275,
           gantt: {
             criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
             arrow: {
               angle: 100,
               width: 5,
               color: 'green',
               radius: 0
             }
           }
         };
         var container = document.getElementById('chart_div');
         var chart = new google.visualization.Gantt(container);
     
   
         chart.draw(data, options);
       });
     },
     packages: ['gantt']
   });
   
   
   
   
   
</script>

还有我的 CSV：

step0,step1,step2,step3,step4,step5,Step6,step7,step8
Purpose,Task ID,Task Name,Resource ID,Start,End,Duration,Percent Complete,Dependencies
Data Type,string,string,string,date,date,number,number,string
Prject1data1,Test1,test1x,test1y,test1z,0,1,2,test1a
Prject1data2,Test2,test2x,test2y,test2z,0,1,2,test2a
Prject1data3,Test3,test3x,test3y,test3z,0,1,2,test3a
Prject1data4,Test4,test4x,test4y,test4z,0,1,2,test4a
Prject1data5,Test5,test5x,test5y,test5z,0,1,2,test4a
Prject1data6,Test6,test6x,test6y,test6z,0,1,2,test4a
Prject1data7,Test7,test7x,test7y,test7z,0,1,2,test4a

下一步：将输入更改为动态。我将在网站上创建输入表单以更改数据

无论 CSV 文件的大小如何，我都将允许上传和解析 CSV

怎么调用一个pythonapi或者本地数据到js库google.visualization.DataTable()？

How do you call a python api or local data into the js lib google.visualization.DataTable()?

javascript

ajax

csv

flask

google-visualization