Python使用Flask框架，結合Highchart處理csv數據(引申-從文件獲取數據--從數據庫獲取數據)

本文轉載自查看原文 2019-02-25 16:29 640 Highcharts教程/ Python

參考鏈接：https://www.highcharts.com.cn/docs/process-text-data-file

1.javascript代碼

 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 csvData = document.getElementById('csv').innerHTML;
19 var lines = csvData.split('\n');
20 // 遍歷每一行
21 Highcharts.each(lines, function(line, lineNo) {
22     var items = line.split(',');
23     // 處理第一行，即分類
24     if (lineNo === 0) {
25         Highcharts.each(items, function(item, itemNo) {
26             if (itemNo > 0) {
27                 options.xAxis.categories.push(item);
28             }
29         });
30     }
31     // 處理其他的每一行
32     else {
33         var series = {
34             data: []
35         };
36         Highcharts.each(items, function(item, itemNo) {
37             if (itemNo === 0) {
38                 series.name = item;   // 數據列的名字
39             } else {
40                 series.data.push(parseFloat(item)); // 數據，記得轉換成數值類型
41             }
42         });
43         // 最后將數據 push 到數據列配置里
44         options.series.push(series);
45     }
46 });
47 // 創建圖表
48 var chart = Highcharts.chart('container', options);

2.html代碼

<div id="container"></div>
<pre id="csv">分類,蘋果,梨,橙子,香蕉
小明,8,4,6,5
小紅,3,4,2,3
小張,86,76,79,77
小芳,3,16,13,15</pre>

效果：

1.修改成從scv文件中獲取數據

csv文件內容如下：

分類,蘋果,梨,橙子,香蕉
小明,8,4,6,5
小紅,3,4,2,3
小張,86,76,79,77
小芳,3,16,13,15
小芳1,3,16,13,15
小芳2,3,16,13,15
小芳3,3,16,13,15

2.py代碼

 1 from flask import Flask, render_template
 2 
 3 app = Flask(__name__)
 4 
 5 
 6 @app.route('/')
 7 def index():
 8     with open('D:\\ajax_demo\\1.csv', 'r', encoding='utf-8') as f:
 9         lines = f.read()
10     data = {
11         'data': lines
12     }
13     return render_template('index.html', **data)
14 
15 
16 if __name__ == '__main__':
17     app.run(debug=True)

3.html代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>第一個 Highcharts 圖表</title>
 6     <!-- 引入 jquery.js -->
 7     <script src="static/jquery-3.3.1.min.js"></script>
 8     <!-- 引入 highcharts.js -->
 9     <script src="static/highcharts-7.0.3.js"></script>
10 
11 
12 </head>
13 <body>
14 
15 <!-- 圖表容器 DOM -->
16 <div id="container"></div>
17 <pre id="csv">
18 {{ data }}
19 </pre>
20 
21 
22 <script src="static/b.js"></script>
23 </body>
24 </html>

4.js代碼 --還是原來的

 1 /**
 2  * Created by sandu .
 3  * @Project:ajax_demo
 4  * @author:sandu
 5  * @Software: PyCharm
 6  * @file: b.js
 7  * @time: 2019-02-25 0025 下午 15:56
 8  */
 9 var options = {
10     chart: {
11         type: 'column'
12     },
13     title: {
14         text: '水果消費情況'
15     },
16     xAxis: {
17         categories: []
18     },
19     yAxis: {
20         title: {
21             text: '單位'
22         }
23     },
24     series: []
25 };
26 var csvData = document.getElementById('csv').innerHTML;
27 var lines = csvData.split('\n');
28 // 遍歷每一行
29 Highcharts.each(lines, function (line, lineNo) {
30     var items = line.split(',');
31     // 處理第一行，即分類
32     if (lineNo === 0) {
33         Highcharts.each(items, function (item, itemNo) {
34             if (itemNo > 0) {
35                 options.xAxis.categories.push(item);
36             }
37         });
38     }
39     // 處理其他的每一行
40     else {
41         var series = {
42             data: []
43         };
44         Highcharts.each(items, function (item, itemNo) {
45             if (itemNo === 0) {
46                 series.name = item;   // 數據列的名字
47             } else {
48                 series.data.push(parseFloat(item)); // 數據，記得轉換成數值類型
49             }
50         });
51         // 最后將數據 push 到數據列配置里
52         options.series.push(series);
53     }
54 });
55 // 創建圖表
56 var chart = Highcharts.chart('container', options);

效果圖

再引申一下，可以修改成從數據庫獲取數據，只要獲取到的數據符合csv格要求即可。

若在延伸，數據還可以使用經過numpy/pandas處理的數據。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Python的Flask框架，結合Highchart，動態渲染圖表(Ajax 請求數據接口) python flask框架數據庫的使用 Python——Flask框架——數據庫使用DataX將.csv文件的數據讀入Mysql數據庫 ORM框架通過映射（反射）獲取數據庫的數據 python訪問數據庫，通過fetch獲取結果 python Flask框架mysql數據庫配置 Python Flask框架數據庫連接池 Python框架學習之Flask中的數據庫操作 python框架之Flask基礎篇（二）-------- 數據庫的操作