1.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>

    <style>

        #data {

            display: none;

        }

    </style>

</head>

<body>

<!-- 图表容器 DOM -->

<div id="container"></div>

<pre id="data">

    [

        [1,12],

        [2,5],

        [3,18],

        [4,13],

        [5,7],

        [6,4],

        [7,9],

        [8,10],

        [9,15],

        [10,22]

    ]

</pre>

<script src="static/b.js"></script>

</body>

</html>

2.js代码

var options = {

    chart: {

        renderTo: 'container',

        type: 'spline'

    },

    series: [{}]

};

var jsonStr = document.getElementById('data').innerHTML,

    jsonData = JSON.parse(jsonStr);

options.series[0].data = jsonData;

Highcharts.chart('container', options);

Python使用Flask框架，结合Highchart处理jsonl数据的更多相关文章

  1. Python的Flask框架应用调用Redis队列数据的方法

    转自:http://www.jb51.net/article/86021.htm 任务异步化 打开浏览器,输入地址,按下回车,打开了页面.于是一个HTTP请求(request)就由客户端发送到服务器, ...

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

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

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

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

  4. python之Flask框架

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

  5. Python的Flask框架入门-Ubuntu

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

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

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

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

    服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...

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

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

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

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

随机推荐

  1. javaSE基础（三）

    泛型类:像ArrayList这样的特殊类,他们允许通过类型参数来指明使用的数据类型. 报装类:一种用于将基本类型的数据"封装"成对象的类. 装箱:将 基本类型的数据自动转换为对应类 ...

  2. hdoj--1872--稳定排序（水题）

     稳定排序 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  3. CSYZDay1模拟题解

    T1.game [问题描述] LZK发明一个矩阵游戏,大家一起来玩玩吧,有一个N行M列的矩阵.第一行的数字是1,2,…M,第二行的数字是M+1,M+2…2*M,以此类推,第N行的数字是(N-1)*M+ ...

  4. bzoj4264

    哈希 cf原题...没见过的话真想不出来 将邻接表排序哈希,判断是否相同,但是会漏掉两点相邻的情况,于是再把自己加入自己的邻接表,然后再哈希判断. #include<bits/stdc++.h& ...

  5. 【转载】Java - Wait & Notify

    [本文转自]http://www.cnblogs.com/dolphin0520/p/3920385.html 这三个方法的文字描述可以知道以下几点信息: 1)wait().notify()和noti ...

  6. 通过usb访问mtp设备(ubuntu12.04) (转载)

    转自:http://robert.penz.name/658/howto-access-mtp-devices-via-usb-on-ubuntu-12-04/ A friend asked me h ...

  7. macbookpro安装Ubuntu16.04.1 LTS爬坑之旅。亲测有效（集众家之长）。安装时间为2017-11-19。

    1.格式化U盘 要求:(1)切换分区格式为Mac OS扩展 (日志型):(2)方案(scheme)设置为:GUID Partition Map:如图(使用mac自带磁盘工具) 2.给Ubuntu划分磁 ...

  8. php 编译时 报错 configure: error: libXpm.(a|so) not found.

    编译环境 centos7 php 5.4.26 $ yum install libXpm-devel 显示已安装 百度得知 ubuntu虚拟机安装lamp遇到的问题 configure: error: ...

  9. [LOJ#10064]黑暗城堡

    Description 在顺利攻破 Lord lsp 的防线之后,lqr 一行人来到了 Lord lsp 的城堡下方.Lord lsp 黑化之后虽然拥有了强大的超能力,能够用意念力制造建筑物,但是智商 ...

  10. 每天学点Linux命令：倒叙打印文件第二行的前100个大写字母

    sed -n | rev 处理第二行             grep:提取大写字母   o: 不显示非结果  tr:删除换行   Cut:截取1-100个字符  rev:逆序 断断续续搞了好长时间. ...