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数据的更多相关文章

  1. Python的Flask框架应用调用Redis队列数据的方法

    转自:http://www.jb51.net/article/86021.htm 任务异步化 打开浏览器,输入地址,按下回车,打开了页面.于是一个HTTP请求(request)就由客户端发送到服务器, ...

  2. 使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

  3. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  4. python之Flask框架

    一.简单的Flask框架 1)flask简介 Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序. 这个 wdb 应用程序可以使一些 we ...

  5. Python的Flask框架入门-Ubuntu

    全文请见tuts code:An Introduction to Python's Flask Framework Flask是Python一个小而强大的web框架.学起来简单,用起来也容易,能够帮你 ...

  6. Python之Flask框架项目Demo入门

    Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...

  7. 使用Python的Flask框架，结合Highchart，动态渲染图表

    服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...

  8. Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了

    说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可. 本实例除了包含系统自带的,还包括自定义的导出菜单等. html代码 <!D ...

  9. Python使用Flask框架，结合Highchart，自定义导出菜单项目及顺序

    参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...

随机推荐

  1. luogu P4719 【模板】动态dp

    noip怎么考这种东西啊...看错题场上爆零凉了 首先我们先进行树链剖分,那么问题可以转换成重链的答案+其他子节点的答案 而每次修改相当于改一段重链的答案,改一次其他子节点的答案交替进行 这样只有一个 ...

  2. 8-2 canvas专题-线条样式

    8-2 canvas专题-线条样式 学习要点 对第五章知识进行简单的回顾和总结 进一步讲解canvas绘图相关的知识点 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...

  3. LED全彩显示屏色度空间

    摘要:LED全彩显示屏.LED电子大屏幕如果要有一个良好的视觉效果,其中色度占有一席重要的位置,那么该如何让LED显示屏的色度更均匀.合理呢,下面为大家总结出以下几点,供大家参考. LED全彩显示屏. ...

  4. 栗染-Not enough physical memory is available to power on this virtual machine with its configured settings.

    这是在打开虚拟机的时候报的错 解决办法:打开虚拟机的时候选择以管理员身份运行()目测可以 原文参考来自:http://blog.csdn.net/qq_35757415/article/details ...

  5. P2700逐个击破(并查集/树形dp)

    P2700 逐个击破 题目背景 三大战役的平津战场上,傅作义集团在以北平.天津为中心,东起唐山西至张家口的铁路线上摆起子一字长蛇阵,并企图在溃败时从海上南逃或向西逃窜.为了就地歼敌不让其逃走,老毛同志 ...

  6. less新手入门（一） 变量、extend扩展

    前景提要 个人在学习less时候的学习笔记及个人总结,主要是结合less中文网来学习的,但是说是中文网并不是中文呀,看起来很耽误时间,为了避免以后再次看的时候还要翻译思考,特意做此总结,方便以后查阅. ...

  7. [NOI2004]cashier 郁闷的出纳员

    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经常 ...

  8. BFS HDOJ 1728 逃离迷宫

    题目传送门 /* BFS:三维BFS,加上方向.用dp[x][y][d]记录当前需要的最少转向数 */ #include <cstdio> #include <algorithm&g ...

  9. Windows平台下Oracle监听服务启动过程中日志输出

    Windows平台下Oracle监听服务启动过程中日志输出记录. 日志目录:D:\app\Administrator\diag\tnslsnr\WIN-RU03CB21QGA\listener\tra ...

  10. Android 性能优化（11）网络优化（ 7）Optimizing for Doze and App Standby

    Optimizing for Doze and App Standby In this document Understanding Doze Doze restrictions Adapting y ...