溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

django中怎么使用Highcharts.js實現(xiàn)可視化數(shù)據(jù)

發(fā)布時間:2021-08-03 14:17:59 來源:億速云 閱讀:150 作者:Leah 欄目:大數(shù)據(jù)

這篇文章給大家介紹django中怎么使用Highcharts.js實現(xiàn)可視化數(shù)據(jù),內(nèi)容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。


新建project和app

django-admin startproject highcharts
cd highcharts
python manage.py startapp clusterbar
   使用pycharm打開highcharts文件夾

在clusterbar/models.py文件里添加代碼

class PopulationByRegion(models.Model):
   region = models.CharField(max_length=50)
   pp1800 = models.IntegerField()
   pp1900 = models.IntegerField()
   pp2012 = models.IntegerField()
   配置路由

highcharts/urls.py文件代碼

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')),
]
 

在clusterbar文件夾下新建urls.py文件,寫入代碼

from django.urls import path
from . import views

urlpatterns = [
   path('popbyregion/',views.popbyregion,name="popbyregion"),
]
   編寫視圖函數(shù)

在clusterbar的views.py文件中寫入代碼

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)
   配置模板

在highcharts文件夾下新建templates文件夾,在templates文件夾下新建popbyregion.html文件 并寫入代碼

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Django Highcharts Example</title>
</head>
<body>
 <div id="container"></div>
 <script src="https://code.highcharts.com/highcharts.src.js"></script>
 <script>
   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 }}
       }]
   });
 </script>
</body>
</html>
   修改配置文件

注冊app 

添加模板路徑

 遷移數(shù)據(jù)庫
python manage.py makemigrations
python manage migrate
   給數(shù)據(jù)庫中添加數(shù)據(jù)
python manage.py shell
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()
   創(chuàng)建管理員,登錄后臺查看數(shù)據(jù)
python manage.py createsuperuser
 

依次輸入用戶名、郵箱密碼 注冊數(shù)據(jù) 在clusterbar文件夾下的admin.py中添加代碼

from django.contrib import admin
from .models import PopulationByRegion
# Register your models here.

admin.site.register(PopulationByRegion)
 

啟動服務器可以看到數(shù)據(jù)已經(jīng)添加過來了

 安裝django-simpleui美化后臺界面

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

按照以上鏈接進行配置 后臺變成了這樣

django中怎么使用Highcharts.js實現(xiàn)可視化數(shù)據(jù)

輸入鏈接http://127.0.0.1:8000/clusterbar/popbyregion/

可以看到結果


django中怎么使用Highcharts.js實現(xiàn)可視化數(shù)據(jù)

過程中我遇到了一個報錯 

django.core.exceptions.ImproperlyConfigured: The included URLconf '<module 'clusterbar.urls' from 'C:\Users\mingy\Desktop\Python\Django_Practice\highcharts\clusterbar\urls.py'>' 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. 


關于django中怎么使用Highcharts.js實現(xiàn)可視化數(shù)據(jù)就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI