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

Question

I am using flask and therefore I have a dictionary with all the data I want to display with highcharts. 我使用的是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]}
        }

As you can see here, each key of my_dic should be the name of the series, and then I have another dict, which contains the x and y data for each dataset. 如您在这里看到的，my_dic的每个键应该是系列的名称，然后我有另一个dict，其中包含每个数据集的x和y数据。

This solution is quite convenient if I want to plot something with python and matplotlib, since I just have to use a regular loop to get everything. 如果我想使用python和matplotlib进行绘制，则此解决方案非常方便，因为我只需要使用常规循环即可获取所有内容。

for dataset in my_dic:
    data = my_dic[dataset]
    line = ax.plot(data["x_data"], data["y_data"], label=dataset)

Is there a way to do the same if I want to plot everything with highcharts? 如果我想用高图绘制所有内容，有没有办法做同样的事情？ How do I create such a loop with javascript? 如何使用JavaScript创建这样的循环？

My function for the highcharts plot looks like this: 我的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 ...
             ]
    });
});

Answer 1

We can manipulate the variables passed from Flask to Jinja2 template. 我们可以操纵从Flask传递到Jinja2模板的变量。 This is same in this case too. 在这种情况下也是如此。 We can pass the data dictionary from Flask to our template and then manipulate it in JavaScript. 我们可以将数据字典从Flask传递到模板，然后在JavaScript中进行操作。

We are going to pass the dictionary you mentioned in the question from Flask to the template as below: 我们将把您在问题中提到的字典从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)

Then in template file which is highchart.html in our case, we will manipulate the dictionary in JavaScript. 然后，在本例中为highchart.html模板文件中，我们将使用JavaScript操作字典。 For simplicity, we are going to use the Y axis data only. 为简单起见，我们将仅使用Y axis数据。 Modify it as necessary. 根据需要进行修改。

highchart.html : 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>

We now get a chart like this: 现在，我们得到如下图：

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-10-26 13:23:56

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-10-26 13:23:56

解决方案1
3 已采纳 2017-10-26 13:23:56