Python使用Flask框架,结合Highchart,搭配数据功能模块,加载 HTML 表格数据

参考链接:https://www.highcharts.com.cn/docs/data-modules

1.javascript代码

var chart = Highcharts.chart(‘container‘, {
    data: {
        table: ‘datatable‘
    },
    chart: {
        type: ‘column‘
    },
    title: {
        text: ‘从 HTML 表格中提取数据并生成图表‘
        // 该功能依赖 data.js 模块,详见https://www.hcharts.cn/docs/data-modules
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: ‘个‘,
            rotation: 0
        }
    },
    tooltip: {
        formatter: function () {
            return ‘<b>‘ + this.series.name + ‘</b><br/>‘ +
                this.point.y + ‘ 个‘ + this.point.name.toLowerCase();
        }
    }
});

2.html代码(含css)

<!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>
    <script src="static/data.js"></script>

    <style>
        #datatable {
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0;
            font-size: 12px;
        }

        td, th {
            border: 1px solid #ccc;
            padding: 4px 20px;
        }
    </style>

</head>
<body>

<!-- 图表容器 DOM -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<p>数据表格</p>
<table id="datatable">
    <thead>
    <tr>
        <th></th>
        <th>小张</th>
        <th>小潘</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>苹果</th>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <th>梨</th>
        <td>2</td>
        <td>0</td>
    </tr>
    <tr>
        <th>葡萄</th>
        <td>5</td>
        <td>1</td>
    </tr>
    <tr>
        <th>香蕉</th>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <th>橘子</th>
        <td>2</td>
        <td>4</td>
    </tr>
    </tbody>
</table>

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

效果:

原文地址:https://www.cnblogs.com/sanduzxcvbnm/p/10432225.html

时间: 2024-10-19 05:07:45

Python使用Flask框架,结合Highchart,搭配数据功能模块,加载 HTML 表格数据的相关文章

002:python用flask框架开发第一个demo接口

从2020年开始,学习记录开始加入编号了~ 002:python用flask框架开发第一个demo接口 1.安装flask库,cmd命令进入到python37安装目录的scripts中pip3 install flask: 2.开始写代码 1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 import flask 4 import json 5 6 """flask 开发第一个demo接口"""

Hive和Impala加载和存储数据功能曝光

Hive与Impala都是构建在Hadoop之上的数据查询工具,那么在实际的应用中,它们是如何加载和存储数据的呢? Hive和Impala存储和加载表,和所有的关系型数据库一样,有自己的数据管理结构,从它的Server到Database再到表和视图. 在其他的数据库中,表都是以自己特定的文件格式来存储的,比如Oracle有自己的存储格式,而对Hive而言,一个表就是包含一个或多个文件的HDFS目录,这个文件是属于表下面的内容,默认存储路径:/user/hive/warehouse/<table_

Python学习-3.Python的模块加载

Python中使用import关键字进行模块加载. 先在Visual Studio中建立PythonModuleLoad项目作为演示. 1.同目录加载 建立SameFolder.py文件 写入代码: 1 def printSameFolder(): 2 print("this method is in the same folder") 修改启动文件,默认为PythonModuleLoad.py 1 import SameFolder 2 SameFolder.printSameFol

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

解决jeecg3.5中由于easyui的原因会加载两次数据的问题

在解决完jeecgt3.5中的这个问题:jeecg3.5中实现从一个页面跳转到另一个页面 后,发现数据会被加载两次,在网上找了半天也没找到原因,最后发现是由于调用datagrid方法太快引起的,解决方法为使用setTimeout延迟执行datagrid方法,具体如下: $(function() { //延迟200毫秒执行,否则easyui会加载两次数据 setTimeout(init, 200); }); function init() { //alert($('#jeecgDemoList')

JavaSE GUI显示列表 JTable的刷新 重新加载新的数据

JTable在显示所有数据之后,假如需要搜索某个名字,则会获取新的列表数据. 假设datas是JTable的数据,定义为: private Vector<Vector> datas = new Vector<Vector>(); 当你刷新数据的时候,应该这样: if (datas != null) { datas.clear(); Vector<Vector> vectors = getDatasFromList(studentList); datas.addAll(v

使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) 其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 1 <!DOCTYPE

[原创.数据可视化系列之三]使用Ol3加载大量点数据

不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI的测站和数据,这些站点在全球有4000多个,如何加载这些点并提高,OL3的ImageVector是一个很好地选择,简单的说,就是把这些要素渲染到一张图上,这样提高性能.代码如下: //加载JSON数据    mainxiu.loaddata=function(options)    {       

python import 和 from.........import 模块加载和作用域

import导入:如import moduleName 变量名moduleNmae有两个目的:识别要被载入的外部文件同时生成脚本中的变量,在文件加载后,用来引用模块对象:因为import使一个变量名引用整个模块对象,我们必须通过模块名称来得到该模块的属性 from语句: from会把模块内的变量名赋值到另一个作用域(把模块中的变量名并且在from字句中选择的复制到了进行导入的作用域之内),所以它就可以让我们直接在脚本中使用复制后的变量而不用通过模块 默认情况下,Python只对每个文件的每个进程