Check various ways of displaying visual charts in Django

AirPython 2021-04-08 12:29:26
check various ways displaying visual


image

1. Preface

Hello everyone , I'm Ango !

Use Django Conduct Web When developing , There is often a need to show charts , In order to enrich the data display of the web page

Common solutions include :Highcharts、Matplotlib、Echarts、Pyecharts, After that 2 The two schemes are used more frequently

This article will talk about Django combination  Echarts、Pyecharts The specific process of chart visualization

2. Echarts

Echarts Baidu open source is a very good visualization framework , It can show very complex chart types

Take a simple bar chart as an example , Tell me about Django Integrate Echarts The process of

First , In a certain App Of views.py Write view functions

When the request method is POST when , Define the data values in the histogram , And then use  JsonResponse Return the data

from django.http import JsonResponse
from django.shortcuts import render
def index_view(request):
if request.method == "POST":
# Histogram data
datas = [5, 20, 36, 10, 10, 20]
# Return the data
return JsonResponse({'bar_datas': datas})
else:
return render(request, 'index.html', )

In the template file , Import  Echarts Dependence

PS: You can use local JS File or  CDN Accelerated Service

{# Import js and echarts rely on #}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.js"></script>

then , rewrite window.onload function , Send a  Ajax Request to back end , utilize Echarts Show the returned results in the chart

​<script>
// Histogram
function show_bar(data) {
// Control
var bar_widget = echarts.init(document.getElementById('bar_div'));
// Set up option
option = {
title: {
text: ' A simple bar chart '
},
tooltip: {},
legend: {
data: [' sales ']
},
xAxis: {
type: 'category',
data: [" shirt ", " Woolen sweater ", " Snow spins unlined upper garment ", " The trousers ", " High heels ", " socks "]
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'bar'
}]
};
bar_widget.setOption(option)
}
// Display load call
window.onload = function () {
// send out post request , The address is index(Jquery)
$.ajax({
url: "/",
type: "POST",
data: {},
success: function (data) {
// Histogram
show_bar(data['bar_datas']);
// The result returned by the back end
console.log(data)
}
})
}
</script>

Last , Write routing URL, Run the project

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('',include('index.urls')),
​ path('admin/', admin.site.urls),
]

Find out , The front page shows a simple bar chart

image

For more complex graphical displays, please refer to the official

https://echarts.apache.org/examples/zh/index.html

3. Pyecharts

Pyecharts It's a utility model Python Yes Echarts Open source framework after repackaging

comparison Echarts,Django Integrate Pyecharts Faster 、 convenient

Django Integrate Pyecharts It only needs 4  Step

3-1   Installation dependency

#  Installation dependency
pip(3) install pyecharts

3-2   Copy  pyecharts Template file to the project

Put it in a virtual environment  pyecharts Copy the template file of the project to the template folder of the project

For example, the local path is as follows :

/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/

image

3-3   Write view functions , Rendering the chart

In the view file , Use pyecharts Library built-in classes  Bar Create a histogram

# Create your views here.
from django.http import HttpResponse
from jinja2 import Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig
CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./index/templates"))
from pyecharts import options as opts
from pyecharts.charts import Bar
# http://127.0.0.1:8000/demo/
def index(request):
c = (
Bar()
.add_xaxis([" shirt ", " Woolen sweater ", " Snow spins unlined upper garment ", " The trousers ", " High heels ", " socks "])
.add_yaxis(" merchants A", [5, 20, 36, 10, 75, 90])
.add_yaxis(" merchants B", [15, 25, 16, 55, 48, 8])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar- Basic example ", subtitle=" I'm the subtitle "))
)
return HttpResponse(c.render_embed())

3-4   Run the project

Run the project , The generated histogram is as follows :

image

This is just the simplest example , More complex charts and front and back separation 、 Updated example

You can refer to the official website :

https://pyecharts.org/#/zh-cn/web_django?id=django- Fore and aft end separation

4. Last

This paper introduces Django Rapid integration Echarts and Pyecharts Basic steps

