参考链接：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(' '); 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(' '); 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处理的数据。