使用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 @   哈喽哈喽111111  阅读(1398)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示