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

Оказалось, что я где-то поменялся широтой и долготой. Вот код, который я в итоге использовал:

// check for sane span values
if (currentRegion.span.latitudeDelta <= 0.0f || currentRegion.span.longitudeDelta <= 0.0f) {
    currentRegion.span.latitudeDelta = 1.0f;
    currentRegion.span.longitudeDelta = 1.0f;
}
// check for sane center values
if (currentRegion.center.latitude > 90.0f || currentRegion.center.latitude < -90.0f ||
    currentRegion.center.longitude > 180.0f || currentRegion.center.longitude < -180.0f
    ) {
    // Take me to Tokyo.
    currentRegion.center.latitude = 35.4f;
    currentRegion.center.longitude = 139.4f;
}

Чтобы проиллюстрировать, почему специализация шаблона функции важна, рассмотрим функцию шаблона std:: swap . По умолчанию std:: swap (x, y) по существу делает:

T temp = x;
x = y;
y = temp;

, но это может быть неэффективно, поскольку предполагает создание дополнительной копии x и может выполнять дополнительное копирование в присвоениях. Это особенно плохо, если x велик (например, если это std:: vector с множеством элементов). Кроме того, каждая из вышеперечисленных строк может завершиться сбоем и вызвать исключения, потенциально оставляя x и y в плохом, несогласованном состоянии.

Для решения этой проблемы многие классы предоставляют собственные методы swap (включая std:: vector ), которые вместо этого обменивают указатели на свои внутренние данные. Это более эффективно и может быть гарантировано никогда не потерпеть неудачу.

Но теперь у вас есть случай, когда вы можете использовать std:: swap (x, y) для некоторых типов, но вам нужно вызвать x.swap (y) для других типов. Это сбивает с толку, и это плохо для шаблонов, поскольку они не смогут поменять местами два объекта общим, согласованным способом.

Но std:: swap может быть специализированным для вызова x.swap (y) при вызове определенных типов. Это означает, что вы можете использовать std:: swap везде и (надеюсь) ожидать, что он будет хорошо себя вести.

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

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

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

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

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

Ну я думаю, что это довольно круто.

FusionWidgets v3

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

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