Сейчас скелетон еще разрабатывается, поэтому я не могу обещать, что интерфейс сохранится в следующих коммитах. Эта документация актуальна для версии 0.0.5. Проверить версию можно так: Plotter.version

Plotter -- основной объект. Он отвечает за прорисовку графика и всех объектов, которые на нем находятся. Для создания графика нужно передать в качестве первого аргумента в конструктор Plotter id DOM-элемента, где дальше будет отрисовываться график.

var plotter = new Plotter("plot", options);

Второй необязательный аргумент конструктора Plotter options -- это объект, в котором можно менять некоторые свойства Plotter. Вот они, а также их значения по-умолчанию:

left: -10, левая граница графика
right: 10, правая граница графика
bottom: -5, нижняя граница графика
top: 5, верхняя граница графика
width: 800, ширина графика в пикселях
height: 600, высота графика в пикселях
stroke: "#000000", цвет рамки графика

Есть еще несколько других свойств, которые я намеренно не перечисляю. Какие-то из них лучше не трогать, а изменение других может привести к падению программы.

Функции-рисовалки -- главное, что есть у Plotter, и основная фишка библиотеки. С помощью них можно много рисовать, но писать мало кода. Пример вызова функции, которая нарисует график sin(x):

var func = plotter.addFunc(function (x) {
    return Math.sin(x);
}, options);

Существуют методы для добавления закрашенной области, линии, точки и функции. Каждый метод возвращает объект. у которого есть методя для его модификации. Например, Plotter.addFunc вернет объект функции, у которого можно будет поменять цвет, границы прорисовки, точность, толщину, точки разрыва и даже саму функцию.

Методы Plotter

О конструкторе Plotter я уже рассказал.Теперь я расскажу о том, что делать с объектом, которые возвращает конструктор. У него есть несколько методов:

Plotter.addFunc(Function, Object)

Первый аргумент - это функция, которую нужно нарисовать. Второй необязательный аргумент - это объект, в котором можно менять некоторые свойства.

accuracy: Plotter.width, точность прорисовки графика. По-умолчанию равна ширине графика в пикселях. Количество точек, по которым строится график.
strokeWidth: 2, толщина линии графика
color: 0, цвет. Нулевой цвет -- это синий. Если менять это свойство вручную, без вызова метода setColor, то нужно указывать цвет в формате rgb. Первый символ должен быть решеткой, а дальше следуют 6 шестнадцатиричныных цирф: "#FF0000" - красный. Лучше не менять это свойство напрямую, а использовать сеттер, так как в нем можно выбрать цвет из заранее заданного набора.
breaks: [], массив точек разрыва. Когда строится график функции, у которой есть разрывы, то здесь их нужно указать. Например, у графика сигнума точкой разрыва будет 0. Такая же точка разрыва будет у гиперболы и у графика sin(x)/x.
left: null, левая граница прорисовки. Левее нее график никогда не будет рисоваться. null означает, что границы нет.
right: null, правая граница прорисовки. Правее нее график никогда не будет рисоваться. null означает, что границы нет.

Методы Func

Вот построена функци и получен объект типа Func:

var func = plotter.addFunc(function (x) {
    return x;
});

Можно, например, поменять цвет:

func.setColor(7);   //поменяет цвет на красный.

Можно получить цвет:

func.getColor();    //"#d62728" -- тот, который был установлен. Цвет всегда возвращается в формате rgb.

Можно делать и то, и другое с помощью одного метода:

func.Color(9);  //вызов .Color() с аргументом поменяет цвет. Сейчас был установлен фиолетовый.
func.Color();   //вызов .Color() без аргументов просто вернет текущий цвет. Будет возвращен rgb-код фиолетового: "#9467bd".

Я показал примеры использования методов Func. Какие вообще методы у него есть?

Func.getAccuracy(), вернет текущую точность прорисовки
Func.setAccuracy(Number), установит указанную точность прорисовки. Число должно быть целым.
Func.Accuracy(Number), если передать необязательный аргумент, то установит точность прорисовки. Если не указывать, то вернет текущую точность прорисовки.

Func.getStrokeWidth(), вернет текущую толщину линии графика.
Func.setStrokeWidth(Number), установит указанную толщину.
Func.StrokeWidth(Number), если передать необязательный аргумент, то установит толщину. Если не указывать, то вернет текущую толщину.

Func.getColor(), вернет текущий цвет в формате rgb.
Func.setColor(Number or String), установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20
Func.Color(Number or String), аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в .setColor(Number or String). Если его нет, то будет возвращен текущий цвет в формате rgb.

