sparkline

спарклайн

Создавайте спарклайны SVG с помощью JavaScript без какой-либо внешней зависимости.

Установка

Эта библиотека доступна как пакет NPM. Чтобы установить его, используйте следующую команду:

 npm install @fnando/sparkline --save

Если вы используете Yarn (и вам следует):

 yarn add @fnando/sparkline

Вам придется вызвать sparkline.sparkline(svg, values, options) напрямую, если вы загружаете скрипт без компиляции скрипта (например, веб-пакета). В противном случае вы можете просто import sparkline from "@fnando/sparkline"; .

API

sparkline(svg, values, options = {})

• svg : это ссылка <svg> , которая должна содержать три обязательных атрибута ( width , height и stroke-width ). Эти атрибуты используются для расчета области рисования.
• values : вы можете предоставить либо массив чисел, либо массив объектов, которые реагируют на .value . Если у вас другая структура данных, см. options.fetch .
• options : этот необязательный аргумент позволяет дополнительно настроить спарклайн. Доступные варианты:
  • fetch : используйте эту функцию для возврата значения, если у вас есть другая структура данных, которая изначально не поддерживается спарклайном.
  • onmousemove : установив эту функцию обратного вызова, вы включите интерактивный режим (если вы не установите для options.interactive значение false ). Сигнатурой обратного вызова является callback(event, datapoint) , где datapoint — это объект, содержащий значение, координаты x/y и индекс элемента.
  • onmouseout : эта функция обратного вызова вызывается каждый раз, когда мышь покидает область SVG. Вы можете использовать его, чтобы скрыть такие вещи, как всплывающие подсказки.
  • spotRadius : установите радиус пятна. Значение по умолчанию — 2 .
  • cursorWidth : Установите ширину курсора. Значение по умолчанию — 2 .
  • interactive : если true , это включает интерактивный режим. Вам не обязательно устанавливать эту опцию, если вы предоставляете обратный вызов onmousemove .

Использование

Это минимальный рабочий пример:

 <!-- width, height and stroke-width attributes must be defined on the target SVG -->
< svg class =" sparkline " width =" 100 " height =" 30 " stroke-width =" 3 " > </ svg >

< script >
  sparkline ( document . querySelector ( ".sparkline" ) , [ 1 , 5 , 2 , 4 , 8 , 3 , 7 ] ) ;
</ script >

Вы можете изменить цвета, установив атрибуты непосредственно для элемента SVG или используя CSS, как показано ниже:

 /* just the line */
. sparkline {
  stroke : red;
  fill : none;
}

/* line with highlight area */
. sparkline {
  stroke : red;
  fill : rgba ( 255 , 0 , 0 , .3 );
}

/* change the spot color */
. sparkline--spot {
  stroke : blue;
  fill : blue;
}

/* change the cursor color */
. sparkline--cursor {
  stroke : orange;
}

/* style fill area and line colors using specific class name */
. sparkline--fill {
  fill : rgba ( 255 , 0 , 0 , .3 );
}

. sparkline--line {
  stroke : red;
}

Примеры

Статический

Доступно по адресу https://codepen.io/fnando/full/KyZLLV/.

Интерактивный

Доступно по адресу https://codepen.io/fnando/full/GOQLVE/.

Лицензия

(Лицензия MIT)

Настоящим бесплатно любому лицу, получившему копию этого программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), предоставляется разрешение на использование Программного обеспечения без ограничений, включая, помимо прочего, права на использование, копирование, изменение, объединение. публиковать, распространять, сублицензировать и/или продавать копии Программного обеспечения, а также разрешать лицам, которым предоставлено Программное обеспечение, делать это при соблюдении следующих условий:

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

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ, ГАРАНТИЯМИ ТОВАРНОЙ ЦЕННОСТИ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕНАРУШЕНИЯ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ОБЛАДАТЕЛИ АВТОРСКИХ ПРАВ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГУЮ ОТВЕТСТВЕННОСТЬ, БУДЬ В ДЕЙСТВИЯХ ПО КОНТРАКТУ, ПРАВОНАРУШЕНИЮ ИЛИ ДРУГИМ ОБРАЗОМ, ВОЗНИКАЮЩИЕ ОТ, ИЗ ИЛИ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ДРУГИМИ СДЕЛКАМИ, ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ.