-
Метод 1. Непосредственное изменение текста
Самый простой способ обновить текст в GoJS — напрямую изменить свойствоtextTextBlock или метки с помощью JavaScript. Например:myTextBlock.text = "New Text"; -
Метод 2: привязка данных
GoJS поддерживает привязку данных, позволяя привязывать текстовые значения к свойствам вашей модели. При обновлении модели текст на диаграмме будет автоматически обновляться. Вот пример:myDiagram.model.setDataProperty(myNodeData, "text", "New Text"); -
Метод 3: Создание шаблонов
GoJS предоставляет функции создания шаблонов, которые позволяют вам определять собственные шаблоны для узлов и ссылок. Вы можете использовать этот метод для динамического обновления текста на основе логики вашего приложения. Вот упрощенный пример:myDiagram.nodeTemplate = ` <go.Node> <go.TextBlock text="{text}" /> </go.Node>`; -
Метод 4: Украшения
GoJS позволяет добавлять к узлам украшения, которые можно использовать для отображения дополнительной информации или взаимодействия с узлом. Вы можете динамически обновлять текст украшения, изменяя его свойствоtext. Вот пример:myAdornment.findObject("textBlock").text = "New Text"; -
Метод 5: Выбор узла
Вы можете обновлять текст в зависимости от взаимодействия с пользователем, например, при выборе узла. Обрабатывая соответствующие события, вы можете динамически изменять текст. Вот пример использования события ChangedSelection:myDiagram.addDiagramListener("ChangedSelection", function (e) { var selectedNode = myDiagram.selection.first(); selectedNode.text = "New Text"; }); -
Метод 6: Контекстное меню
GoJS поддерживает контекстные меню, которые позволяют предоставлять дополнительные функции при щелчке правой кнопкой мыши по узлу или ссылке. Вы можете обновлять текст динамически в зависимости от выбранного пункта контекстного меню. Вот пример:contextMenuOptions.push({ text: "Change Text", action: function () { var selectedNode = myDiagram.selection.first(); selectedNode.text = "New Text"; }}); -
Метод 7: Анимация
Вы можете использовать анимацию для создания плавных переходов при обновлении текста в GoJS. Объединив классTweenсAnimationManager, вы можете добиться динамического обновления текста с визуальными эффектами. Вот упрощенный пример:go.AnimationManager.prototype.doUpdate = function () { var newText = "New Text"; myTextBlock.animate({ property: "text", to: newText }, 500); }; -
Метод 8: Обновления в реальном времени
Если вам нужны обновления в реальном времени для вашей диаграммы GoJS, вы можете использовать такие технологии, как WebSocket или длинный опрос HTTP. Получая данные с сервера, вы можете динамически обновлять текст. Вот пример высокого уровня:var socket = new WebSocket("wss://example.com/data"); socket.onmessage = function (event) { var newData = JSON.parse(event.data); myTextBlock.text = newData.text; }; -
Метод 9: внешние библиотеки
GoJS хорошо интегрируется с другими библиотеками JavaScript. Вы можете использовать такие библиотеки, как jQuery или Axios, для получения данных из API и обновления текста на диаграмме GoJS. Вот пример использования Axios:axios.get("https://api.example.com/data") .then(function (response) { myTextBlock.text = response.data.text; }) .catch(function (error) { console.error(error); }); -
Метод 10: пользовательские команды
Наконец, вы можете определить в GoJS собственные команды для обновления текста на основе пользовательского ввода. Регистрируя обработчики команд и манипулируя свойствами текста, вы можете добиться динамических обновлений. Вот упрощенный пример:myDiagram.commandHandler.canExecute = function (command) { return command === "updateText"; }; myDiagram.commandHandler.execute = function (command) { if (command === "updateText") { myTextBlock.text = "New Text"; } };
В этой статье мы рассмотрели 10 различных методов динамического обновления текста в GoJS. От прямых изменений привязки данных, шаблонов и пользовательских команд — теперь у вас есть набор инструментов для обработки текстовых обновлений в ваших диаграммах GoJS. Используя эти методы, вы можете создавать привлекательные и интерактивные визуализации данных, которые динамически реагируют на действия пользователя и обновления данных в режиме реального времени. Не забудьте выбрать метод, который соответствует вашему конкретному варианту использования и требованиям разработки.