使用Python的Flask框架，结合Highchart，动态渲染图表

服务端动态渲染图表

参考文章链接：https://www.highcharts.com.cn/docs/dynamic-produce-html-page

参考文章是使用php写的，我这边改用python写

具体如下：

1.目录结构：

ajax_demo
    ajax_demo.py
    templates
        -index.html
    static
        -jquery-3.3.1.min.js
        -highcharts-7.0.3.js

2.ajax_demo.py

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():
    data = {
        'text1':'对数折线图',
        'data1':[1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
    }
    return render_template('index.html',**data)

if __name__ == '__main__':
    app.run(debug=True)

3..index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个 Highcharts 图表</title>
    <!-- 引入 jquery.js -->
    <script src="static/jquery-3.3.1.min.js"></script>
    <!-- 引入 highcharts.js -->
    <script src="static/highcharts-7.0.3.js"></script>


</head>
<body>

<!-- 图表容器 DOM -->
<div id="container" style="min-width:500px;height:500px"></div>

<script>
    var chart = Highcharts.chart('container', {
        title: {
            text: '{{ text1 }}'
        },
        xAxis: {
            tickInterval: 1
        },
        yAxis: {
            type: 'logarithmic',
            minorTickInterval: 0.1
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br />',
            pointFormat: 'x = {point.x}, y = {point.y}'
        },
        series: [{
            data: {{ data1 }},
            pointStart: 1
        }]
    });

</script>

</body>
</html>

注意：series中的data使用的是{{ data1 }}方式，没有加引号，但是title中的text使用的是'{{ text1 }}'的方式，加的有引号。后者若不加引号，则不显示图表。

其他参数估计也类是，凡是字符串的数据，从服务端传递过来数据，都需要加上引号。

posted @ 2019-02-23 17:47  哈喽哈喽111111  阅读(1388)  评论(0)  编辑  收藏  举报