正文
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);
