Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use Highcharts.js to realize Visualization data in django

2025-04-01 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)06/02 Report--

This article introduces how to use Highcharts.js to visualize data in django. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

New project and app

Django-admin startproject highcharts

Cd highcharts

Python manage.py startapp clusterbar

Open the highcharts folder using pycharm

Add code to the clusterbar/models.py file

Class PopulationByRegion (models.Model):

Region = models.CharField (max_length=50)

Pp1800 = models.IntegerField ()

Pp1900 = models.IntegerField ()

Pp2012 = models.IntegerField ()

Configure routin

Highcharts/urls.py file code

From django.contrib import admin

From django.urls import path

From django.urls import include

Urlpatterns = [

Path ('admin/', admin.site.urls)

Path ('clusterbar/',include (' clusterbar.urls'))

]

Create a new urls.py file under the clusterbar folder and write the code

From django.urls import path

From. Import views

Urlpatterns = [

Path ('popbyregion/',views.popbyregion,name= "popbyregion")

]

Write a view function

Write code in the views.py file of clusterbar

From django.shortcuts import render

From .models import PopulationByRegion

# Create your views here.

Def popbyregion (request):

Df = PopulationByRegion.objects.all ()

Region = []

Pp1800 = []

Pp1900 = []

Pp2012 = []

For info in df:

Region.append (info.region)

Pp1800.append (info.pp1800)

Pp1900.append (info.pp1900)

Pp2012.append (info.pp2012)

Context = {'region':region,'pp1800':pp1800,'pp1900':pp1900,'pp2012':pp2012}

Return render (request,'popbyregion.html',context=context)

Configuration template

Create a new templates folder under the highcharts folder, create a new popbyregion.html file under the templates folder and write the code

Django Highcharts Example

Highcharts.chart ('container', {

Chart: {

Type: 'column'

}

Title: {

Text: 'Historic World Population by Region'

}

XAxis: {

Categories: {{region | safe}}

}

Series: [{

Name: 'Year 1800'

Data: {{pp1800}}

}, {

Name: 'Year 1900'

Data: {{pp1900}}

}, {

Name: 'Year 2012'

Data: {{pp2012}}

}]

});

Modify the configuration file

Register for app

Add template path

Migrate database python manage.py makemigrations

Python manage migrate

Add data python manage.py shell to the database

Import csv

From clusterbar.models import PopulationByRegion

With open ('example.csv') as csvfile:

Reader = csv.DictReader (csvfile)

For row in reader:

P = PopulationByRegion (region=rwo ['continent']

Pp1800=int (row ["year_1800"])

Pp1900=int (row ['year_1900'])

Pp2012=int (row ['year_2012']))

P.save ()

Quit ()

Create an administrator to log in to the background to view the data python manage.py createsuperuser

Enter the user name and the mailbox password registration data in turn to add the code in the admin.py under the clusterbar folder.

From django.contrib import admin

From .models import PopulationByRegion

# Register your models here.

Admin.site.register (PopulationByRegion)

Start the server and you can see that the data has been added.

Install django-simpleui to beautify the background interface

Https://github.com/sea-team/simpleui#%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8

Follow the link above to configure the background like this

Enter the link http://127.0.0.1:8000/clusterbar/popbyregion/

You can see the results.

In the process, I encountered an error report.

Django.core.exceptions.ImproperlyConfigured: The included URLconf''does not appear to have any patterns in it. If you see valid patterns in the file then the issue is probably caused by a circular import.

On how to use Highcharts.js in django to achieve visualization data sharing here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report