Сегодня вышел новый 3.9 релиз 🥳! Этот выпуск содержит 7 новых функций и 3 исправления ошибок.
Подробную информацию о выпуске см. в примечании к выпуску:
https://github.com/naver/billboard.js/releases/tag/3.9.0
Что нового?
дуговая игла
Иглу можно использовать для указания определенной точки значения данных в форме дуги.
Демонстрации:https://naver.github.io/billboard.js/demo/#DonutChartOptions.DonutNeedle
https://naver.github .io/billboard.js/demo/#GaugeChartOptions.GaugeNeedle
Форму иглы можно полностью настроить по своему усмотрению (в этом случае необходимо указать значение пути) или просто обновить длину или верхний/нижний радиусы.
Ознакомьтесь с полным интерфейсом опций и его комментариями, чтобы понять каждую опцию.
[donut | gauge]: {
// when 'arc.needle.show=true' is set, will able to use template to reflect needle value
title: "{=NEEDLE_VALUE}"
},
arc: {
needle: {
show: true,
color: "red", // any valid CSS color
// for customized needle
path: function(length) {
const len = length - 20;
// will return upper arrow shape path
// Note: The path should begun from '0,0' coordinate to top center.
const path = `M 0 -${len + 20}
L -12 -${len}
L -5 -${len}
L -5 0
A 1 1 0 0 0 5 0
L 5 -${len}
L 12 -${len} Z`;
return path;
},
value: 40, // will make needle to point value 40.
length: 80, // needle length in percentages relative to radius.
top: {
// rx and ry are the two radii of the ellipse;
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
rx: 1,
ry: 1,
width: 5
},
bottom: {
// rx and ry are the two radii of the ellipse;
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
rx: 1,
ry: 1,
width: 10
len: 10
}
}
}
В первой кольцевой диаграмме используется настроенная игла и указанное начальное значение. В этом случае, когда некоторые ряды данных скрыты, стрелка будет обновляться до заданного значения.
И вторая диаграмма, инициализированная значением 0, и значение стрелки обновляется динамически.
Для динамического обновления значения иглы он предоставляет простой метод API для обновления текущего значения иглы на chart.$.needle.updateHelper().
// Update arc needle position
const chart = bb.generate({
data: {
type: "donut"
},
arc: {
needle: {
show: true,
...
}
}
});
chart.$.needle.updateHelper(70); // update needle position to point value 70.
// update needle position to point value 70 and the config value.
// NOTE: updating config value, will update needle pointer initial value too.
chart.$.needle.updateHelper(70, true);
// update needle point position every 1 second
let i = 0;
setInterval(() => {
chart.$.needle.updateHelper(i += 10);
}, 1000)
Темная тема
Темный режим довольно распространен в наши дни, и для облегчения будет предоставлена dark тема из этого релиза.
Конечно, как и другие темы, ее можно использовать в качестве стартовой для применения собственных стилей на основе темной темы.
dark тема будет распространяться как один CSS-файл, и вы увидите ее в действии на странице примера, выбрав ее в левой части навигации в разделе «Тема».
точ.чувствительность
Опция point.sensitivity позволит настроить расстояние (от координаты x/y точки данных) для взаимодействия.
Демонстрация: https://naver.github.io/billboard.js/demo/#Point.PointSensitivity
Когда значение чувствительности равно 3, это означает, что взаимодействие произойдет, когда указатель мыши войдет в границы 3 пикселей, начиная с точной координаты x/y.
Но для пузырькового типа указание абсолютного значения не может обеспечить гладкое взаимодействие, потому что каждый радиус пузырька будет зависеть от его значения.
Чтобы улучшить это, будет предоставлена опция radius, чтобы отразить чувствительность в зависимости от каждого радиуса пузырька. А также предоставляет опцию обратного вызова, которая может добавить некоторые условия для более подробного управления.
point: {
// having lower value, means how closer to be for interaction
sensitivity: 3,
// sensitivity based on point's radius
sensitivity: "radius",
// callback for each point to determine the sensitivity
sensitivity: function(d) {
// ex. of argument d:
// ==> {x: 2, value: 55, id: 'data3', index: 2, r: 19.820624179302296}
// returning d.r, will make sensitivity same as point's radius value.
return d.r;
}
}
В приведенном ниже примере показано, когда значение чувствительности указано как абсолютное значение, а когда указано значение radius.
data.labels.position
Еще один вариант улучшения для управления положением текста метки данных.
Демо:https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition
Просто верните соответствующее значение координат x/y для каждого элемента текста данных, как вы хотите.
data: {
...
labels: {
show: true,
/**
* The arguments are:
* - `type` coordinate type string, which will be 'x' or 'y'.
* - `v` is the value of the data point where the label is shown.
* - `id` is the id of the data where the label is shown.
* - `i` is the index of the data series point where the label is shown.
* - `texts` is the array of whole corresponding data series' text labels.
*/
position: function(type, v, id, i, texts) {
let pos = 0;
const len = texts.size() / 2 - 1;
if (type === "x" && (i === 0 || i === len)) {
pos = i === 0 ? 20 : -20;
}
return pos;
}
}
}
бар.фронт
Когда в одной диаграмме используются различные типы фигур с гистограммой, обычно гистограммы располагаются позади других элементов фигур, чтобы не накладываться друг на друга и не прерывать видимость.
Контролировать z-порядок в «мире svg» непросто, потому что z-порядок будет соответствовать древовидной структуре DOM.
Единственный способ контролировать это — управлять древовидной структурой DOM, что является непростой задачей.
Демо: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarFront
Включение этой опции просто заставит фигуры полос появляться перед другими элементами фигур.
bar: {
front: true
}
Легко заметить отличия от приведенного ниже примера.
легенда.элемент.взаимодействие
По умолчанию элементы легенды будут переключаться и переключаться между ними. Но иногда возникает необходимость его отключить.
Начиная с этого релиза, будут предоставлены новые возможности для управления им.
Демо: https://naver.github.io/billboard.js/demo/#Legend.LegendItemInteraction
Предоставим 2 способа управления:
- Включить или отключить взаимодействие легенды по умолчанию
- Обеспечьте взаимодействие «двойной щелчок», что в этом случае двойного щелчка приведет к фокусировке выбранных наборов данных и скрытию других.
legend: {
item: {
// will disable default interaction (mouse hover effect and click to hide clicked dataseries)
interaction: false | {
/**
* Set legend item to interact on double click.
* - **NOTE:**
* - Double clicking will make focused clicked dataseries only, hiding all others.
* - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
* - To return initial state(which all dataseries are showing), double click current focused legend item again.
* - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
* - In this case, default `click` interaction will be disabled.
*/
dblclick: true
},
// when set below callback option value, will work regardless of 'interaction=false' is set
onclick: function(id) { ... },
onover: function(id) { ... },
onout: function(id) { ... }
}
}
См. в действии, когда опция dblclick включена. Элемент легенды «Двойной щелчок» приведет к отображению только выбранных серий данных и скрытию остальных.
Чтобы вернуться к исходным состояниям, снова дважды щелкните выделенный элемент легенды.
Закрытие
Количество загрузок постоянно растет и достигло 100 тысяч загрузок в месяц!
Это доказывает конкурентоспособность среди других вариантов, и это как-то восхитительно 😆 видеть, что все больше разработчиков по всему миру выбирают billboard.js для визуализации данных.
Мы будем постоянно улучшать вашу поддержку!