Func.getColour(), алиас для .getColor()
Func.setColour(Number or String), алиас для .setColor(Number or String)
Func.Colour(Number or String), алиас для .Color(Number or String)

Func.getBreaks(), вернет массив точек разрыва. Модификации в этом массиве приведут к изменениям в массиве внутри объекта. Иначе говоря, копия не создается. При необходимости копию можно создать с помощью var newArr = _.clone(arr);. В сборку скелетона уже включен lodash 2.4.1, набор утилит для js. Подробнее: https://lodash.com/
Func.setBreaks(Array), установит указанный массив точек разрыва. Копия при этом создаваться не будет.
Func.Breaks(Array), если необязательный аргумент указан, то установит новый массив точек разрыва. Если нет, то вернет текущий массив.

Func.getLeft(), вернет левую границу прорисовки.
Func.setLeft(Number), установит левую границу прорисовки.
Func.Left(Number), если необязательный аргумент указан, то установит левую границу прорисовки. Иначе вернет текущую.

Func.getRight(), вернет правую границу прорисовки.
Func.setRight(Number), установит правую границу прорисовки.
Func.Right(Number), если необязательный аргумент указан, то установит правую границу прорисовки. Иначе вернет текущую.

Func.getFunc(), вернет текущую функцию.
Func.setFunc(Function), установит функцию.
Func.Func(Function), если аргумент указан, то установит функцию. Если нет, то вернет текущую функцию.

Plotter.addLine(x1, y1, x2, y2, Object)

Первые четыре аргумента задают координаты двух точек, по которым будет строиться отрезок. Последний необязательный аргумент - это объект, в котором можно передавать опции. Слева указано имя свойства, а справа - его значение по-умолчанию.

strokeWidth: 2, толщина линии
color: 0

Методы Line

Line.setX1(x1)
Line.getX1()
Line.X1(x1), принимает необязательный аргумент. Если он задан, то устанавливает x1. Иначе возвращает текущее значение x1.

Line.setX2(x2)
Line.getX2()
Line.X2(x2), принимает необязательный аргумент. Если он задан, то устанавливает x2. Иначе возвращает текущее значение x2.

Line.setY1(y1)
Line.getY1()
Line.Y1(y1), принимает необязательный аргумент. Если он задан, то устанавливает y1. Иначе возвращает текущее значение y1.

Line.setY2(y2)
Line.getY2()
Line.Y2(y2), принимает необязательный аргумент. Если он задан, то устанавливает y2. Иначе возвращает текущее значение y2.

Line.getColor(), вернет текущий цвет в формате rgb.
Line.setColor(Number or String), установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20
Line.Color(Number or String), аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в .setColor(Number or String). Если его нет, то будет возвращен текущий цвет в формате rgb.

Line.getColour(), алиас для .getColor()
Line.setColour(Number or String), алиас для .setColor(Number or String)
Line.Colour(Number or String), алиас для .Color(Number or String)

Plotter.addArea(Array, Object)

Строит произвльную закрашенную область на графике. Для построения нужно передать в качестве первого аргумента массив точек. Каждая точка - это объект, у которого есть два поля: x и y.

    var arr = [];
    arr.push({
        x: 0,
        y: 0
    });
    arr.push({
        x: 1,
        y: 0
    });
    arr.push({
        x: 0.5,
        y: 1
    });
    var area = Plotter.addArea(arr);

Второй необязательный аргумент .addLine - объект с опциями. Можно менять следующие свойства:

color: 20, цвет границы области. По-умолчанию черный.
fillOpacity: 0.2, прозрачность закраски области. Может меняться от 0 до 1, где 1 - непрозрачная, а 0 - полностью прозрачная, невидимая.
strokeWidth: 0, толщина границы области. По-молчанию толщина нулевая, то есть граница невидимая
fill: 1, цвет закраски области.

Методы Area

Area.getColor(), вернет текущий цвет в формате rgb.
Area.setColor(Number or String), установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20
Area.Color(Number or String), аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в .setColor(Number or String). Если его нет, то будет возвращен текущий цвет в формате rgb.

Area.getColour(), алиас для .getColor()
Area.setColour(Number or String), алиас для .setColor(Number or String)
Area.Colour(Number or String), алиас для .Color(Number or String)

