(Просмотреть примеры графиков сейчас)
В версии 3.3 представлены основные новые организационные диаграммы и расширенные диаграммы Ганта, включая диаграммы критического пути Ганта, стили и выбор линий соединителей организаций, виджеты информационных панелей, диаграммы с пиктограммами и многое другое. Поддержка градиента диаграммы расширена за счет включения значков и динамических градиентных заливок точек и рядов. КомандаJJharting создала более 55 расширенных примеров с новыми функциями, типами диаграмм и виджетами диаграмм, позволяющими вам быстро и легко использовать все новые функции в ваших собственных высокопроизводительных диаграммах и информационных панелях.
Поддержка критического пути диаграммы Ганта
Новая поддержка стилей коннекторов для диаграмм Ганта позволяет настраивать и выделять критический путь диаграммы Ганта.
Графики виджетов для информационных панелей
15 новых примеров диаграмм с виджетами приборных панелей, от линейных датчиков до столбцов и столбцов, от круговых датчиков со значками до полных линий под обрез, типографские виджеты и виджеты линейных диаграмм с индикаторами изменений помогут вам быстро и легко создавать собственные информационные панели диаграмм.
Пиктограммы и пиктограммы
Встроенная поддержка значков в Jharting предоставляет огромный выбор диаграмм и графиков с пиктограммами. Панели пиктограмм и процентные диаграммы в сочетании с сильным типографским оформлением позволяют создавать диаграммы, которые легко и быстро передают данные.
Возможность установки нескольких родительских и коннекторных стилей для каждой точки данных
Мы усовершенствовали свойство point.parent, чтобы помочь вам определить несколько родительских элементов и стили соединительных линий для каждого родителя независимо друг от друга.
parent:[
{id: 'p1', line: {color: 'green'}},
{id: 'p2,p3', line: {color: 'red'}}
]
Определение категорий осей
Мы добавили новое свойство axis.categories, чтобы вы могли определить имена категорий точек данных только один раз и иметь больший контроль над порядком сортировки. Для удобства можно указать массив значений y для свойства series.points.
До
series: [
{name: 'Series 1', points: [{x: 'A', y: 5}, {x: 'B', y: 10}]},
{name: 'Series 2', points: [{x: 'A', y: 15}, {x: 'B', y: 20}]}
]
После
xAxis_categories: ['A', 'B'],
series: [
{name: 'Series 1', points: [5, 10]},
{name: 'Series 2', points: [15, 20]}
]
Прямоугольные или прямые организационные соединительные линии
Мы улучшили внешний вид организационных соединительных линий, нарисовав их под прямым углом по умолчанию. Вы можете использовать прямой параметр, чтобы изменить это значение по умолчанию и рисовать соединительные линии непосредственно между точками.
type: 'organizational straight'
Синхронизация ширины и высоты организационных узлов
Мы добавили свойства point.annotation.syncWidth и syncHeight, чтобы помочь вам контролировать размер и визуальный баланс узлов организационной диаграммы.
defaultPoint_annotation: {
// syncWidth: true == syncWidth_with: 'level'
syncWidth_with: 'level',
syncHeight_with: 'all'}
Стиль и выбор соединителя иерархии точек
Теперь есть способ выбрать определенные ветви в организационной диаграмме или диаграмме Ганта с помощью иерархических селекторов пути. Вы можете выбрать все ветви из точки вверх по иерархии, вниз по иерархии, вверх и вниз или между двумя точками. Например
// All branches from pointID up the hierarchy. ['pointID', 'up'] // All branches from pointID down the hierarchy. ['pointID', 'down'] // All branches from pointID up and down. ['pointID', 'both'] // All branches between pointA and pointB. ['pointA', 'pointB'] // A specific branch of points. ['pointA', 'pointB', 'pointC'] // Multiple branches and selectors. [['pointA', 'pointC'], ['pointC', 'up']]
Используйте функцию chart.connectors() с селекторами пути, чтобы стилизовать соединительные линии. Функция chart.connectors() позволяет получить список путей на основе выбора, изменить стиль линии соединителя для определенных путей и сбросить стиль соединителя к исходному стилю.
// Styles all connector lines from pointA up the hierarchy.
chart.connectors(['pointA', 'up'], {color: 'red'});
// Reset all previously applied line styling from pointA up the hierarchy.
chart.connectors(['pointA', 'up']);
// Reset all line styling previously applied by this function.
chart.connectors();
Возможность использовать селекторы иерархии для получения баллов
Помимо стилизации соединительных линий с помощью селекторов путей, вы можете использовать их для получения коллекции всех точек, включенных в выбранные пути. Например, это применяет выбранное состояние ко всем точкам в пределах ['PointA','up']ветвей.
chart.series()
.points(['pointA', 'up'])
.options({selected: true});
Новое свойство point.connectorLine
Теперь вы можете указать организационный стиль линии или стиль соединительной линии диаграммы Ганта для каждой точки данных или по умолчанию для всех точек.
defaultPoint_connectorLine: {color: 'blue', width: 2}
Новый параметр радиуса соединительной линии
Мы добавили свойство радиуса соединительной линии, чтобы управлять закругленными углами организационных соединительных линий или линий зависимости Ганта. Вы также можете предоставить массив из двух радиусов для диаграммы, чтобы применить разные радиусы для каждого угла вдоль линии.
defaultPoint_connectorLine: {radius: 5}
Радиус для каждого угла.
defaultPoint_connectorLine: {radius: [0,5]}
Укажите функции getParents() и getChildren()
Нужно вручную просмотреть точки данных в организационной диаграмме? Теперь вы можете использовать функции точек getParents() и getChildren(), чтобы получить коллекции точек сразу вверх или вниз по иерархическому дереву.
chart.series() .points(0) .getChidren() .each(p => console.log(p.name));
Линейные градиенты для тегов ‹icon›
Знаете ли вы, что значки можно использовать внутри любых меток диаграммы? JJharting 3.3 теперь позволяет определять богатые градиентные заливки для этих значков, указывая список цветов и угол, как показано ниже.
label_text: '<icon name=[name] fill=#c41111,#ec5a5a,90>'
Динамические градиенты
Мы расширили обработку цвета градиента с помощью значений настройки цвета, чтобы упростить определение цветов градиента. После того как вы укажете первый цвет градиента, вы можете установить для остальных любые значения настройки цвета.
label_text: '<icon name=[name] fill=#c41111,lightenMore,90>',
fill: ['#c41111', 'lightenMore', 90]Динамические градиенты для заливки диаграммы с областями
Мы расширили поддержку динамического градиента до свойства series.shape.fill. Вы можете установить все цвета градиента в этом свойстве на значение настройки, включая «currentColor», который относится к цвету серии.
defaultSeries_shape_fill:['currentColor', 'white', 90] //or ['currentColor', 'lightenmore', 220]
Динамические градиенты для заполнения точек данных
Теперь вы можете использовать значения регулировки цвета в цветах градиента заливки точек данных.
defaultPoint_fill: ['currentColor', 'white', 90]
Цвет контура динамической метки
Jharting улучшает читаемость, разумно выбирая цвета меток точек данных, которые контрастируют с их фоном. Когда текст перекрывает такие области, как соединительные линии, заливки или градиенты, можно использовать контур текста с цветом значения настройки. Эта настройка основана на автоматически выбранном цвете этикетки.
defaultPoint_label: {outline: {color: 'contrast'}}
Синхронизируйте ширину линии сетки со столбцами
Мы добавили поддержку для установки ширины линии сетки деления оси на «столбец» во всех типах масштаба оси. Вы можете использовать это с перекрестием, которое представляет собой метки оси, или для оформления столбчатых диаграмм, чтобы они выглядели как индикаторы выполнения.
xAxis_crosshair: {enabled: true, gridLine_width: 'column'}
Пути к объектам данных для функции nest()
В Jharting теперь есть поддержка путей к свойствам объектов в функциях nest key() и rollup(). Вы можете использовать эту утилиту для обработки ваших данных в группы и извлечения сложных деталей для визуализации на диаграммах.
let dataGroupedByRoles = nest()
.key('attributes.role')
.entries(myData);
Положение кнопки масштабирования карты
Jharting 3.3 позволяет изменять положение кнопок масштабирования карты по умолчанию.
toolbar_items_zoom_position: 'inside top right'
Поддержка Next.js
Этот выпуск включает исправления и усовершенствования, позволяющие JJharting работать в среде Next.js.
Больше возможностей
- Пиксельная привязка организационной соединительной линии.
- Метки узлов организационной диаграммы по умолчанию располагаются по центру.
- Улучшено положение представления организационной диаграммы по умолчанию при увеличении.
Первоначально опубликовано на https://jscharting.com.
