Создание диаграммы gviz с AngularJS

Question

Я пытаюсь сделать эту круговую диаграмму gviz из приведенного здесь примера https://google-developers.appspot.com/chart/interactive/docs/quick_start в angularjs.

Какие услуги мне нужно написать?

Пример кода выше использует

1. Библиотека ajax google для загрузки библиотеки gviz
2. Gviz dataTable.
3. Круговая диаграмма gviz
4. document.getElementById

Кажется, мне нужно написать свой собственный сервис для каждого из них, кроме $document, Это правда? Это похоже на ужасную кучу котельной плиты = / (Дополнительный вопрос, почему обертывание как услуга - хорошая вещь?)

Может ли кто-нибудь попытаться понять, как может выглядеть сервис dataTable? Я действительно не знаю, как получить доступ к google.visualization.DataTable() "перевести" эту строку.

var data = new google.visualization.DataTable();

Answer 1

Мне бы пришлось взглянуть поближе, но я бы сказал, что вы захотите создать одну директиву. Похоже, крутой пакет графиков. Если вам нужны идеи об обёртывании компонентов в директивах, посмотрите на вики-страницу angularjs (версии 1.0.0) на github, а затем есть сторонняя группа angular-ui, в которой я участвую, это обёртывание и создание некоторых повторно используемых угловых компонентов.,

Answer 2

Вот плункер, который делает эту работу, на случай, если кому-то понадобится это сделать.

http://plunker.no.de/edit/VB4tDV