In actual projects , Some complicated charts 、 Front end and back end data updates can be expanded by referring to the official website

I have uploaded the complete code to the background , Official account 「 AirPython 」 after , Reply key 「 210406 」 obtain

If you think the article is good , Please   give the thumbs-up 、 Share 、 Leaving a message.   Next , Because this will be the strongest driving force for me to continue to output more quality articles !

版权声明
本文为[AirPython]所创,转载请带上原文链接,感谢
https://pythonmana.com/2021/04/20210408114459357n.html

  1. Python spatial analysis | 01 using Python to calculate global Moran's index
  2. python入门教程13-05 (python语法入门之数据备份、pymysql模块)
  3. Introduction to Python 13-05 (data backup and pymysql module of introduction to Python syntax)
  4. pandas如何操作Excel?还不会的,看此一篇足矣
  5. How does panda operate excel? Not yet. This is enough
  6. 用python连接数据库模拟用户登录
  7. Using Python to connect database to simulate user login
  8. python入门教程13-04 (语法入门之记录相关操作)
  9. Introduction to Python 13-04
  10. python入门教程13-03 (python语法入门之表相关操作)
  11. Introduction to Python 13-03
  12. python的多线程的网络爬虫,待改进
  13. Python multithreaded web crawler, to be improved
  14. 常见加密算法的Python实现:
  15. Python implementation of common encryption algorithms:
  16. python刷题-核桃的数量
  17. Number of walnuts
  18. Python爬虫知乎文章,采集新闻60秒
  19. Python crawler knows articles and collects news for 60 seconds
  20. Python爬虫知乎文章,采集新闻60秒
  21. Python crawler knows articles and collects news for 60 seconds
  22. bbox_overlaps python
  23. bbox_ overlaps python
  24. 7-43 jmu-python-字符串异常处理 (20 分)
  25. 7-43 JMU Python string exception handling (20 points)
  26. n行Python代码系列:两行代码实现视频文件转成系列图片输出
  27. N-line Python code series: two lines of code to achieve video files into a series of pictures output
  28. python-阶乘计算
  29. Python factorial calculation
  30. Python实现定时发送微信消息
  31. python爬取英雄联盟所有英雄皮肤海报
  32. Sending wechat messages regularly with Python
  33. Python crawls all hero skin posters of hero League
  34. 上手Pandas,带你玩转数据(4)-- 数据清洗
  35. Hands on pandas, take you to play with data (4) -- data cleaning
  36. Python继续霸榜,上古语言Cobol重获关注,IEEE 2020编程语言榜单揭晓
  37. 教你用 Python 下载手机小视频
  38. Python continues to dominate the list, ancient language COBOL regains attention, IEEE 2020 programming language list announced
  39. How to download small video of mobile phone with Python
  40. 如何用 Python 在京东上抢口罩
  41. How to use Python to grab masks in Jingdong
  42. arcgis10.2自带的python安装第三方库
  43. 学习Python,你看这篇就够了 | 【详细】Python基础(二)
  44. ArcGIS 10.2 comes with a third-party library for installing Python
  45. Learn python, you see this is enough | [detailed] Python Foundation (2)
  46. 盘点 Django 展示可视化图表的多种方式(建议收藏)
  47. 第123天: Web 开发 Django 管理工具
  48. 盘点 Django 展示可视化图表的多种方式(建议收藏)
  49. python utc时间转北京时间
  50. 想在Python中将Excel文件转换为PDF?来看看这份Aspose.Cells指南
  51. [practice] Python nn.Transformer Mask understanding of
  52. anchors_plane python
  53. python逗号bug
  54. 第115天:Python 到底是值传递还是引用传递
  55. 第118天:Python 之对象的比较与拷贝
  56. 第119天:Python 爬取豆瓣电影 top 250
  57. 从 0 学习 Python 0 - 120 大合集总结
  58. 第124天: Web 开发 Django 模板
  59. Check various ways of displaying visual charts in Django
  60. Python自动化运维工具-Fabric部署及使用总结