Question

我在可视化方面遇到了一些麻烦

我试图从我的数据库中为ph制作柱形图所有数据都是json样式，您可以在url下访问

http://magnetic-tenure-93211.appspot.com//get_data/ph

我的主要参考是谷歌图表文件

https://developers.google.com/chart/interactive/docs/php_example

我只能写红色框“表没有列”，而不是图表。你能帮我解决这个问题吗？

我的客户代码正在关注......

<html>
  <head>
    <!--Load the AJAX API-->
  <meta charset="utf-8">
  <link rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
    console.log("1")    
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    console.log("3")  
    function drawChart() {
      console.log("2")
      var jsonData = $.ajax({
          url: "http://magnetic-tenure-93211.appspot.com//get_data/ph",
          dataType:"json",
          async: false
          }).responseText;
      console.log(jsonData)    
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
  </body>
</html>

我使用python Flask制作服务器，json返回代码跟随...

@app.route('/get_data/ph', methods=['GET'])
@crossdomain(origin="*", methods=['GET'])
def getPhData():

    sensorData = SensorData.query.order_by(desc(SensorData.create_date)).all()

    phData = [{
        "cols":[ {"id":"", "label":"Topping", "type":"string"}, {"id":"", "label":"Slices", "type":"number"}],
        "rows":[ {"c": [{"v":str(sd.create_date), "f":"null"}, {"v":sd.ph,"f":"null"}]} for sd in sensorData]
    }]
    return json.dumps(phData)

表没有使用带有json的谷歌图表的列

0 个答案: