python---图表的使用
一:使用预览
二:插件使用来源
Highcharts(本次使用)
ECharts
三:插件的使用
(一)后台传递数据
getHchart方法获取用户数据(用户名,数据列表)
def getHchart(self): user_list = models.User.objects.filter() user_data = [] for user in user_list: cursor = connections['default'].cursor()
#在数据库语句中使用字符串格式化需要两个%%,在python语言中使用一个% cursor.execute("""select strftime('%%s',strftime("%%Y-%%m-01",ptime))*1000,count(id) from repository_trouble where processer_id = %s GROUP BY strftime("%%Y-%%m",ptime)""",[user.nid]) result = cursor.fetchall() #数据列表 user_data.append({ 'name':user.username, 'data':result }) return user_data
数据格式:
[
{'name': '山上有风景', 'data': [(1517443200000, 1), (1519862400000, 1), (1525132800000, 1)]},
{'name': '宁静致远', 'data': [(1519862400000, 1), (1522540800000, 2), (1525132800000, 1), (1527811200000, 1)]},
{'name': '蜡笔小新', 'data': []},
{'name': '你大爷', 'data': []},
{'name': '但是', 'data': []}
]
(二)将数据Json化,传递到前端后的处理方法
1.导入js文件 <script src="/static/plugins/Highcharts-6.1.0/code/highcharts.js"></script>
2.创建一个DOM容器 <div id="container" style="min-width:400px;height:400px"></div>
3.图表配置 <script> var chart = null; Highcharts.setOptions({ global:{ useUTC:false } }) config = { chart: { type: 'spline' #设置图表类型 }, title: { text: '报障数据统计' #标题设置 }, subtitle: { text: '数据来源: 127.0.0.1(来源本地)' #子标题 }, xAxis: { #X轴配置 type:"datetime", dateTimeLabelFormats:{ year:"%Y", month:"%Y-%m", }, title:{ text:null } }, yAxis: { #Y轴配置 title: { text: '报障数量' } }, credits:{ #版权 enabled: false // 禁用版权信息 }, plotOptions: { line: { dataLabels: { enabled: true // 开启数据标签 }, enableMouseTracking: false // 关闭鼠标跟踪,对应的提示框、点击事件会失效 } }, } $(function(){ $.ajax({ url:"/backend/trouble-hchart.html", type:"POST", data:{'csrfmiddlewaretoken': '{{ csrf_token }}'}, dataType:"json", success:function(data){ config['series']=data chart = Highcharts.chart('container', config); #设置图表的数据 } }) }) </script>
作者:山上有风景
欢迎任何形式的转载,但请务必注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步