服务端动态渲染图表

参考文章链接：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，动态渲染图表的更多相关文章

  1. 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

  2. Python的Flask框架入门-Ubuntu

    全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...

  3. [Python自学] Flask框架 (1) (Flask介绍、配置、Session、路由、请求和响应、Jinjia2模板语言、视图装饰器)

    oldboy:s9day114 参考博客:https://www.cnblogs.com/wupeiqi/articles/7552008.html 一.Flask简介 1.安装Flask pip i ...

  4. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  5. python之Flask框架

    一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...

  6. Python之Flask框架项目Demo入门

    Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...

  7. Python使用Flask框架，结合Highchart处理csv数据(引申-从文件获取数据--从数据库获取数据)

    参考链接:https://www.highcharts.com.cn/docs/process-text-data-file 1.javascript代码 var options = { chart: ...

  8. Python使用Flask框架，结合Highchart，自定义图表样式主题

    参考链接:https://www.highcharts.com.cn/docs/themes 1.使用官方提供的主题js文件,只需要在 highcharts.js 后引入对应的文件即可,不用修改原有的 ...

  9. Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了

    说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可. 本实例除了包含系统自带的,还包括自定义的导出菜单等. html代码 <!D ...

随机推荐

  1. oop_day06_抽象类、接口_20150814

    oop_day06_抽象类.接口_20150814 1.static final常量: 1)必须声明同一时候初始化.不能改动,类名点来訪问 2)常量名建议全部字母都大写 3)编译器编译时会直接替换为详 ...

  2. 字节数组byte[]和整型,浮点型数据的转换——Java代码

    近期在写C++ socket和java socket之间的通信程序,涉及到整数浮点数的传输.须要从字节数组还原数据,查了一些资料.总结例如以下 1.       整数和浮点数的机器表示 在机器内部.不 ...

  3. bzoj2538: [Ctsc2000]公路巡逻

    超车这个东西这么恶心肯定是要暴力求的(自圆其说) 那么分成一个个时间段来搞,然后DP一下 化一下那个速度,耗费时间是在300s~600s之间的 那我们就可以设f[i][j]为走到第i个位置用了j的时间 ...

  4. [Codeforces 485F] Oppa Funcan Style Remastered

    [题目链接] https://codeforces.com/contest/986/problem/F [算法] 不难发现 , 每个人都在且仅在一个简单环中 , 设这些环长的长度分别为 A1, A2 ...

  5. E20170930-hm

    parse   vt. 从语法上描述或分析(词句等);

  6. [Apple开发者帐户帮助]九、参考（6）支持的功能（watchOS）

    watchOS扩展可用的功能取决于您的程序成员身份. 注意:对于watchOS应用程序目标,可用的功能是应用程序组和后台模式,并且不依赖于您的程序成员身份. 能力 ADP 企业 Apple开发者 应用 ...

  7. akka设计模式系列

    由于本人爱好Scala,顺便也就爱好Akka,但目前网上对Akka的介绍大多都是概念上或技术方向上的介绍,基本没有Akka设计模式或者Actor模型设计模式的资料.这对于Akka的普及非常不利,因为即 ...

  8. 返回Json和XML两种格式

    由于项目需要,同一接口支持根据参数不同返回XML和Json两种格式的数据,在网上看了很多大多是加后缀的方式来实现返回不同格式数据的,后来看了一篇http://www.importnew.com/276 ...

  9. Expected one result (or null) to be returned by selectOne(), but found: 2 和 java.lang.UnsupportedOperationException异常

    在学习MyBatis的时候,简简单单的MyBatis+MySql的增删改查操作,但是却出了问题. 刚开始数据库只有一条数据的时候,岁月静好,一切看起来都那么的OJBK.但是,当我往数据库插入第二条数据 ...

  10. [Luogu 1966] noip13 火柴排队

    [Luogu 1966] noip13 火柴排队 Problem 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之 ...