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. YTU 2547: Repairing a Road

    2547: Repairing a Road 时间限制: 1 Sec  内存限制: 128 MB 提交: 3  解决: 2 题目描述 You live in a small town with R b ...

  2. 利用JFreeChart生成多轴图表(7) (转自 JSP开发技术大全)

    利用JFreeChart生成多轴图表(7) (转自 JSP开发技术大全) 14.7 利用JFreeChart生成多轴图表 通过JFreeChart插件还可以生成拥有多个坐标轴的图表,简称多轴图表.在生 ...

  3. bzoj 2428 均分数据

    题目大意: 已知N个正整数 将它们分成M组,使得各组数据的数值和最平均,即各组的均方差最小 求最小均方差 思路: 模拟退火 #include<iostream> #include<c ...

  4. Real-Time Compressive Tracking,实时压缩感知跟踪算法解读

    这是Kaihua Zhang发表在ECCV2012的paper,文中提出了一种基于压缩感知(compressive sensing)的单目标跟踪算法,该算法利用满足压缩感知(compressive s ...

  5. bzoj4868

    http://www.lydsy.com/JudgeOnline/problem.php?id=4868 三分+贪心 我们可以知道这是一个单峰函数 当A>B那么我们每次调整一个的价钱是最佳的,所 ...

  6. C#面向过程项目之飞行棋

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 飞行棋V ...

  7. 为npm设置代理,解决网络问题

    为npm设置代理,解决网络问题 npm config set proxy=http://127.0.0.1:1080

  8. bzoj 1585: [Usaco2009 Mar]Earthquake Damage 2 地震伤害【最小割】

    枚举建图.jpg 一开始建的图挂了,于是枚举了几种建图方式-- 因为要删点,所以拆点,连接(i,i',1),对于原来图上的边(u,v),连接(u',v,inf),(v',u,inf),然后连接(s,i ...

  9. [Swift通天遁地]一、超级工具-(10)使用地图视图MKMapView的相机功能实现创建三维地图

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. Python基础类型(一) int 整型

    Python算术运算符 以下假设变量: a=10,b=20: 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 30 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 ...