Python使用Flask框架，结合Highchart处理xml数据
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>
#xml {
display: none;
}
</style> </head>
<body> <!-- 图表容器 DOM -->
<div id="container"></div>
<pre id="csv">分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15</pre>
<pre id="xml">
<chart>
<categories>
<item>苹果</item>
<item>梨</item>
<item>橙子</item>
<item>香蕉</item>
</categories>
<series>
<name>小明</name>
<data>
<point>8</point>
<point>4</point>
<point>6</point>
<point>5</point>
</data>
</series>
<series>
<name>小红</name>
<data>
<point>3</point>
<point>4</point>
<point>2</point>
<point>3</point>
</data>
</series>
<series>
<name>小张</name>
<data>
<point>86</point>
<point>76</point>
<point>79</point>
<point>77</point>
</data>
</series>
<series>
<name>小芳</name>
<data>
<point>3</point>
<point>16</point>
<point>13</point>
<point>15</point>
</data>
</series>
</chart>
</pre> <script src="static/b.js"></script>
</body>
</html>
2.js代码
var options = {
chart: {
type: 'column'
},
title: {
text: '水果消费情况'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '单位'
}
},
series: []
};
var $xml = $('#xml');
// 处理分类
$xml.find('categories item').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});
// 处理数据列
$xml.find('series').each(function(i, series) {
var seriesOptions = {
name: $(series).find('name').text(),
data: []
};
// 处理数据类数据
$(series).find('data point').each(function(i, point) {
seriesOptions.data.push(
parseInt($(point).text())
);
});
// 将数据列对象 push 到数据列数组里
options.series.push(seriesOptions);
});
Highcharts.chart('container', options);
Python使用Flask框架，结合Highchart处理xml数据的更多相关文章
- Python的Flask框架应用调用Redis队列数据的方法
转自:http://www.jb51.net/article/86021.htm 任务异步化 打开浏览器,输入地址,按下回车,打开了页面.于是一个HTTP请求(request)就由客户端发送到服务器, ...
- 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
- Python基于Flask框架配置依赖包信息的项目迁移部署小技巧
一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...
- python之Flask框架
一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...
- Python的Flask框架入门-Ubuntu
全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...
- Python之Flask框架项目Demo入门
Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...
- 使用Python的Flask框架，结合Highchart，动态渲染图表
服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...
- Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了
说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可. 本实例除了包含系统自带的,还包括自定义的导出菜单等. html代码 <!D ...
- Python使用Flask框架，结合Highchart，自定义导出菜单项目及顺序
参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...
随机推荐
- 英式英语 vs 美式英语
0. 常见不同 日期的表达: 美国:月日年: 英国:日月年: 1. 发音 schedule,美 ['skɛdʒul],英 [ˈʃɛdjuːl] pecan,山核桃,英 ['piːk(ə)n;],美 [ ...
- 如何在Java生态圈选择一个轻量级的RESTful框架？
在微服务流行的今天,我们会从纵向和横向分解代码的逻辑,将一些独立的无状态的代码单元实现为微服务,可以将它们发布到一些分布式计算单元或者Docker中,并在性能需要的时候及时地创建更多的服务单元.微服务 ...
- [Pa2013]Iloczyn
https://www.zybuluo.com/ysner/note/1300802 题面 给定正整数\(n\)和\(k\),问能否将\(n\)分解为\(k\)个不同正整数的乘积. \(n\leq10 ...
- Eclipse 安装 Maven 插件的几种方法
转自:https://blog.csdn.net/oqqHun123/article/details/79674994 昨天直接在机器上配置了Maven环境,今天顺便把Eclipse等IDE环境配置好 ...
- java 线程开元篇
学习java的读者都知道,Java的每个对象都会有默认的12个方法,这12个方法分别是 object() finalize() hashCode() equals() wait() wait(long ...
- [SDOI2013]泉
题目描述 作为光荣的济南泉历史研究小组中的一员,铭铭收集了历史上x个不同年份时不同泉区的水流指数,这个指数是一个小于. 2^30的非负整数.第i个年份时六个泉区的泉水流量指数分别为 A(i,l),A( ...
- [SDOI2009]学校食堂
题目描述 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以用一个非负整数 ...
- 贪心 Codeforces Round #263 (Div. 2) C. Appleman and Toastman
题目传送门 /* 贪心:每次把一个丢掉,选择最小的.累加求和,重复n-1次 */ /************************************************ Author :R ...
- 407 Trapping Rain Water II 接雨水 II
给定一个m x n的矩阵,其中的值均为正整数,代表二维高度图每个单元的高度,请计算图中形状最多能接多少体积的雨水.说明:m 和 n 都是小于110的整数.每一个单位的高度都大于0 且小于 20000. ...
- TCP/IP与Http与socket的关系
1 理清概念: TCP/IP是一个大的协议族(只不过TCP和IP是super star所以就这么命名了),它包括了: 应用层协议:FTP.HTTP.TELNET.SMTP.DNS(协议): 传输层协议 ...