Какой лучший способ программной визуализации дорожной карты в Интернете?

У нас есть список результатов в базе данных по ряду проектов с точками данных:

  • проект
  • функция
  • Дата доставки

Я хотел найти лучший способ визуализировать это в Интернете в виде графика. Кто-нибудь может предложить какие-либо хорошие способы сделать это? я

В идеале я хотел бы иметь возможность щелкнуть по пункту, который затем может перейти на страницу сведений, которая имеется у нас для каждого описания проекта и т. Д.

Источник

4 ответа

Решение

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

API визуализации Google

Прежде всего я хотел бы взглянуть на API визуализации Google. В частности, аннотированная временная шкала визуализации. Это на самом деле очень похоже на временную шкалу, используемую на веб-сайте финансов Google. Используя это представление, каждый проект может представлять собой горизонтальную линию поперек представления с соответствующими вехами, отмеченными для каждого проекта. Обратите внимание, что маркеры являются интерактивными. Поскольку это все Javascript, вы также можете иметь кросс-визуальные элементы управления, поэтому, щелкнув что-нибудь на временной шкале, вы можете изменить другую визуализацию на той же странице, например.

На самом деле вы можете попробовать различные конфигурации всех доступных визуализаций с помощью Google Code Playground. Это должно предоставить вам простой способ проверить, соответствует ли это (или другое) вашим требованиям.

Я экспериментировал с игровой площадкой кода. Попробуйте код ниже, если хотите. Вы можете скопировать / вставить его в редактор кода детской площадки.

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Project');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Project');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addRows(7);
  data.setValue(0, 0, new Date(2008, 1 ,1));
  data.setValue(0, 1, 1);
  data.setValue(0, 2, 'P1:MS1');
  data.setValue(0, 3, 'Project begins');
  data.setValue(1, 0, new Date(2008, 1 ,2));
  data.setValue(1, 1, 1);
  data.setValue(1, 4, 2);
  data.setValue(1, 5, 'P2:MS1');
  data.setValue(1, 6, 'Project begins');
  data.setValue(2, 0, new Date(2008, 1 ,3));
  data.setValue(2, 1, 1);
  data.setValue(2, 4, 2);
  data.setValue(3, 0, new Date(2008, 1 ,4));
  data.setValue(3, 1, 1);
  data.setValue(3, 4, 2);
  data.setValue(3, 5, 'P2:MS2');
  data.setValue(3, 6, 'Completed development');
  data.setValue(4, 0, new Date(2008, 1 ,5));
  data.setValue(4, 1, 1);
  data.setValue(4, 2, 'P1:MS2');
  data.setValue(4, 3, 'Completed testing');
  data.setValue(4, 4, 2);
  data.setValue(5, 0, new Date(2008, 1 ,6));
  data.setValue(5, 1, 1);
  data.setValue(5, 4, 2);
  data.setValue(6, 0, new Date(2008, 1 ,7));
  data.setValue(6, 4, 2);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
    document.getElementById('visualization'));
    annotatedtimeline.draw(data, {
                            'displayAnnotations': true,
                            'displayExactValues': true,
                            'displayRangeSelector' : false,
                            'displayZoomButtons': false,
                            'legendPosition': 'newRow',
                            'max': 3,
                            'min': 0,
                            'scaleType': 'allfixed',
                            'thickness': 2,
                           });
}

API Google Charts

Другой вариант - использовать Google Charts API для создания диаграммы Ганта. Это немного сложнее, поскольку у него нет визуализации для этого из коробки. Однако, используя горизонтальную гистограмму, можно было бы вращать свою собственную. В этой статье рассматриваются шаги, необходимые для создания диаграммы Ганта, которая выглядит примерно так:

Диаграмма Ганта с использованием Google Charts API

Интересно отметить, что приведенная выше диаграмма Ганта динамически генерируется через API диаграмм с использованием URL. Попробуйте нажать на URL ниже:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Ну, я думаю, это круто.

FusionWidgets v3

В качестве последнего предложения вы можете взглянуть на FusionWidgets, который имеет несколько очень мощных опций визуализации. Все их виджеты основаны на flash. Это указано в последнюю очередь, потому что это не с открытым исходным кодом и не бесплатно. Я не использовал его лично, в отличие от двух выше, но примеры выглядят великолепно.

Я надеюсь, что эти предложения помогут.

Источник

Используйте веб-виджет временной шкалы. Это бесплатно и с открытым исходным кодом.

http://img24.imageshack.us/img24/1838/captureky.png

Изменить: вы можете поиграть с элементом управления с таблицей документов Google, если вы еще не уверены, что можете погрузиться в него http://spreadsheets.google.com/pub?key=pO3Ze62OAU2Ev1xfh3TWsWA

Источник

Вот некоторые инструменты, которые могут быть полезны для такого рода задач:

вспышка

Javascript

Источник

Вы пробовали управлять Daypilot? Есть бесплатная версия, вы можете попробовать.

Источник
Другие вопросы по тегам