我使用的是flask，因此我有一个字典，其中包含要显示的所有数据。
my_dic = {
'dataset1':
{'x_data': [1, 2, 3, 4, 5, 6],
'y_data': [7, 8, 9, 10, 11, 12]},
'dataset2':
{'x_data': [1, 2, 3, 4, 5, 6],
'y_data': [1, 2, 3, 4, 5, 6]}
}
如您在这里看到的，my_dic的每个键都应该是序列的名称，然后我有另一个dict，其中包含每个数据集的x和y数据。
如果我想使用python和matplotlib进行绘制，则此解决方案非常方便，因为我只需要使用常规循环即可获取所有内容。
for dataset in my_dic:
data = my_dic[dataset]
line = ax.plot(data["x_data"], data["y_data"], label=dataset)
如果我想用高图绘制所有内容，有没有办法做同样的事情？如何使用JavaScript创建这样的循环？
我的highcharts图函数如下所示：
$(function () {
var myChart = Highcharts.chart('spectra', {
chart: {
type: 'line'
},
title: {
text: 'Spectra for '+ '{{fconfig}}'+' in position '+ '{{fposition}}'
},
xAxis: {
title: {
text: 'My x-Axis '
}
},
yAxis: {
title: {
text: 'My y-Axis'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [
... HERE SHOULD BE THE DATA ...
]
});
});
最佳答案
我们可以操纵从Flask传递到Jinja2模板的变量。在这种情况下也是如此。我们可以将数据字典从Flask传递到模板，然后在JavaScript中进行操作。
我们将把您在问题中提到的字典从Flask传递到模板，如下所示：
from flask import Flask
from flask import request
from flask import render_template
app = Flask(__name__)
@app.route('/')
@app.route('/highchart')
def show_index():
data = {
'dataset1':
{
'x_data': [1, 2, 3, 4, 5, 6],
'y_data': [7, 8, 9, 10, 11, 12]
},
'dataset2':
{
'x_data': [1, 2, 3, 4, 5, 6],
'y_data': [1, 2, 3, 4, 5, 6]
}
}
fconfig = "Fconfig name"
fposition = "Fposition name"
return render_template('highchart.html', data = data, fconfig = fconfig, fposition = fposition)
if __name__ == '__main__':
app.run(debug = True)
然后，在本例中为
highchart.html的模板文件中，我们将使用JavaScript操作字典。为简单起见，我们将仅使用Y axis数据。根据需要进行修改。highchart.html：<!DOCTYPE html>
<html>
<head>
<title>Highchart</title>
<meta author = "Ahmedur Rahman Shovon" >
</head>
<body>
<h3>Highchart Example</h3>
<div id="spectra"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myChart = Highcharts.chart('spectra', {
chart: {
type: 'line'
},
title: {
text: 'Spectra for '+ '{{fconfig}}'+' in position '+ '{{fposition}}'
},
xAxis: {
title: {
text: 'My x-Axis '
}
},
yAxis: {
title: {
text: 'My y-Axis'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [
{% for key in data %}
{
name: '{{ key }}',
data: {{ data[key].y_data }}
},
{% endfor %}
]
});
});
</script>
</body>
</html>
现在，我们得到如下图：