网站建设进什么分录,成都住建局官网智慧工地,南宁公司网站建设公司哪家好,广东网站设计的公司专栏系列#xff1a;Django学习教程
前言 highchart#xff0c;国外。 echarts#xff0c;国内。
本项目集成 hightchart和echarts图表库实现数据统计功能。
包括#xff1a;折线图#xff0c;柱状图#xff0c;饼图和数据集图。
效果图
echats Highcharts 源代码…专栏系列Django学习教程
前言 highchart国外。 echarts国内。
本项目集成 hightchart和echarts图表库实现数据统计功能。
包括折线图柱状图饼图和数据集图。
效果图
echats Highcharts 源代码 编写模板Template chart_html.html echarts方案通过jQuery自带ajax向服务端发送请求获取折线图、柱状图、饼图数据。
注意需要去echats官方下载echarts.js文件并引入到模板。
{% extends layout.html %}
{% load static %}{% block content %}div classcontainerdiv classpanel panel-defaultdiv classpanel-heading折线图/divdiv classpanel-bodydiv idm1 stylewidth: 100%;height: 300px/div/div/divdiv classrowdiv classcol-sm-8div classpanel panel-defaultdiv classpanel-heading柱状图/divdiv classpanel-bodydiv idm2 stylewidth: 100%;height: 400px;/div/div/div/divdiv classcol-sm-4div classpanel panel-defaultdiv classpanel-heading饼图/divdiv classpanel-bodydiv idm3 stylewidth: 100%;height: 400px;/div/div/div/div/div/div
{% endblock %}{% block js %}script src{% static js/echarts.js %}/scriptscript typetext/javascript$(function () {initLine();initBar();initPie();})/*** 初始化折线图*/function initLine() {var myChart echarts.init(document.getElementById(m1));var option {title: {text: 分公司业绩图,left: center,},tooltip: {trigger: axis},legend: {data: [],bottom: 0},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: category,boundaryGap: false,data: []},yAxis: {type: value},series: []};$.ajax({url: /chart/line/,type: get,dataType: JSON,success: function (res) {if (res.status) {option.legend.data res.data.legend;option.xAxis.data res.data.x_axis;option.series res.data.series_list;myChart.setOption(option);}}})}/*** 初始化柱状图*/function initBar() {// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(m2));// 指定图表的配置项和数据var option {title: {text: 员工业绩阅读汇总信息,textAlign: auto,left: center,},tooltip: {},legend: {data: [], // 后台获取bottom: 0},xAxis: {data: [] // 后台获取},yAxis: {},series: [] // 后台获取};$.ajax({url: /chart/bar/,type: get,dataType: JSON,success: function (res) {// 将后台返回的数据更新到option中。if (res.status) {option.legend.data res.data.legend;option.xAxis.data res.data.x_axis;option.series res.data.series_list;// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}}})}/*** 初始化饼状图*/function initPie() {// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(m3));var option {title: {text: 部门人数占比,subtext: Johnny分公司,left: center},tooltip: {trigger: item},legend: {bottom: 0},series: [{name: 预算,type: pie,radius: 50%,data: [{value: 1048, name: IT部门},{value: 735, name: 运营},{value: 580, name: 新媒体},],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]};$.ajax({url: /chart/pie/,type: get,dataType: JSON,success: function (res) {if (res.status) {option.series[0].data res.data;myChart.setOption(option);}}})}/script
{% endblock %}highcharts.html highcharts由于是国外网站非常慢我这里使用CDN直接远程link hightcharts.js文件。
{% extends layout.html %}{% block content %}div classcontainerdiv idm1 stylewidth: 100%;height:400px;/div/div
{% endblock %}{% block js %}script srchttp://cdn.highcharts.com.cn/highcharts/highcharts.js/scriptscript// 图表配置var options {chart: {type: column},title: {text: 月平均降雨量},subtitle: {text: 数据来源: WorldClimate.com},xAxis: {categories: [一月, 二月, 三月, 四月, 五月, 六月, 七月, 八月, 九月, 十月, 十一月, 十二月],crosshair: true},yAxis: {min: 0,title: {text: 降雨量 (mm)}},tooltip: {// head 每个 point footer 拼接成完整的 tableheaderFormat: span stylefont-size:10px{point.key}/spantable,pointFormat: trtd stylecolor:{series.color};padding:0{series.name}: /td td stylepadding:0b{point.y:.1f} mm/b/td/tr,footerFormat: /table,shared: true,useHTML: true},plotOptions: {column: {borderWidth: 0}},series: [{name: 东京,data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}, {name: 纽约,data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]}, {name: 伦敦,data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]}, {name: 柏林,data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]}]};// 图表初始化函数var chart Highcharts.chart(m1, options);/script{% endblock %}编写视图函数 charts.py 里面包含echarts和highcharts的函数。
from django.shortcuts import render
from django.http import JsonResponsedef chart_list(request): 数据统计页面 return render(request, chart_list.html)def chart_bar(request): 构造柱状图的数据 # 数据可以去数据库中获取legend [Smith, Johnny]series_list [{name: Smith,type: bar,data: [15, 20, 36, 10, 10, 10]},{name: Johnny,type: bar,data: [45, 10, 66, 40, 20, 50]}]x_axis [1月, 2月, 4月, 5月, 6月, 7月]result {status: True,data: {legend: legend,series_list: series_list,x_axis: x_axis,}}return JsonResponse(result)def chart_pie(request): 构造饼图的数据 db_data_list [{value: 2048, name: IT部门},{value: 1735, name: 运营},{value: 580, name: 新媒体},]result {status: True,data: db_data_list}return JsonResponse(result)def chart_line(request):legend [上海, 广西]series_list [{name: 上海,type: line,stack: Total,data: [15, 20, 36, 10, 10, 10]},{name: 广西,type: line,stack: Total,data: [45, 10, 66, 40, 20, 50]}]x_axis [1月, 2月, 4月, 5月, 6月, 7月]result {status: True,data: {legend: legend,series_list: series_list,x_axis: x_axis,}}return JsonResponse(result)def highcharts(request): highcharts示例 return render(request, highcharts.html)from django.forms import ModelForm, Form
from django import forms
from app01 import models# class TTModelForm(Form):
# name forms.CharField(label用户名)
# ff forms.FileField(label文件)
#
#
# def tt(request):
# if request.method GET:
# form TTModelForm()
# return render(request, change.html, {form: form})
# form TTModelForm(datarequest.POST, filesrequest.FILES)
# if form.is_valid():
# print(form.cleaned_data)
# return render(request, change.html, {form: form})class TTModelForm(ModelForm):class Meta:model models.XXfields __all__def tt(request):instance models.XX.objects.all().first()if request.method GET:form TTModelForm(instanceinstance)return render(request, tt.html, {form: form})form TTModelForm(datarequest.POST, filesrequest.FILES)if form.is_valid():form.save()return render(request, tt.html, {form: form})配置路由 # 数据统计path(chart/list/, chart.chart_list),path(chart/bar/, chart.chart_bar),path(chart/pie/, chart.chart_pie),path(chart/line/, chart.chart_line),path(chart/highcharts/, chart.highcharts), 如果需要完整源码可以评论区给我留言。
如果本文对你有帮助记得点赞关注你的支持是我最大的动力
