Создание типов диаграмм

На этой странице описывается, как разработать собственный тип диаграммы и сделать его доступным для пользователей.

Аудитория

На этой странице предполагается, что вы прочитали страницу «Использование диаграмм» . Также предполагается, что вы знакомы с JavaScript и объектно-ориентированным программированием. В Интернете доступно множество руководств по JavaScript .

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

Диаграммы предоставляются пользователю через созданную вами библиотеку JavaScript. Вот шаги для создания библиотеки диаграмм:

1. Выберите пространство имен для вашего кода. На других страницах будет размещаться ваш код; вам следует стараться избегать конфликтов имен.
2. Реализуйте свой объект диаграммы. Реализуйте объект JavaScript, который предоставляет следующее:
   • Конструктор,
   • Метод draw() для рисования объекта внутри элемента DOM, передаваемого конструктору.
   • Любые другие дополнительные стандартные методы, которые может использовать клиент, например getSelection() и
   • Любые пользовательские методы, которые вы хотите предоставить своим клиентам.
3. [ Необязательно ] Реализуйте любые события , которые вы хотите инициировать, чтобы клиент мог их перехватить.
4. Напишите документацию для вашей диаграммы. Если вы не задокументируете это, люди, вероятно, не смогут встроить это.
5. Опубликуйте свою диаграмму в галерее диаграмм.

Кончик

• Вы можете загрузить класс API goog.visualization и определения методов, чтобы включить автозаполнение в вашей IDE (редакторе кода). Загрузите файл с http://www.google.com/uds/modules/gviz/gviz-api.js и сохраните его в своем проекте. Большинство IDE автоматически индексируют его и включают автодополнение, хотя ваша IDE может отличаться. Обратите внимание, что файл не всегда может быть актуальным; проверьте справочные страницы для получения самой последней информации по API.

Выберите пространство имен

Ваша диаграмма может быть встроена на страницу, на которой размещены другие диаграммы или другой несвязанный код JavaScript. Чтобы избежать конфликтов имен с другими именами кода или классов CSS, вам следует выбрать уникальное пространство имен для кода диаграммы. Хорошим выбором пространства имен является URL-адрес, который вы будете использовать для размещения вашего сценария (за исключением WWW и любых расширений). Так, например, если ваша диаграмма будет опубликована на сайте www.example.com, вы должны использовать example в качестве своего уникального пространства имен. Вы можете добавить дополнительные суффиксы, разделенные . метки для дальнейшей группировки диаграммы (все диаграммы Google имеют пространство имен google.visualization ). Используйте объект пространства имен для хранения объекта диаграммы, а также любых глобальных переменных, которые могут вам понадобиться.

Вот пример создания объекта пространства имен для хранения класса диаграммы MyTable, а также любых необходимых глобальных переменных:

// Namespace, implemented as a global variable.
var example = {};

// MyTable class constructor.
example.MyTable = function(container) {
  // ...
}

// MyTable.draw() method.
example.MyTable.prototype.draw = function(data, options) {
  // ...
}

Как избежать конфликтов CSS

Если вы используете CSS, постарайтесь не писать правила CSS, которые могут повлиять на другие диаграммы на странице. Например, такое правило, как td {color: blue;} крайне не рекомендуется, поскольку оно повлияет на любой другой элемент <td> на странице, а не только на вашей диаграмме. Один из способов решить эту проблему — заключить всю диаграмму в <div> с именем класса и применить все правила CSS только к элементам, которые являются потомками элемента с этим именем класса. Например, следующее правило CSS будет влиять только на элементы <td> , предком которых является элемент с именем класса «example».

td.example {color: blue;}

Затем вы можете обернуть диаграмму в <div> с помощью:

<div class="example">
  ...
</div>

Реализуйте свою диаграмму

Вам потребуется реализовать диаграмму как объект JavaScript, который предоставляет стандартные методы, описанные в разделе «Справочник» . Два обязательных метода — это конструктор и метод draw(). Вы также можете предоставить пользователю любые дополнительные методы, подходящие для вашей диаграммы. Просто помните, что чем проще в использовании, тем лучше.

Конструктор

Ваша диаграмма должна предоставлять один конструктор, принимающий один параметр — элемент DOM, в котором вы будете рисовать диаграмму. Обычно диаграммы хранят локальную копию этого элемента в конструкторе для дальнейшего использования:

function example.MyTable(container) {
  this.container = container
}

Метод draw()

В вашем классе диаграммы должен быть метод draw() определенный в прототипе вашего класса диаграммы. Метод draw() принимает два параметра:

1. DataTable , содержащий данные для отображения.
2. Дополнительная карта параметров имени/значения для вашей диаграммы. Имена и типы значений параметров определяются вами для вашей конкретной диаграммы. Например, в приведенном ниже примере диаграммы Hello диаграмма поддерживает параметр с именем «showLineNumber» со значением логического типа. Вы должны поддерживать значение по умолчанию для каждого параметра на случай, если пользователь не передает значение для определенного параметра. Этот параметр является необязательным, поэтому вы также должны быть готовы использовать все значения по умолчанию, если пользователь не передает этот параметр ( подробнее ).

example.MyTable.prototype.draw = function(data, options) {
  // Process data and options and render output into the container element.
  ...
}

Привет, график!

Вот простая диаграмма, которая отображает данные DataTable в виде таблицы HTML: