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})
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

// 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)
url: "/",
type: "POST",
data: {},
success: function (data) {
// Histogram
show_bar(data['bar_datas']); // The result returned by the back end

Last , Write routing URL, Run the project

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

Find out , The front page shows a simple bar chart

For more complex graphical displays, please refer to the official


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 :


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 #
def index(request):
c = (
.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 :

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 !

Inventory Django There are many ways to present visual charts ( Recommended collection ) More articles about

  1. Django There are many ways of cache configuration

    django There are many ways to configure your cache , It mainly includes the following : 1. Development debugging mode 2. Memory mode 3. Working with files 4. Use the database directly 5. Use redis perhaps memcache Here is mainly to record those not commonly used , But in micro ...

  2. JFreeChart And AJAX+JSON+ECharts Two processing methods generate hot word statistics visualization chart

    The idea of this article : Yes HDFS The acquired data is processed by two different visualization charts . The first one is JFreeChar Visual processing generates image files to view . The second kind AJAX+JSON+ECharts Realize the visualization chart , On the browser .   Yes ...

  3. ECharts- be based on Canvas, pure Javascript Chart Library , Provide intuitive , vivid , Interactive , Customizable data visualization chart

    ECharts http://ecomfe.github.com/echarts be based on Canvas, pure Javascript Chart Library , Provide intuitive , vivid , Interactive , Customizable data visualization chart . Innovative drag and drop recalculation ...

  4. Python call matplotlib Implementation of interactive data visualization chart case

    Interactive data visualization charts are New IT An application direction of new technology , in the past , Users want to view data on the web page , The basic way is to display a table on the page , Yes, and indeed , Show the data in the form of a table , The amount of data displayed will be relatively large , however , ...

  5. Data visualization charts ECharts

    Introduce : ECharts It's based on ZRender( Lightweight Canvas Class library ) Pure javascript Chart Library , Provide interactive . Personalized data visualization chart . ECharts Provides a line chart . Histogram . Scatter plot . The pie chart .K Line graph , ...

  6. vue-cli+v-charts Realize the visualization chart of mobile terminal

    v-charts Is the team open source based on Vue and Echarts Chart tools for , In the use of echarts When generating a chart , Often need to do tedious data type conversion . Modify complex configuration items ,v-charts It's just to solve this problem ...

  7. Visual chart Library --goJS

    GoJS yes Northwoods Software Products .Northwoods Software Founded in 1995 year , Focus on interaction diagram controls and class libraries . Four of its products : GoJS: Used in HTML To create an interaction diagram on the java ...

  8. Python Connect MySQL There are many ways to create a database

    The last article shared windows download mysql5.7 Compression pack configuration installation mysql Later, you can choose ① Create a database locally , Use navicat The tool exports the database of the remote test server to the local , For learning to operate , And does not affect the test server ...

  9. Elasticsearch-2.4.3 Of 3 Node installation ( There are many ways to explain in detail )( contain head、kopf、marvel、shield and watcher Plug in installation and use )

    Premise : Elasticsearch-2.4.3 The download ( Graphic, ) Elasticsearch-2.4.3 Single node installation of ( There are many ways to explain in detail ) I'm here , With ...

  10. vue Visual chart be based on Echarts Packaged v-charts brief introduction

    **vue Visual chart be based on Echarts Packaged v-charts** Another new demand of the company in the near future , To do an order and sales statistics project , We need to use visual charts to show the data more intuitively . The first thing I think about is Echarts, Everyone knows ...

Random recommendation

  1. Use django Development blog process record 2—— The realization of blog home page and blog details

    1. What is? CBV(Class-based views) 2. Blog home page and blog details to achieve 1. What is? CBV What is? CBV? To put it bluntly, it used to be the function that the view returned the response for processing the request , With cbv Then we can use classes to handle requests and ...

  2. JS, Pagination

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  3. jQuery Select all check boxes and select none

    <script type="text/javascript"> $(function(){ // Future generations $("#CheckedAll").click( ...

  4. web Front end security --- Reading notes

    web Front end security --- Reading notes I've seen it roughly Web Front end hacking technology revealed the first two chapters , Because of their own front-end skill is not deep , Of course, it's also a new front-end security issue , So there are still some problems that I don't understand . The book I saw in Douban , The name is really a bit fat ...

  5. css3 Animation from entry to mastery

    What is? css3 Animation ? adopt CSS3, We can create animation , This can replace animated pictures in many web pages .Flash Animation and JavaScript. CSS3 Brought round corners , translucent , shadow , The gradient , New features such as multi background images , It's easy ...

  6. Python Exam Practice

    1. The complexity of the algorithm is divided into : Time complexity and space complexity The advantages and disadvantages of an algorithm are mainly measured from two aspects: the execution time of the algorithm and the required storage space . Time complexity : It refers to the amount of computation required to execute the algorithm , That is, the execution time of the algorithm   ( Be careful : It's the implementation of the algorithm ...

  7. Build Tool

    building tool: One .building tools Why mainstream ? Gradle It's one of the most popular building tools ,Android Studio What's integrated in is Gradle, And aim at Androi ...

  8. web Machine test

    test : <html><style> </style><title>Demo</title> <body><div > ...

  9. c++ Step through the assembly code 【 turn 】

    form here use gdb Look at assembly code , use disassemble and x command . nexti, stepi It can be executed in one step Here's an example : ---------------------------- ...

  10. read command

    read Used to receive standard input #!/bin/bash read -t -p "Please input a number:" number echo $number // Put the keyboard in ...