Area.setFill(Number or String), устанавливает цвет заливки области. Работает также, как и .setColor
Area.getFill(), возвращает цвет заливки области
Area.Fill(String or Number), принимает необязательный аргумент. Если он есть, то устанавливает указанный цвет, иначе возвращает текущий цвет.

Area.setFillOpacity(Number), принимает число от 0 до 1 и устанавливает указанную прозрачность заливки.
Area.getFillOpacity(), возвращает текущую прозрачность заливки.
Area.FillOpacity(Number), принимает необязательный аргумент. Если он есть, то устанваливает указанную прозрачность, иначе возвращает текущую.

Area.getStrokeWidth(), вернет текущую толщину границы области.
Area.setStrokeWidth(Number), установит указанную толщину.
Area.StrokeWidth(Number), если передать необязательный аргумент, то установит толщину. Если не указывать, то вернет текущую толщину.

Plotter.addPoint(x, y, Object)

Рисует точку по указанным координатам. Третьеим необязательным аргументом можно передать некоторые свойства:

movable: false, можно ли точку перетаскивать мышкой. По-умолчанию нельзя.
color: 6
size: 3, размер точки

Методы Point

Point.setSize(size), меняет размер точки. Можно передать либо неотрицательное число, либо одну из четырех строк: "large", "medium", "small", "tiny".
Point.getSize(), возвращает текущий размер
Point.Size(size), принимает необязательный аргумент. Если он есть, то устанавливает размер, иначе возвращает текущий размер.

Point.getX()
Point.setX(x)
Point.X(x), аргумент необязательный.

Point.getY()
Point.setY(y)
Point.Y(y), аргумент необязательный.

Point.getColor(), вернет текущий цвет в формате rgb.
Point.setColor(Number or String), установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20
Point.Color(Number or String), аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в .setColor(Number or String). Если его нет, то будет возвращен текущий цвет в формате rgb.

Point.getColour(), алиас для .getColor()
Point.setColour(Number or String), алиас для .setColor(Number or String)
Point.Colour(Number or String), алиас для .Color(Number or String)

Остальные методы Plotter

Помимо рисования объектов, Plotter еще отвечает за учет всех созданных объектов. Если нужно удалить какой-нибудь, то нужно вызвать метод .remove:

    var point = plotter.addPoint(1, 1);
    plotter.remove(point);

В некоторых случаях может помочь вызов методов Plotter.draw() или, что то же самое, Plotter.redraw(). В текущей версии их использовать не нужно. Также можно узнать id элемента, к которому привязан график: Plotter.getID()

PlotContainer, несколько графиков на одной странице

Как и Plotter, PlotContainer является глобальным объектом. Он служит для того, чтобы DOM-элемент с указанным ID работал в качестве контейнера для других DOM-элементов, которые, в свою очередь могут содержать либо графики, либо произвольный html-код.

Проще говорить, что PlotContainer - это контейнер, который хранит в себе несколько Plotter'ов.

Plotter PlotContainer.addPlot(options) добавляет в DOM-контейнер график и возвращает его. Возвращает то же самое, что и конструктор Plotter. Опции те же самые, что и у Plotter.

DOM_ID PlotContainer.addEmptyDiv() создает в контейнере пустой

и возвращает его ID. Можно использовать, например, для дальнейшей работы с Controls.

Инициализация контейнера и создание графика в нем:

    var container = new PlotContainer("plot");

    var plotter = container.addPlot();

Второй график можно создать также, как и первый:

    var plotter2 = container.addPlot();

Кроме того, в метод можно передавать опции, как это делает с конструктором Plotter:

 var plotter3 = container.addPlot({
   width: 400,
   height: 400
  });

#Примеры Их можно посмотреть в папке scripts. В index.html можно менять имя подключаемого файла, чтобы смотреть разные примеры.

sheckley

Методы Plotter

Plotter.addFunc(Function, Object)

Методы Func

Plotter.addLine(x1, y1, x2, y2, Object)

Методы Line

Plotter.addArea(Array, Object)

Методы Area

Plotter.addPoint(x, y, Object)

Методы Point

Остальные методы Plotter

PlotContainer, несколько графиков на одной странице

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Last publish

Collaborators

sheckley

Методы Plotter

Plotter.addFunc(Function, Object)

Методы Func

Plotter.addLine(x1, y1, x2, y2, Object)

Методы Line

Plotter.addArea(Array, Object)

Методы Area

Plotter.addPoint(x, y, Object)

Методы Point

Остальные методы Plotter

PlotContainer, несколько графиков на одной странице

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads