Использование динамических данных для графиков

Question

Я стремлюсь создать сайт, который будет содержать много пользовательских данных, надеюсь. Я на первом курсе по самообучению: Python, Django, MySQL, HTML и Javascript.

Я могу просто изобразить фиктивные данные в таблице, но сейчас я собираюсь превратить эти данные в красивые красочные графики.

Я в первый день расследования, чтобы выяснить, как это сделать. Но прежде чем продолжить, я хотел бы задать несколько вопросов.

Похоже, существует много JavaScript-фреймворков для построения диаграмм, таких как Google-диаграммы и JQuery-диаграммы, и некоторые объектно-ориентированные программы для построения диаграмм, такие как Cairo Plot и matplotlib.

Фреймворки Javascript изначально кажутся хорошим простым способом сделать это. Однако, если в таблицах, где вы можете вводить переменные теги данных в теле HTML-страницы, и чтобы Javascript заставлял их выглядеть красиво, данные графика попадают в область сценариев, где переменные теги данных не совсем кажутся работать так же. Я использую Django, поэтому тег переменной выглядит так:

{{ uniquenum }}   

Q1. Должна ли это сработать, и я просто делаю это неправильно или я правильно понимаю, что переменные теги не могут попадать в область сценариев?

Q2. Можете ли вы иметь структуры Javascript для создания графиков из данных вне области <script>?

Q3. Я читал, что фреймворки Javascript становятся все более мощными, но, поскольку я буду потенциально использовать большие объемы динамических данных, я должен сосредоточиться на использовании таких программ графического стиля OO, как Cairo Plot и matplotlib, которые мне не кажутся есть такие же уровни поддержки?

Просто ищу толчок в правильном направлении.

Answer 1

Как графики (как правило) размещаются на веб-странице?

Вот обычная схема API для библиотек визуализации данных на основе JavaScript:

i. предварительно выделить div в качестве контейнера диаграммы в вашей разметке (или шаблоне);обычно с использованием идентификатора с использованием селектора идентификаторов, например:

<div id="chart1"> </div>

Часто для этих библиотек также требуется, чтобы этот контейнер был предварительно настроен с использованием свойств высоты и ширины, например,

<div id="chart1" style="height:300px;width:500px; "></div>

Библиотеки HTML5 являются специфическими для контейнера - то есть они требуют, чтобы диаграмма была помещена внутри тега canvas , например,

*1 022 * II. вызовите конструктор сюжета из включенного файла JavaScript и передайте (i) источник данных; (ii) эстетические параметры (например, метки осей) и (iii) местоположение в разметке контейнера, в котором будет храниться сюжет;обычно ожидается, что это место будет в форме селектора идентификатора.Поэтому в jqplot , например, внутри события готовности jQuery,

plot1 = $.jqplot('chart1', [dataSet1, dataSet2], chartOptions)

---

библиотек визуализации данных на основе javascript, которые я рекомендую (основываясь на использовании каждого из них для нескольких проектов).

I.обычные форматы построения графиков: полоса, линия, точка, круговая диаграмма

Среди библиотек построения графиков javascript я рекомендую основанные на jQuery опции , потому что вам нужно меньше кода для создания графикови потому что для загрузки ваших данных проще использовать AJAX-методы jQuery , например, jqplot , flot и HighCharts (трибиблиотеки, которые я рекомендую ниже), все включают в свой базовый дистрибутив полные (html, css, js) примеры графиков, демонстрирующих загрузку данных через AJAX.

• HighCharts (с открытым исходным кодом, но для платного использования требуется платная лицензия, но самый длинный и длинный список функций; активные и довольно высокие соотношения сигнал-шум на сайте HighCharts)

• flot (возможно, наиболее широко используемый)

• jqplo t (большой выбор типов графиков, высокомодульный,например ,.большая функциональность помимо основ добавляется по одному плагину за раз)

II.графики, деревья, сетевые диаграммы и т. д.

• d3 (преемникProtovis, потрясающее качество графики, богатые интерактивные элементы, анимация, не только на основе jQuery, но автор явно позаимствовал базовые синтаксические шаблоны из jQuery, отличные учебники по d3 от опытного специалиста по визуализации данных, Ян Виллем Тульп В отличие от других, упомянутых здесь, это библиотека низкого уровня, на самом деле есть (по крайней мере) несколько библиотек для построения графиков на основе d3, например, рикша от shutterstock и cube от SquareЕсли вам нужны обычные линейные / линейные графики xy, то, например, вы можете строить свои графики, например, в HighCharts, гораздо быстрее. D3 становится более интересным, поскольку варианты использования становятся более конкретными - в частности animation и неортодоксальная визуализация (диаграммы солнечных лучей, диаграммы аккордов, графики параллельных линий, географические карты и т. д.)

• RafaelJS , рендеринг в SVG, наряду с d3 и processing.js, вы можете делать что угодно (например, игры для двоих в браузере) с этой библиотекой; gRafael - это отдельная библиотека для создания обычных типов графиков (полоса, линия, круговая диаграмма)

III.графики временных рядов

• dygraphs (библиотека javascript предназначена для временногопостроение серии и ее набор функций отражают эту миссию, например, способность обрабатывать и отображать графики с большими объемами данных (> 10 000точки), широкий диапазон опций для меток тика оси времени с много вариантов форматирования

• HighStock (библиотека временных рядов от ребят из HighChart)
  
  

IV. данные в реальном времени / потоковые данные

• Графики смузи (разреженный набор функций, предназначенный только для хорошего выполнения потоковой передачи данных; HighCharts, jqplot и flot также сделайте это, но в зависимости от характера ваших данных (дисперсия, скорость) эти три библиотеки общего назначения могут не отображать данные как «колючие», что и было разработано Smoothie для устранения)

Answer 2

Если вы собираетесь работать с очень большими наборами данных (> 10000 элементов), вы, вероятно, столкнетесь с проблемами производительности, независимо от того, какую библиотеку Javascript вы выберете.

Сказав это, естьРастет число инструментов Javascript, которые динамически загружают набор данных с помощью HTTP-запроса в виде JSON, XML и т. д. flot довольно быстро и с открытым исходным кодом. Highcharts очень многофункциональный и бесплатный для некоммерческих проектов.И если вам нужно больше эзотерических визуализаций, вы должны взглянуть на d3.js .

Answer 3

Я нашел другую библиотеку диаграмм javascript, которая будет полезна для потоковой передачи данных = https://github.com/INRIA/VisualSedimentation. Код основан на d3.js, но имеет хорошую расширяемость.