С огромным нетерпением объявляем о выходе нового релиза billboard.js сегодня!

Этот выпуск включает 6 новых функций и 17 исправлений ошибок.

Для получения подробной информации о выпуске, пожалуйста, ознакомьтесь с примечанием к выпуску:
https://github.com/naver/billboard.js/releases/tag/1.8.0

Что нового в релизе?

Давай поменяем цвет, когда закончится!

Чтобы указать текущий выбор данных, вертикальной линии фокусировки достаточно при любых обстоятельствах. Но иногда вы хотите выделить четкую индикацию, применив некоторые изменения цвета к элементам диаграммы (когда она переходит в мобильную среду, это может быть более полезно из-за взаимодействия на основе сенсорного ввода).

Чтобы облегчить эти задачи, в этом выпуске добавлена ​​опция color.onover.

Демо: https://naver.github.io/billboard.js/demo/#ChartOptions.ColorOnover

Эта опция позволяет обновлять цвет элемента данных и полностью настраивается.

// set all data to 'red'
onover: "red",
// set different color for data
onover: {
    data1: "red",
    data2: "yellow"
},
// will pass data object to the callback
onover: function(d) {
    return d.id === "data1" ? "red" : "green";
}

Полный контроль отображения для тика оси

В большинстве случаев оси отображаются как есть, но иногда необходимо настроить отображение каждой части.

Демо: https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText

Один реальный пример будет использовать «subchart». На приведенном ниже снимке экрана вы можете избавиться от текстов осей поддиаграммы. Потому что они бесполезны.

Даже не предусмотрена опция, отображением элементов можно управлять с помощью CSS. Но в этом случае бесполезно давать промежуток между элементами легенды.

Для решения этой проблемы, которая будет полезна в некоторых случаях, добавлена ​​новая опция управления отображением отметок оси.

Эта опция позволяет контролировать видимость галочки (линии) и текста галочки.

x: {  // same for 'x', 'y', 'y2' and subchart axis
	tick: {
		show: true,  // show or hide tick lines
		text: {
			show: true  // show or hide tick texts
		}
	}
}

С помощью этой новой опции мы решим упомянутый ранее пример, удалив разрыв между диаграммой и легендой.

Вариант ширины на стержнях

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

Демо: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidthVariant

Просто установите соотношение или значения пикселей для каждого набора данных.

bar: {
    width: {
    	data1: {
	     ratio: 0.2,
	     max: 20
    	},
    	data2: 30
    }
}

Многострочный текст

Добавление линий разрыва в SVG довольно неприятная задача. Для облегчения в billboard.js добавлена ​​функция разбиения строки с помощью символа «\ n» там, где это возможно.

В качестве расширения к этому списку добавлены текстовая метка и заголовок данных пирога / пончика.

  • Улучшение многострочного текста для пирога / пончика

Демо: https://naver.github.io/billboard.js/demo/#PieChartOptions.MultilineLabel

pie: {  // donut also as well
    label: {
        format: function(value, ratio, id) {
            return value +"\nHours";
        }
    }
}
  • Многострочный текст

Демо: https://naver.github.io/billboard.js/demo/#Title.MultilinedTitle

title: {
    text: "Temperature History by Region, 2017-2018\nSource: community weather center"
}

LinearGradient для типов областей

Фоновый градиент - это один из факторов дизайна / UX для отображения диаграмм с областями. Для этого добавлен новый параметр area.linearGradient.

Демо: https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient

Использование очень простое. Просто установите значение true, если вы хотите применить градиент. Этот параметр применит градиент «по умолчанию» ко всем наборам данных области с их исходными цветами.

// will generate follwing linearGradient:
// <linearGradient x1="0" x2="0" y1="0" y2="1">
//  <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
//  <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
// </linearGradient>
linearGradient: true,

А если вы хотите применить индивидуальный? Конечно вы можете.

Чтобы настроить, вам нужно немного знать об элементе SVG ‹linearGraient›, но это не так уж сложно.

Вышеуказанные настройки градиента:

// Or customized gradient
linearGradient: {
 x: [0, 0],  // x1, x2 attributes
 y: [0, 0],  // y1, y2 attributes
 stops: [
  // offset, stop-color, stop-opacity
  [0, "#7cb5ec", 1],
  // setting 'null' for stop-color, will set its original data color
  [0.5, null, 0],
  // setting 'function' for stop-color, will pass data id as argument.
  // It should return color string or null value
  [1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
 ]
}

Улучшенная производительность

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

Начиная с этого выпуска, был произведен рефакторинг для повышения производительности. Для начала мы сосредоточились на 3 различных категориях этого выпуска:

  • Не создавайте ненужные узлы, если они не нужны.
  • Избавьтесь от повторяющихся вызовов, чтобы минимизировать вызовы выполнения.
  • Запомните некоторые значения измерений, чтобы не оценивать их несколько раз.

Конечно, это всего лишь один шаг. Работа над этим будет продолжена в следующих выпусках.

Небольшой тест

Мы провели небольшой тест, чтобы измерить разницу, и вот результаты.

Test condition:
- Total of 30 datasets, which each has length of 30 data
The resources(CPU, JS heap size and DOM Nodes) values aren't really accurate, just take as a consideration.

Первый тест касается загрузки динамических наборов данных с помощью .load () API.

Количество макетов и повторных изменений стилей:

  • v1.7.1: 33 ~ 42 / сек
  • v1.8.0: 16 ~ 24 / сек

Второй - об изменении размера окна с помощью API .resize ().

Количество макетов и повторных изменений стилей:

  • v1.7.1: 51 ~ 66 / сек
  • v1.8.0: 12 ~ 39 / сек

Как видно из результата, в этих двух тестах примерно упало + 50%. Надеюсь, это будет полезно для пользователей billboard.js :)

Маленькая подсказка

Лучший способ повысить производительность - отключить переход. Это вроде бы очевидно, но всего одна настройка снизит стоимость рендеринга.

Как видно из приведенного ниже теста, скорость пересчета макетов / стилей резко упала по сравнению с предыдущими тестами, в среднем на 4 / сек.

Тьюринг-офф прост. Просто установите для параметра transition.duration значение 0 или ноль.

transition: {
    duration: 0  // or null
}

Закрытие

Я хочу поблагодарить всех пользователей и участников. И надеюсь, что эти усилия позволят облегчить ваши задачи!

Если у вас есть идеи, комментарии или вы хотите внести свой вклад, без колебаний сделайте это.

Этот проект требует вашего внимания, чтобы двигаться вперед. Пожалуйста, попробуйте вернуть то, что вы получили от проекта OSS.

Если вам интересно, как поддерживаются проекты OSS, ознакомьтесь с некоторыми статьями: