Отображение диаграммы d3 в django - PullRequest
Новая
       0

Отображение диаграммы d3 в django

0 голосов
/ 30 ноября 2018

Я просматривал библиотеку NVD3 и нашел это в качестве примера на сайте: 

d3.json('cumulativeLineData.json', function(data) {
  nv.addGraph(function() {
    var chart = nv.models.cumulativeLineChart()
                  .x(function(d) { return d[0] })
                  .y(function(d) { return d[1]/100 }) //adjusting, 100% is 1.00, not 100 as it is in the data
                  .color(d3.scale.category10().range())
                  .useInteractiveGuideline(true)
                  ;

     chart.xAxis
        .tickValues([1078030800000,1122782400000,1167541200000,1251691200000])
        .tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d))
          });

    chart.yAxis
        .tickFormat(d3.format(',.1%'));

    d3.select('#chart svg')
        .datum(data)
        .call(chart);

    //TODO: Figure out a good way to do this automatically
    nv.utils.windowResize(chart.update);

    return chart;
  });
});

Изображение выглядит примерно так:
enter image description here

Проверьте демо-версию здесь: http://nvd3.org/examples/cumulativeLine.html

Файл json находится здесь: Файл Json, например
Теперь я был готов включить такие диаграммыв примере с Джанго.Поэтому я продолжил проверять реализацию Django-NVD3.Но я не смог найти ничего, связанного с этим, и документация, написанная автором, не понятна мне.

Пожалуйста, дайте мне знать, как я могу включить диаграмму d3 в рамку django в режиме реального времени.

1 Ответ

0 голосов
/ 30 ноября 2018

Django в основном является фреймворком для python.Это означает, что он создает ответы на HTML-запросы.Эти ответы обрабатываются с использованием шаблонов, которые содержат HTML-код, который создается на лету.

nvd3.js или d3.js в этом случае живут на веб-интерфейсе, то есть в браузере пользователя.Это означает, что все hvml и javascript-код nvd3.js (например, тот, который вы цитируете) входят в шаблон Django .

Чтобы использовать nvd3.js, вам потребуется загрузить библиотеки d3.js и nvd3.js javascript и соответствующие таблицы стилей .(О том, как это сделать, см. Соответствующую документацию.) Эти элементы должны перейти в другое место в шаблоне (html, куда должна идти диаграмма, css в заголовок и javascript в конце тела).

django-nvd3 - это приложение django, которое используется для упрощения использования nvd3 на внешнем интерфейсе.Это один из вариантов работы с Django и nvd3.js.Он определяет теги шаблона, которые будут включать необходимый код JavaScript и таблицы стилей в ваш шаблон.Первый тег include_chart_jscss сделает именно это и должен использоваться в разделе <head> шаблона.Второй тег load_chart сгенерирует приведенный вами javascript, фактически создавая диаграмму.Третий тег (include_container) вставит необходимые элементы HTML div (которые вы не указали в вопросах).Передавая последним тегам то же имя, браузер знает, к какому тегу div применить код JavaScript.Это не помогает распространять биты кода по шаблону.Кроме того, он не генерирует код.Это оставлено другому пакету python-nvd3, который сам опирается на шаблонизатор (Jinja2), который, вероятно, отличается от того, который вы используете с Django. В двух словах: django-nvd3 решает проблему генерации кода javascript для диаграмм nvd3, но не проблему распределения этого кода в шаблонах django.

Я предлагаю Sekizai для лучшего распределения битов кода.Позволяет разделить html, css и js бит страницы на отдельные блоки.Затем вы можете использовать простые включения, чтобы добавить диаграмму на свою веб-страницу.Во включенном файле вы можете заключить требуемый код CSS в {% addtoblock css %}, а требуемый JavaScript в {% addtoblock js %}.При использовании sekizai базовые шаблоны должны иметь эти блоки ("js" и "css"), см. Документацию Sekizai .

Конечно, это вопрос мнения, но япредпочитают использовать sekizai для распределения битов кода nvd3.js в шаблоне и предоставления диаграмм в виде включаемых шаблонов для Django (таким образом, воздерживаясь от затрат на второй механизм шаблонов).Мои шаблоны включения содержат необработанный код nvd3, взятый, например, из одного из примеров.

Я составил три гистограммы, в которых предполагается, что у вас установлен sekizai и он включен в ваши настройки INSTALLED_APPS:

  1. Python-код для функции просмотра .Не забудьте включить функцию просмотра в urls.py.Код предполагает, что файл с данными json находится в статической папке.
  2. Шаблон с именем base.html, который включает html-код отображаемой страницы.Он имеет заголовок и затем включает диаграмму.
  3. A шаблон диаграммы , представляющий собой копию кода в вопросе 1: 1, за исключением того, что некоторые параметры загружаются динамически (исходный файл, клещи).
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...