Question

我正在使用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)

如果我想用highcharts绘制所有内容，有没有办法做同样的事情？如何使用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 ...
             ]
    });
});

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数据。根据需要进行修改。

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>

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

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

1 个答案: