linux ubuntu 下利用python，django提mysql数据使用highcharts来绘图

本文链接：https://blog.csdn.net/godLCF/article/details/77435750

本文介绍了在Linux Ubuntu环境下，如何利用Python、Django从MySQL数据库获取数据，然后将数据转换为JSON格式，最后通过Highcharts库进行图表绘制。详细步骤包括：从MySQL查询数据，用Python整理数据为JSON，配置Django视图和URL，以及在Linux中部署和重启Apache2服务以展示图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步先从mysql取数据

第二步利用python将数据整理成json格式

在views.py里修改添加

sql = "SELECT * FROM tianqi " #tianqi是我在mysql存数据的表
cursor.execute(sql )
connect.commit()
s =cursor.fetchall()
city =[]
qiwen = []
yue = []
for x in s:
city.append(x[1])
qiwen.append(x[2])
yue.append(x[0])
city1 =list(set(city))
df = pd.DataFrame({'name':city,
'data':qiwen})
df1=df[df['name']==city1[0]]
df2=df[df['name']==city1[1]]
df3=df[df['name']==city1[2]]
df4=df[df['name']==city1[3]]
sc1 ='var datas=[{name:"'+ city1[0]+'"'+','+'data:'+'['+ ','.join(df1['data'].values) +']},'
sc2 ='{name:"'+ city1[1]+'"'+','+'data:'+'['+ ','.join(df2['data'].values) +']},'
sc3 ='{name:"'+ city1[2]+'"'+','+'data:'+'['+ ','.join(df3['data'].values) +']},'
sc4 ='{name:"'+ city1[3]+'"'+','+'data:'+'['+ ','.join(df4['data'].values) +']}];'
scs =sc1+sc2+sc3+sc4
return render_to_response("huatu.html",locals()) #scs就是我们需要的格式

利用django模版系统views.py把数据送到模版页。

第三步利用highcharts绘图模版绘图。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

/* css 代码 */

</style>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>

<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>

<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>

<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>$.get("http://39.108.113.120/tqdata2/",function(data){(data)
});</script>
<script>{{scs|safe}};</script> //scs就是我在views.py中所得到的，|safe是防止scs中的符号发生转义

</head>

<body>

<div id="container" style="min-width:400px;height:400px"></div>

<script>
/**

* Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表

**/

var chart = new Highcharts.Chart('container', {

title: {

text: '不同城市的月平均气温',

x: -20

},

subtitle: {

text: '数据来源: WorldClimate.com',

x: -20

},

xAxis: {

categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

},

yAxis: {

title: {

text: '温度 (°C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

valueSuffix: '°C'

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'middle',

borderWidth: 0

},

series: datas //datas是我在views.py中var的
});
</script>

</body>

</html>