使用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 }}'的方式,加的有引号。后者若不加引号,则不显示图表。
其他参数估计也类是,凡是字符串的数据,从服务端传递过来数据,都需要加上引号。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)