1.html代码

  1. <!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>
  2.  
  3. </head>
    <body>
  4.  
  5. <!-- 图表容器 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>
  6.  
  7. <script src="static/b.js"></script>
    </body>
    </html>
  8.  

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

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. bzoj1085 [SCOI2005]骑士精神——IDA*

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1085 搜索,IDA*,估价就是最少需要跳的步数: 代码意外地挺好写的,memcmp 用起来好 ...

  2. ubuntu 16.04 Eclipse 图标显示为 ？(已解决)

    这个问题挺好解决: sudo gedit /usr/share/applications/eclipse.desktop在这个文件中将Icon=/home/soyo/eclipse/icon.xpm, ...

  3. LVS的持久连接、会话保持和高可用介绍

    持续连接 1)持久连接(lvs persistence)模板: 实现无论使用任何调度算法,在一段时间内(默认360s),能够实现将来自同一个地址的请求始终发往同一个RS ipvsadm -A|E -t ...

  4. 使用docsify并定制以使它更强大

    背景 经常在网上看到一些排版非常漂亮的技术手册,左边有目录栏,右边是Markdown格式的文档,整个配色都十分舒服,就像一本书一样,一看就很让人喜欢.就比如Markdown Preview Enhan ...

  5. Android 性能优化（13）网络优化（ 9）Determining and Monitoring the Docking State and Type

    Determining and Monitoring the Docking State and Type PreviousNext This lesson teaches you to Determ ...

  6. log4net 简易封装

    using log4net; using log4net.Appender; using log4net.Config; using log4net.Core; using log4net.Layou ...

  7. LN : leetcode 258 Add Digits

    lc 258 Add Digits lc 258 Add Digits Given a non-negative integer num, repeatedly add all its digits ...

  8. mac当你有多个版本的命令存在是怎么使用最新版本

    例如你安装了一个最新的git.然而系统中由于xcode等自带的git的存在.使得/usr/bin/git 是xcode的版本. 只需要再 ~/.bash_profile 中添加一行优先path即可 e ...

  9. [ NOI 2002 ] Robot

    \(\\\) Description \(\\\) Solution 垃圾语文题毁我青春 这题其实就是重定义了俩函数.... 首先 \(\varphi(1)=0\) . 然后 \(2\) 在计算 \( ...

  10. HTTP的报文格式、GET和POST格式解析

    1. HTTP报文格式 HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文.请求报文一个HTTP请求报文由请求行(re ...