Похоже, вам нужно больше после просмотра диаграммы Ганта, хотя, если вы просто хотите отметить дату, когда должен быть пройден этап, тогда будет работать временная шкала.
API визуализации Google
Прежде всего, я хотел бы взглянуть на API визуализации Google . В частности, аннотированная временная шкала визуализации . На самом деле это очень похоже на график времени, используемый на веб-сайте Google finance . Используя это представление, каждый проект может представлять собой горизонтальную линию поперек представления с соответствующими вехами, отмеченными для каждого проекта. Обратите внимание, что маркеры являются интерактивными. Поскольку это все 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,
});
}
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. Это указано в последнюю очередь, потому что это не с открытым исходным кодом и не бесплатно. Я не использовал его лично, в отличие от двух выше, но примеры выглядят великолепно.
Надеюсь, эти предложения помогут.