从python应用程序动态填充Flask数据

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>amCharts examples</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="../amcharts/amcharts.js" type="text/javascript"></script> <script src="../amcharts/serial.js" type="text/javascript"></script> <script type="text/javascript"> var chart; var chartData = [ { "year": 2003, "europe": 2.5, "namerica": 2.5, "asia": 2.1, "lamerica": 0.3, "meast": 0.2, "africa": 0.1 }, { "year": 2004, "europe": 2.6, "namerica": 2.7, "asia": 2.2, "lamerica": 0.3, "meast": 0.3, "africa": 0.1 }, { "year": 2005, "europe": 2.8, "namerica": 2.9, "asia": 2.4, "lamerica": 0.3, "meast": 0.3, "africa": 0.1 } ]; AmCharts.ready(function () { // SERIALL CHART chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = "year"; chart.plotAreaBorderAlpha = 0.2; chart.rotate = true; // AXES // Category var categoryAxis = chart.categoryAxis; categoryAxis.gridAlpha = 0.1; categoryAxis.axisAlpha = 0; categoryAxis.gridPosition = "start"; // value var valueAxis = new AmCharts.ValueAxis(); valueAxis.stackType = "regular"; valueAxis.gridAlpha = 0.1; valueAxis.axisAlpha = 0; chart.addValueAxis(valueAxis); // GRAPHS // firstgraph var graph = new AmCharts.AmGraph(); graph.title = "Europe"; graph.labelText = "[[value]]"; graph.valueField = "europe"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; graph.lineColor = "#C72C95"; graph.balloonText = "<b><span style='color:#C72C95'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>"; graph.labelPosition = "middle"; chart.addGraph(graph); // second graph graph = new AmCharts.AmGraph(); graph.title = "North America"; graph.labelText = "[[value]]"; graph.valueField = "namerica"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; graph.lineColor = "#D8E0BD"; graph.balloonText = "<b><span style='color:#afbb86'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>"; graph.labelPosition = "middle"; chart.addGraph(graph); // third graph graph = new AmCharts.AmGraph(); graph.title = "Asia-Pacific"; graph.labelText = "[[value]]"; graph.valueField = "asia"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; graph.lineColor = "#B3DBD4"; graph.balloonText = "<b><span style='color:#74bdb0'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>"; graph.labelPosition = "middle"; chart.addGraph(graph); // fourth graph graph = new AmCharts.AmGraph(); graph.title = "Latin America"; graph.labelText = "[[value]]"; graph.valueField = "lamerica"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; graph.lineColor = "#69A55C"; graph.balloonText = "<b><span style='color:#69A55C'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>"; graph.labelPosition = "middle"; chart.addGraph(graph); // fifth graph graph = new AmCharts.AmGraph(); graph.title = "Middle-East"; graph.labelText = "[[value]]"; graph.valueField = "meast"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; graph.lineColor = "#B5B8D3"; graph.balloonText = "<b><span style='color:#7a81be'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>"; graph.labelPosition = "middle"; chart.addGraph(graph); // sixth graph graph = new AmCharts.AmGraph(); graph.title = "Africa"; graph.labelText = "[[value]]"; graph.valueField = "africa"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; graph.lineColor = "#F4E23B"; graph.balloonText = "<b><span style='color:#c3b218'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>"; graph.labelPosition = "middle"; chart.addGraph(graph); // LEGEND var legend = new AmCharts.AmLegend(); legend.position = "right"; legend.borderAlpha = 0.3; legend.horizontalGap = 10; legend.switchType = "v"; chart.addLegend(legend); chart.creditsPosition = "top-right"; // WRITE chart.write("chartdiv"); }); // Make chart 2D/3D function setDepth() { if (document.getElementById("rb1").checked) { chart.depth3D = 0; chart.angle = 0; } else { chart.depth3D = 20; chart.angle = 30; } chart.validateNow(); } </script> </head> <body> <div id="chartdiv" style="width: 100%; height: 400px;"></div> <div style="margin-left:40px;"> <input type="radio" checked="true" name="group" id="rb1" onclick="setDepth()">2D <input type="radio" name="group" id="rb2" onclick="setDepth()">3D </div> </body>

1条回答

网友

1楼 · 发布于 2024-05-29 05:06:29

如果要在模板的HTML中嵌入JavaScript，最好的方法是计算Flask中需要的所有值，然后将它们传递给模板。在

我不知道你的应用程序逻辑或者你的数据库，所以我只是从你上面的代码中复制一些值。无论如何，文件应该如下所示：

@app.route("/data")
def data():

    # sample data
    chart_data = [
        {
            "year": 2003,
            "europe": 2.5,
            "namerica": 2.5,
            "asia": 2.1,
            "lamerica": 0.3,
            "meast": 0.2,
            "africa": 0.1
        },
        {
            "year": 2003,
            "europe": 2.5,
            "namerica": 2.5,
            "asia": 2.1,
            "lamerica": 0.3,
            "meast": 0.2,
            "africa": 0.1
        }]

    # pass the data do the template
    return render_template('chart.html', chart_data=chart_data)

模板在JavaScript块中使用以下列表进行迭代：

^{pr2}$

相关问题更多 >

编程相关推荐

热门问题

热门文章