Python使用Flask框架，结合Highchart处理xml数据
2024-09-30 08:36:20
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);
最新文章
- [原创]C#应用WindowsApi实现查找(FindWindowEx)文本框(TextBox、TextEdit)。
- gerrit 修改前一次提交的方法（转载）
- [经典算法] 排列组合-N元素集合的所有子集(二)
- SQL的多表操作
- [转]显示文件命令：cat、more、less、tail、touch详解
- git 分支策略
- objective-c 错题
- 自定义View常处理的回调函数
- Oozie时出现Exception in thread "main" java.lang.UnsupportedClassVersionError: com/mysql/jdbc/Driver : Unsupported major.minor version 52.0？
- 【Codeforces Round #431 (Div. 1) D.Shake It!】
- ubuntu中taglist和ctags安装使用
- Django常见问题
- 使用 Jaeger 完成服务间的链路追踪
- C#下载Url文件到本地
- oracle数据库删除数据恢复
- FICO基础知识（四）
- django学习之——我的 Hello World
- shape-outside 矩形之外的另一种思路
- gdb 读取elf
- Hibernate- QBC-基本查询