Использование Google API визуализации и закрытия для создания BarChart - PullRequest
0 голосов
/ 15 октября 2010

У меня есть веб-страница, которая использует API визуализации Google для генерации временной шкалы, но теперь, когда я пытаюсь добавить в нее некоторые элементы jQuery, все рушится.Итак, я пытаюсь сделать это с помощью Closure.Однако я не могу найти какие-либо примеры использования API визуализации в разделе «Закрытие». Кто-нибудь знает, где я могу найти какие-либо примеры?

То, что я получил сейчас, основано на (читайте скопированную информацию оптом) Пример аннотированной временной шкалы Google с небольшиммодификация для загрузки данных через AJAX как JSON.Прямо сейчас AJAX-запрос к жестко закодированному URL, и я пытаюсь заставить его создать URL из формы .


Я нашел, как делать временные линии:

goog.require('gviz.AnnotatedTimeLine');
goog.require('gviz.DataTable');
goog.require('gviz.DataView');

//...

var dataTable = new gviz.DataTable(json_string, 0.6);
var ChartDiv = document.getElementById(chart_id);
chart = new gviz.AnnotatedTimeLine(ChartDiv);
chart.draw(dataTable, {'displayAnnotations': true});

К сожалению, я еще не нашел, как сделать гистограмму / столбчатую диаграмму (запрос «gviz.BarChart» приводит к ошибкам времени компиляции).


Что получилось:

В HTML:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="My.js"></script> 
<script type="text/javascript">
  google.load("visualization", "1", {packages:["columnchart"]})
  var ChartGen = function(x) {
    return new google.visualization.ColumnChart(x);
  }
  drawBar(ChartGen);
</script>

В JS:

function drawBar(Lambda) {
  dataTable = new gviz.DataTable(json_string, 0.6);
  var ChartDiv = document.getElementById('chart');
  chart = Lambda(ChartDiv);
  chart.draw(dataTable, {});
}

Ответы [ 2 ]

1 голос
/ 04 января 2012

библиотека закрытия предоставляет goog.ui.ServerChart.

http://closure -library.googlecode.com / svn / docs / class_goog_ui_ServerChart.html

См.демонстрационный пример того, как его использовать:

http://closure -library.googlecode.com / svn / trunk / closure / goog / demos / serverchart.html

1 голос
/ 23 октября 2010

Перейдите к Мастеру диаграмм Google и щелкните нужный стиль диаграммы.

На следующей странице справа есть кнопка «Вставить с помощью API визуализации». Нажав на это, вы получите код, который вам нужен. Если вы хотите настроить диаграмму, вы можете сделать это до нажатия этой кнопки.

...