Highcharts：如何将数据从字典添加到系列答案

【问题标题】：Highcharts: How do I add data from a dict to a seriesHighcharts：如何将数据从字典添加到系列
【发布时间】：2017-10-26 12:25:08
【问题描述】：

我正在使用烧瓶，因此我有一个字典，其中包含我想用 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的每个key应该是series的名字，然后我还有另一个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)

如果我想用 highcharts 绘制所有内容，有没有办法做同样的事情？如何使用 javascript 创建这样的循环？

我的高图函数如下所示：

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

【问题讨论】：

标签： javascript python flask highcharts

【解决方案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 数据。根据需要进行修改。

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>

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

【讨论】：