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

最新推荐文章于 2024-03-19 11:37:22 发布
最新推荐文章于 2024-03-19 11:37:22 发布
阅读量618 收藏 2
点赞数
文章标签： python 数据库 php
原文链接：http://www.cnblogs.com/sanduzxcvbnm/p/10423556.html
版权

服务端动态渲染图表

参考文章链接：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 }}'的方式，加的有引号。后者若不加引号，则不显示图表。

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

转载于:https://www.cnblogs.com/sanduzxcvbnm/p/10423556.html

weixin_30635053
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python flask框架如何显示图像到web页面
09-16
主要介绍了Python flask框架如何显示图像到web页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Python flask框架实现浏览器点击自定义跳转页面
09-16
主要介绍了Python flask框架实现浏览器点击自定义跳转页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
flask渲染图像_用于图像推荐的Flask应用
weixin_26752765的博客
09-06 523
flask渲染图像After creating a Python-based machine learning application you might want to get it running on a website. 创建基于Python的机器学习应用程序后，您可能希望使其在网站上运行。 In this article it is explained how this can be ...
基于flask框架高校财务报账管理系统 (python+mysql+论文)
最新发布
JAVA程序设计
03-19 834
首先，该系统可以大大提高财务报账管理的效率，减少人工操作的繁琐性，降低出错率。因此，本毕业设计旨在开发一款基于前端技术（HTML+CSS+JavaScript+Vue）和后端技术（Python+Flask）的高校财务报账管理系统，以实现财务管理的自动化、智能化和网络化，提高财务报账管理的效率和准确性。在数据库管理工具的选择上，使用了Navicat 11，这是一个用户友好且功能强大的数据库管理软件，它支持多种数据库系统，包括MySQL，并提供了图形化界面，使得数据库的管理和维护工作更加便捷。
Flask静态文件及模板渲染简介
一名草根程序员，感恩编程这份工作给了我碎银几两
08-16 1009
静态文件 静态文件通常包含CSS和JavaScript文件,开发期间,Flask只需在包或模块旁边创建一个static文件夹，它就可以在/static应用程序中找到。 注意:生产环境中,Flask关闭调试模式后加载不了静态资源,应通过服务器正向代理静态资源 静态文件加载 {{ url_for(‘static’, filename=”静态文件路径”) }} 如: url_for(‘stat...
Flask源码阅读（三）——渲染模板
slamx的博客
01-07 1669
1.前面的例子中（第一篇），业务逻辑和表现逻辑混合在了一起，会导致代码难以理解和维护。因此， 把表现路基移到模板中能提升程序的可维护性。例:用户在网站仲注册了一个新账户。用户在变淡中输入嗲子邮箱地址和密码，然后点击提交按钮。服务器收到包含用户输入数据的请求，然后Flask把请求分发到处理请求的视图函数。这个视图函数需要访问数据库，添加新用户，然后生成响应回送浏览器。 其中：服务器收到包含用户输入数
flask学习笔记（四）：渲染模板和参数
观月执白
08-18 1826
1、渲染模板 需要先导入render_templatem模块，然后先在文件所在目录创建一文件夹，命名为templates，然后在文件夹中新建一个html网页文件。（渲染时框架会自动寻找网页文件，不必添加"templates"这个路径，这是由flask框架决定的） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &...
使用Python的Flask框架实现视频的流媒体传输
09-22
主要介绍了使用Python的Flask框架实现视频的流媒体传输,包括从摄像机获取帧到web浏览器的数字流传输，需要的朋友可以参考下
python Flask中返回图片流给前端展示
热门推荐
DHogan的博客
05-16 3万+
场景需求：需要在Flask服务器的本地找一张图片返回给前端展示出来。 问题疑点：通常前端的标签只会接受url的形式来展示图片，没试过在返回服务器本地的一张图片给前端。 因此写个记录一下这个看起来有点奇葩的场景（通常个人博客，个人网站没有钱用第三方的服务都会采用存储在服务器本地的方法啦。） 项目目录： dyy_project | |----static (新建flask项目时自动建
【python/flask】将PIL/OpenCV图像渲染到页面
o0o
08-26 1279
说在前面 python版本：3.7.3 flask版本：2.0.1 场景 方法 from io import BytesIO def serve_pil_image(pil_img): img_io = BytesIO() pil_img.save(img_io, 'PNG') img_io.seek(0) return send_file(img_io, mimetype='image/png')
Flask一个简单的居中展示图片的模板
thinkcg的博客
09-01 2263
文档结构图： webtest  --- hello.py               --- hello.wsgi               --- templates/testpic.html               --- static/testpic.jpg hello.py hello.wsgi Flask模板文件testpic.html 重点： ...
flask 显示图片
qq_34963461的博客
01-13 7618
如下则为图片所在目录： 则在前端显示写法为： src="../static/123.png" />
flask使用渲染模板
tingyuanss的专栏
06-09 8840
使用渲染模板的好处是：将业务逻辑（访问数据库..），和表现逻辑(浏览器看到的html)分离开来，易于维护。 默认情况下：Flask在程序文件加中的templates子文件夹中寻找模板。 demo（请先确认你已经安抓了flask以及flask所依赖的库，安装教程见前面的文章）： mkdir jinja2template cd jinja2template mkdir templates
Flask 运用Echarts绘制图形
CSDN
10-05 9791
ECharts（Enterprise Charts）是一个基于 JavaScript 的开源可视化库，由百度开发和维护。它支持各种图表类型，包括折线图、柱状图、饼图、散点图等，以及支持地理坐标系、时间轴、数据筛选等丰富的交互特性。ECharts的设计注重性能和扩展性，适用于在 Web 页面中创建各种交互式和动态的数据可视化。该开发库目前发展非常不错，且支持各类图形的绘制可定制程度高，Echarts绘图库同样可以与`Flask`结合，前台使用`echart`绘图库进行图形的生成与展示，后台则是Flask通
Flask+Pyeharts前端实时动态展现多曲线多图实践
ftzchina的博客
07-29 5597
一：FLASK和Pyechats简介 Flask是一个轻量级的可定制框架，使用Python语言编写，较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发，开发人员分工合作，小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。另外，Flask还有很强的定制性，用户可以根据自己的需求来添加相应的功能，在保持核心功能简单的同时实现功能的丰富与扩展，其强大的插件库可以让用户实现个性化的网站定制，开发出功能强大的网站。 Flask的基本...
使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)
weixin_30914981的博客
02-25 357
参考链接：https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的，这里改用python写。 需要注意的地方： 1.接口返回的数据格式，这个需要根据Ajax请求代码而定，是一个数值，还是一个数组。 2.js中Ajax的写法，请求路径，请求返回的数据格式等。 前一篇文章是服务端直接给html页面传递数据，这篇文章采用A...
使用python flask框架进行pyecharts图形整合
03-28
要使用Python Flask框架进行Pyecharts图形整合，需要安装以下组件： 1. Flask 2. Pyecharts 可以使用以下命令安装： ``` pip install flask pyecharts ``` 然后，创建一个Flask应用程序并设置路由。在路由函数中，可以使用Pyecharts创建图表并将其渲染为HTML字符串。 以下是一个简单的示例： ```python from flask import Flask, render_template from pyecharts.charts import Bar from pyecharts import options as opts app = Flask(__name__) @app.route('/') def index(): # 创建一个柱状图 bar = ( Bar() .add_xaxis(['A', 'B', 'C', 'D', 'E']) .add_yaxis('Series 1', [10, 20, 30, 40, 50]) .set_global_opts(title_opts=opts.TitleOpts(title="Bar Chart")) ) # 将图表渲染为HTML字符串 chart_html = bar.render_embed() # 渲染模板并返回HTML响应 return render_template('index.html', chart_html=chart_html) if __name__ == '__main__': app.run(debug=True) ``` 在上面的示例中，我们创建了一个柱状图，并将其渲染为HTML字符串。然后，我们将HTML字符串传递给模板，并在模板中使用`{{ chart_html|safe }}`渲染图表。 在模板中，我们需要使用Pyecharts提供的JavaScript文件和CSS文件。可以使用以下代码在模板中包含这些文件： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pyecharts Example</title> <link rel="stylesheet" href="{{ url_for('static', filename='pyecharts/echarts.min.css') }}"> <script type="text/javascript" src="{{ url_for('static', filename='pyecharts/echarts.min.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='pyecharts/pyecharts.min.js') }}"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> var chart = echarts.init(document.getElementById('chart')); {{ chart_html|safe }} chart.resize(); </script> </body> </html> ``` 在上面的模板中，我们包含了Pyecharts提供的两个JavaScript文件和一个CSS文件。然后，我们在`<div>`元素中创建一个图表容器，并在JavaScript代码中初始化图表并渲染HTML字符串。最后，我们调用`chart.resize()`以确保图表正确缩放。 通过运行上面的代码，可以在http://localhost:5000/上看到创建的图表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值