Highcharts：如何将dict中的数据添加到序列中

Question

我用的是烧瓶，因此我有一个字典，里面有我想用图表显示的所有数据。在

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]}
        }

正如您在这里看到的，我的每个键都应该是序列的名称，然后我有另一个dict，它包含每个数据集的x和y数据。在

如果我想用python和matplotlib绘制一些东西，这个解决方案非常方便，因为我只需要使用一个常规的循环来获取所有内容。在

^{pr2}$

如果我想用海图来描绘所有的东西，有没有办法做到这一点？如何用javascript创建这样的循环？在

highplot函数看起来像这样：

$(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 ...
             ]
    });
});

Answer 1

我们可以操作从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数据。根据需要进行修改。在

{ ^{pr2}$

我们现在得到这样的图表：