使用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 }}'的方式，加的有引号。后者若不加引号，则不显示图表。
其他参数估计也类是，凡是字符串的数据，从服务端传递过来数据，都需要加上引号。
使用Python的Flask框架，结合Highchart，动态渲染图表的更多相关文章
- 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
- Python的Flask框架入门-Ubuntu
全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...
- [Python自学] Flask框架 (1) (Flask介绍、配置、Session、路由、请求和响应、Jinjia2模板语言、视图装饰器)
oldboy:s9day114 参考博客:https://www.cnblogs.com/wupeiqi/articles/7552008.html 一.Flask简介 1.安装Flask pip i ...
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- python之Flask框架
一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...
- Python之Flask框架项目Demo入门
Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...
- Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)
参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...
- Python使用Flask框架，结合Highchart，自定义图表样式主题
参考链接:https://www.highcharts.com.cn/docs/themes 1.使用官方提供的主题js文件,只需要在 highcharts.js 后引入对应的文件即可,不用修改原有的 ...
- Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了
说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可. 本实例除了包含系统自带的,还包括自定义的导出菜单等. html代码 <!D ...
随机推荐
- WinMain和MFC的差别
API(Application Programming Interface):开放给应用程序调用的系统功能. 一个Windows Application(SDK): WinMain ReristerC ...
- 快学Scala习题解答—第十章 特质
10 特质 10.1 java.awt.Rectangle类有两个非常实用的方法translate和grow,但可惜的是像java.awt.geom.Ellipse2D这种类没有. 在Scala中,你 ...
- Cadence——每次启动软件弹出找不到license文件的提示窗口
1. 摘要 按照Cadence16.60,每次启动该软件,总弹出提示窗口,内如大致为:Orcad Capture license was not found.... 2. 解决方法 参考此链接:htt ...
- RDA 字库制作
制作韩语字库为例: 1.韩语UNICODE 范围 TV_IDF_uni_korean.txt [01fa,] [02c6,02c7] [02c9,02ca] [02cd,02cd] [02d8,02d ...
- ADTS结构
ADTS全称是(Audio Data Transport Stream),是AAC的一种十分常见的传输格式.转载请注明来自:http://www.binkery.com/ ADTS内容及结构一般情况下 ...
- 68. 对Extjs中store的多种操作
转自:https://www.cnblogs.com/exmyth/archive/2013/05/16/3082045.html 先来个声明,看着不错,贴过来的,没都测试过. Store.getCo ...
- 6月来了，Java还是第一！
2019年6月了,话说现在很多小孩子都开始接触幼儿编程了,我也经常看到幼儿编程的广告,编程门槛真的是越来越低. 除此之外,也有大量其他行业的从业者想转软件开发的,编程那么广,语言那么多,那么在这么多编 ...
- RocketMQ(2)
1. 消费端集群消费(负载均衡) 示例代码: /** * Producer,发送消息 * */ public class Producer { public static void main(Stri ...
- BZOJ 4828 DP+BFS
被一道简单BFS坑了这么长时间我也是hhh了 //By SiriusRen #include <bits/stdc++.h> using namespace std; ,,):d(D),x ...
- ansible剧本
yaml简介 YAML是"YAML Ain't a Markup Language"(YAML不是一种置标语言)的递归缩写,早先YAML的意思其实是:"Yet Anoth ...