Question

我是Highcharts的新手并且知道一点点JavaScript。不要问为什么，但我有一个任务是创建一些使用基于Python的Highcharts的Web UI，它通过Athena获取数据。我设法创建静态图，但我需要根据下拉列表中的值更改此图。我在今天发现的所有示例都解释了如何通过JavaScript代码实现它，并且此代码已经在此代码中创建了可能的数据。

在我的例子中，我通过Python代码获取数据。我不知道如何将它连接到我找到的示例。也许我想念任何小点，或者我尝试创造一些完全不正确的东西？

我尝试将此示例用于交互式代码 How to set the highcharts interactive with select option

但我无法将我的python代码与数据连接到此示例：（

对于静态图，我使用了这个例子https://pythonprogramming.net/adding-js-plugins-flask-highcharts-example/，我目前有3个文件：

app.py
index.html
graph.js

app.py

from flask import Flask, render_template

app = Flask(__name__)

#here the code that connect to Athene
my_df = as_pandas(cursor)

@app.route('/')
@app.route('/index')
def graph(chartID = 'chart_ID', chart_type = 'line', chart_height = 500):

这里是从my_df

#example of data_array: [[2, 10], [3, 20], [4, 30]]
chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
series = [{"name": 'Blabla1', "data": data_array1, "color":"#ff00ff", "yAxis":0},{"name": 'Blabla2', "data": data_array2, "yAxis":0}]
title = {"text": 'My Graph'}
xAxis = {"categories": [],"title": {"text": 'Weeks'}}
yAxis = {"title": {"text": 'Something'}}
return render_template('index.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis)

if __name__ == "__main__":
      app.run(debug = True, host='127.0.0.1', port=5000, passthrough_errors=True)

的index.html

<div>
    Please Select!

    <select name='location' onchange="updateChart(this.value)">
            <option value="north" selected value="north">north</option>
            <option value="east">east</option>
    </select>

    <div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div>
    <script>
        var chart_id = {{ chartID|safe }}
        var series = {{ series|safe }}
        var title = {{ title|safe }}
        var xAxis = {{ xAxis|safe }}
        var yAxis = {{ yAxis|safe }}
        var chart = {{ chart|safe }}
    </script>   
</div>

graph.js

$(document).ready(function() {
    $(chart_id).highcharts({
    chart: chart,
    title: title,
    xAxis: xAxis,
    yAxis: yAxis,
    series: series
   });
});

也许我根本不需要使用Python代码并通过其他方式从Athena获取数据？

谢谢！

Flask和Python的Highcharts：如何创建交互式图形？

0 个答案: