当前位置： 文江博客话题详情

如何将 python api 或本地数据调用到 js lib google.visualization.DataTable() 中？

发布于 2025-01-09 22:45:27 字数 4144 浏览 6 评论 0原文

我已经工作了 2 周来尝试获取 CSV 文件（本地）来加载 google.visualization.DataTable()。或者我希望使用 Ajax 来调用我创建的 Python Flask 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 Flask 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

输出应如下所示： 输入图片此处描述

原文

I have been working for 2 weeks to try and get a CSV file (local) To load google.visualization.DataTable(). Or I would love to Us Ajax to call a Python flask API I created. I would like to create a Gantt chart dynamically.

My code:

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

No mater how many YouTube videos I watch, I can't understand how to do an Ajax call from my Python Flask API AND load the needed data to google.visualization.DataTable() for dynamic creation of a Gantt chart:) please help

really my issue is a lack of Mastery of JS. How do I import data from API or a Local CSV? How do I Parse the data, then Organize the data to be used in google.visualization.DataTable(). I wish I could find a simple example. please help...

My Python Flask Api Code:

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

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

the output should look like this:
enter image description here

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

你的呼吸 2025-01-16 22:45:27

感谢@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/[email protected]/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 文件的大小如何

I figured it out thanks to @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/[email protected]/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>

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

Next step:
Change Input To dynamic. I will create inputs form on website to change the data

I will allow CSV to be upload and parsed no mater the size of the CSV file

回复 原文
~没有更多了~

关于作者

蝶…霜飞

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文