activateSerie(serie: PP.Ui.ChartCanvasSerie);
serie. Серия точек.
Метод activateSerie активирует серию для редактирования.
Для выполнения примера необходимо наличие на html-странице компонента Chart с наименованием «chart» (см. «Пример создания компонента Chart»). Создадим новый режим редактирования и добавим его к диаграмме:
// Создаем режим редактирования
editMode = new PP.Ui.ChartEditMode({
Parent: chart,
// Устанавливаем режим редактирования
Mode: "Point"
});
// Добавляем режим редактирования к диаграмме
chart.getEditMode().setSettings(editMode.getSettings());
// Получаем режим редактирования
var chartEditMode = chart.getEditMode();
Добавим к режиму редактирования обработчики событий начала и окончания изменения серии. Добавим к документу обработчики событий движения и нажатия мыши. Активируем режим редактирования и выберем для редактирования первую серию точек:
// Добавляем обработчики событий редактирования диаграммы
chartEditMode.EditStarted.add(function(sender, args) {
console.log("Началось редактирование диаграммы");
});
chartEditMode.Edited.add(function(sender, args) {
console.log("Закончилось редактирование диаграммы");
});
// Добавляем обработчик события нажатия кнопки мыши по странице
document.onmousedown = function(sender, args) {
var mc = PP.calculateMouseCoords(sender);
var offset = PP.calculateOffset(chart.getDomNode());
chartEditMode.handleMouseDown({
X: mc.X - offset.X,
Y: mc.Y - offset.Y
}, sender);
if (chartEditMode.getCursorOnMarker()) {
console.log("Курсор над маркером");
}
}
// Добавляем обработчик события движения мыши по странице
document.onmousemove = function(sender, args) {
var mc = PP.calculateMouseCoords(sender);
var offset = PP.calculateOffset(chart.getDomNode());
chartEditMode.handleMouseMove({
X: mc.X - offset.X,
Y: mc.Y - offset.Y
}, sender);
}
// Добавляем обработчик события отпускания кнопки мыши
document.onmouseup = function(sender, args) {
chartEditMode.handleMouseUp({
X: sender.x,
Y: sender.y
}, sender);
}
// Активируем режим редактирования
chartEditMode.setEnabled(true);
// Активируем первую серию для редактирования
chartEditMode.activateSerie(chart.getSeries()[0]);
В результате диаграмма стала доступной для редактирования:
Растянем первую точку серии вниз. В результате в консоль были выведены следующие сообщения:
Началось редактирование диаграммы
Курсор над маркером
Закончилось редактирование диаграммы
См. также: