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代码

复制代码
 1 var options = {
 2     chart: {
 3         type: 'column'
 4     },
 5     title: {
 6         text: '水果消费情况'
 7     },
 8     xAxis: {
 9         categories: []
10     },
11     yAxis: {
12         title: {
13             text: '单位'
14         }
15     },
16     series: []
17 };
18 var $xml = $('#xml');
19 // 处理分类
20 $xml.find('categories item').each(function(i, category) {
21     options.xAxis.categories.push($(category).text());
22 });
23 // 处理数据列
24 $xml.find('series').each(function(i, series) {
25     var seriesOptions = {
26         name: $(series).find('name').text(),
27         data: []
28     };
29     // 处理数据类数据
30     $(series).find('data point').each(function(i, point) {
31         seriesOptions.data.push(
32             parseInt($(point).text())
33         );
34     });
35     // 将数据列对象 push 到数据列数组里
36     options.series.push(seriesOptions);
37 });
38 Highcharts.chart('container', options);
复制代码

 

posted @   哈喽哈喽111111  阅读(432)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示