首页 > 代码库 > 前端生成图表
前端生成图表
1、常用的前端生成图表的工具HighCharts和echarts
2、具体内容可参考官方文档,有一些具体实例,JS和HTML的代码都存在,还可以编辑代码
3、具体的设置还可以参考官方文档
4、使用样例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script> </head> <body> <div id="container"></div> <script> Highcharts.setOptions({ global: { useUTC: false } }); $(function () { initChart(); }) function initChart() { //初始化一些参数 var config = { chart: { type: ‘spline‘ }, title: { text: ‘动态模拟实时数据‘ }, xAxis: { type: ‘datetime‘ }, yAxis: { title: { text: ‘值‘ }, plotLines: [{ value: 0, width: 1, color: ‘#808080‘ }] }, tooltip: { formatter: function () { return ‘<b>‘ + this.series.name + ‘</b><br/>‘ + Highcharts.dateFormat(‘%Y-%m-%d %H:%M:%S‘, this.x) + ‘<br/>‘ + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: true }, exporting: { enabled: false }, series: [ ] } //发送ajax请求从后台取数据,将数据展示在前端 $.ajax({ url: ‘/backend/get-data.html‘, dataType:‘JSON‘, success: function (arg) { config[‘series‘] = arg; $(‘#container‘).highcharts(config); } }) } </script> </body> </html>
def get_data(request): data ={} from django.db import connection,connections cursor = connection.cursor() users = models.User.objects.all() jsondata = [] for i in range(1,4): user_obj = models.User.objects.filter(id = i).first() cursor.execute("""select strftime("%%s",strftime("%%Y-%%m-01",respository_trouble.ctime)) * 1000 as a,count(respository_trouble.id) as num,respository_user.username from respository_trouble,respository_user WHERE respository_user.id = respository_trouble.user_id and user_id = %s group by user_id,strftime("%%Y-%%m",respository_trouble.ctime)""",[i]) rows = cursor.fetchall() print(rows) temp = {‘name‘:user_obj.username ,‘data‘:rows} jsondata.append(temp) import json return HttpResponse(json.dumps(jsondata))
python里面的list数据通过JSON会直接转换成为list
前端生成图表
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。