Highcharts：如何将 dict 中的数据添加到系列
nie*_*eka 0 javascript python highcharts flask
我正在使用烧瓶，因此我有一个字典，其中包含我想用 highcharts 显示的所有数据。
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>
我们现在得到这样的图表：
| 归档时间： |
|
| 查看次数： |
970 次 |
| 最近记录： |