参考链接：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>

效果：

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

  1. hibernate框架学习之数据抓取(加载)策略

    Hibernate获取数据方式 lHibernate提供了多种方式获取数据 •load方法获取数据 •get方法获取数据 •Query/ Criteria对象获取数据 lHibernate获取的数据分 ...

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

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

  3. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  4. javascript模块加载框架seajs详解

    SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...

  5. Google官方网络框架-Volley的使用解析Json以及加载网络图片方法

    Google官方网络框架-Volley的使用解析Json以及加载网络图片方法 Volley是什么? Google I/O 大会上,Google 推出 Volley的一个网络框架 Volley适合什么场 ...

  6. DataTable 删除数据后重新加载

    DataTable 删除数据后重新加载 一.总结 一句话总结: 判断datatable是否被datatable初始化或者是否执行了datatable销毁函数,如果没有,就销毁它 if ($('#dat ...

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

    不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...

  8. python 模块加载

    python 模块加载 本文主要介绍python模块加载的过程. module的组成 所有的module都是由对象和对象之间的关系组成. type和object python中所有的东西都是对象,分为 ...

  9. jsTree 的简单用法--异步加载和刷新数据

    首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...

随机推荐

  1. 扩展AutoCompleteTextView让其默认显示一组列表。setThreshold

    很多时候, 在做自动下拉框时,默认点上去时需要显示一组默认的下拉数据.但是默认的AutoCompleteTextView是实现不了的, 因为setThreshold方法最小值是1,就算你设的值为0,也 ...

  2. 推理集 —— death

    事故: 自杀: 他杀: 1. 跳楼 头向下死得比较快,没那么痛苦. 脚向下,不会立刻死亡,痛苦至极.死亡原因可能不是跳楼,而是失血过多而死 扑下去, 同头向下. 仰着跌下去,同头向下.. 跳楼最好头先 ...

  3. 排名Top 100的Java类库

    和去年一样,排名第一的类库,依旧是JUnit.基于它扩展的 JUnit Runner 占据第二名的位置,甚至是较旧的 junit.framework 此次也在第三名的位置.也就是说JUnit包揽了前三 ...

  4. 洛谷P3216 [HNOI2011]数学作业

    题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N 和 M,要求计算 Concatenate (1 .. N) Mod M 的值,其中 Concatenat ...

  5. android 手机上运行图像算法

    在pc上调试好的图像处理算法想要在android手机上跑一下看看速度需要一下几个步骤 1.建立一个android application,通过ndk调用你写好的图像算法的c/c++ code 2. 然 ...

  6. JavaScript代码优化新工具UglifyJS

    jQuery 1.5 发布的时候 john resig 大神说所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意. UglifyJS 是一个服务端no ...

  7. jquery中$()的使用

    在jquery中最常使用的就是$这个符号了,在我没有系统的学习jquery之前,我用到的$都是用于对元素的选择,而这只是$的很简单的用法.在jquery$()函数一共有三种用法: $(selector ...

  8. bzoj 2017: [Usaco2009 Nov]硬币游戏【dp】

    废了废了,一个小dp都想不出来 把c数组倒序一下,变成1在最下,设f[i][j]为某一人取完j个之后还剩1~i的硬币,转移的话应该是f[i][j]=max(s[i]-f[i-k][k]),就是1~n的 ...

  9. bzoj 1635: [Usaco2007 Jan]Tallest Cow 最高的牛【差分】

    s[i]为差分后的"i这头牛前有几头比它高",计算答案的时候加成前缀和,假设第一头最高减一下即可 用map记录一下被加过的区间,避免重复 #include<iostream& ...

  10. [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照（2）添加一个 App Store 图标

    您必须提供一个 App Store 图标,用于在 App Store 中的不同部分展示您的 App.请遵照 Human Interface Guidelines(<人机界面准则>)创建您的 ...