Язык программирования Python становится популярным при разработке веб-приложений. В попытке использовать это и помочь быстро развернуть безопасные и поддерживаемые веб-приложения, была разработана веб-платформа Django. Веб-фреймворк с открытым исходным кодом Django полностью основан на Python и следует архитектурному шаблону model-view-template (MVC). Фреймворк фокусируется на повторном использовании компонентов, созданных для быстрой разработки. Учитывая, что он основан на Python, фреймворк очень переносим и может работать на любой платформе, а также поддерживает несколько клиентских фреймворков, движков шаблонов и баз данных.
В этом уроке мы рассмотрим, как мы можем создавать диаграммы с помощью фреймворка Django. Мы будем использовать библиотеку Javascript FusionCharts для создания диаграмм.
Требования:
Чтобы создать диаграмму в веб-приложении, разработанном с использованием Django, вам потребуется загрузить и установить в вашей системе следующие элементы:
Примечание: Вам потребуется установить Python, чтобы начать работу с Django, а также потребуются рабочие знания Python для выполнения кода.
Шаг 1: Создание проекта
Выполните следующую команду, чтобы создать каталог myproject в текущем каталоге.
django-admin startproject myproject
Вы можете использовать команду cd в интерфейсе командной строки для перехода к нужному каталогу.
Шаг 2: Добавление зависимостей
Затем мы добавим файлы javascript FusionCharts, необходимые для визуализации диаграмм в веб-приложении.
- Создайте папку шаблона в каталоге
myproject. - Внутри папки шаблона создайте другую папку с именем
static. - Скопируйте все файлы JS, извлеченные из библиотеки FusionCharts, в эту папку.
- Чтобы сопоставить файлы javascript, создайте HTML-файл,
index.html, в папке шаблона. Этот файл будет содержать путь к каждому файлу javascript, а также выходной элемент.
FC-python wrapper {% load static %}{{ output|safe }}
- После включения путей всех необходимых зависимостей нам нужно обновить статические файлы, выполнив следующую команду
python manage.py collectstatic
- В
settings.pyфайл, обновите расположение шаблонов
'DIRS': ['fc_column2d/templates'],
Шаг 3: Создание страницы просмотра
Страница просмотра содержит конструкторы диаграмм, атрибуты, а также источник данных, необходимый для визуализации диаграммы.
- Добавьте приведенный ниже код в
view.pyфайл.
from django.shortcuts import render
from django.http import HttpResponse
# Include the `fusioncharts.py` file which has required functions to embed the charts in html page
from .fusioncharts import FusionCharts
# Loading Data from a Static JSON String
# The `chart` method is defined to load chart data from an JSON string.
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts("column2d", "ex1" , "684", "476", "chart-1", "json",
# The data is passed as a string in the `dataSource` as parameter.
"""{
"chart": {
"caption": "Most Popular Superhero on Youtube",
"baseFont": "Lato",
"captionfontsize":"18",
"subcaptionfontbold":"0",
"subcaptionfontsize":"14",
"subcaption": "Jan 2008 - September 2017",
"yaxisname": "Total time spent watching",
"captionpadding": "20",
"bgalpha": "0",
"canvasbgalpha": "0",
"showvalues": "0",
"showborder": "0",
"canvasborderalpha": "0",
"showalternatehgridcolor": "0",
"plotgradientcolor": "",
"showplotborder": "0",
"adjustDiv":"0",
"yaxisnamefontsize":"14",
"yAxisNameFontBold":"0",
"yAxisValuesPadding":"18",
"divlinealpha": "10",
"xaxislinealpha":"20",
"LabelPadding": "50",
"showlabels": "0",
"numdivlines":"4",
"showxaxisline":"1",
"plotspacepercent":"40",
"yAxisValueDecimals":"0",
"formatnumberscale": "1",
"numberscalevalue": "24,31,12",
"numberscaleunit": " days, months, years",
"palettecolors": "#3F365A",
"plotToolText": "Superhero : $label
Time Spend : $value Hours",
"defaultnumberscale": " years",
"plotFillAlpha": "90"
},
"annotations": {
"autoScale": "0",
"scaleImages": "0",
"origW": "400",
"origH": "300",
"groups": [{
"id": "user-images",
"items": [{
"id": "Batman-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/batman.png",
"x": "$dataset.0.set.0.CenterX - 18",
"y": "$dataset.0.set.0.EndY + 10",
"xScale": "75",
"yScale": "75"
}, {
"id": "Wolverine-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/wolverine.png",
"x": "$dataset.0.set.1.CenterX - 18",
"y": "$dataset.0.set.1.EndY + 10",
"xScale": "75",
"yScale": "75"
}, {
"id": "IronMan-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/ironman.png",
"x": "$dataset.0.set.2.CenterX - 18",
"y": "$dataset.0.set.2.EndY + 10",
"xScale": "75",
"yScale": "75"
}, {
"id": "Deadpool-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/deadpool.png",
"x": "$dataset.0.set.3.CenterX - 18",
"y": "$dataset.0.set.3.EndY + 10",
"xScale": "75",
"yScale": "75"
}, {
"id": "SpiderMan-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/spiderman.png",
"x": "$dataset.0.set.4.CenterX - 18",
"y": "$dataset.0.set.4.EndY + 10",
"xScale": "75",
"yScale": "75"
}, {
"id": "Thor-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/thor.png",
"x": "$dataset.0.set.5.CenterX - 18",
"y": "$dataset.0.set.5.EndY + 10",
"xScale": "75",
"yScale": "75"
}, {
"id": "SuperMan-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/superman.png",
"x": "$dataset.0.set.6.CenterX - 18",
"y": "$dataset.0.set.6.EndY + 10",
"xScale": "75",
"yScale": "75"
}, {
"id": "CaptainAmerica-icon",
"type": "image",
"url": "http://csm.fusioncharts.com/files/assets/img/captain-america.png",
"x": "$dataset.0.set.7.CenterX - 18",
"y": "$dataset.0.set.7.EndY + 10",
"xScale": "75",
"yScale": "75"
}]
}]
},
"data": [{
"label": "Batman",
"value": "85000"
}, {
"label": "Wolverine",
"value": "82000"
}, {
"label": "Iron Man",
"value": "58000"
}, {
"label": "Deadpool",
"value": "42000"
}, {
"label": "Spider Man",
"value": "36000"
}, {
"label": "Thor",
"value": "21000"
}, {
"label": "Super Man",
"value": "18000"
}, {
"label": "Captain A",
"value": "6000"
}]
}""")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {'output' : column2d.render()})
Шаг 4: Настройка файла конфигурации
- Добавьте следующий фрагмент кода в
urls.pyфайл, чтобы автоматически установить URL-адрес для отображения диаграммы.
from django.conf.urls import url
from.import views
urlpatterns = [
url(r'^$', views.chart, name = 'demo'),
]
- Чтобы обновить объект
STATIC FILES_DIRS, включите его вsettings.pyфайл.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "fc_column2d/templates/static"),
]
Шаг 5: Визуализация диаграммы
Теперь, когда весь код на месте, пришло время визуализировать диаграмму.
- Выполните следующую команду в интерфейсе оболочки
python manage.py runserver
Если вы внимательно следили за шагами, ваш результат должен походить на диаграмму, показанную на рисунке ниже:
Если вы видите какие-либо ошибки в своем коде, вы можете загрузить полный исходный код образца проекта, который мы создали для этого урока.