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

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

Аудитория

На этой странице предполагается, что вы прочитали страницу Использование диаграмм . Также предполагается, что вы знакомы с 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 Chart диаграмма поддерживает параметр с именем 'showLineNumber' со значением логического типа. Вы должны поддерживать значение по умолчанию для каждой опции на случай, если пользователь не передаст значение для конкретной опции. Этот параметр является необязательным, поэтому вы также должны быть готовы использовать все значения по умолчанию, если пользователь не передает этот параметр ( подробнее ).

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

Привет, Чарт!

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