sparkline 다운로드 - sparkline 소스 코드 다운로드

sparkline

기타 소스코드

1.0.0

다운로드

스파크라인

외부 종속성 없이 JavaScript를 사용하여 SVG 스파크라인을 생성합니다.

설치

이 lib는 NPM 패키지로 제공됩니다. 설치하려면 다음 명령을 사용하십시오.

 npm install @fnando/sparkline --save

Yarn을 사용하고 있다면(그리고 사용해야 합니다):

 yarn add @fnando/sparkline

스크립트(예: webpack)를 컴파일하지 않고 스크립트를 로드하는 경우 sparkline.sparkline(svg, values, options) 직접 호출해야 합니다. 그렇지 않으면 간단히 import sparkline from "@fnando/sparkline"; .

API

`sparkline(svg, values, options = {})`

svg : 이는 세 가지 필수 속성( width , height 및 stroke-width )을 포함해야 하는 <svg> 참조입니다. 이러한 속성은 도면 영역을 계산하는 데 사용됩니다.
values : 숫자 배열 또는 .value 에 응답하는 객체 배열을 제공할 수 있습니다. 다른 데이터 구조가 있는 경우 options.fetch 참조하세요.
options : 이 선택적 인수를 사용하면 스파크라인을 추가로 사용자 정의할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다.
- fetch : Sparkline에서 기본적으로 지원하지 않는 다른 데이터 구조가 있는 경우 이 함수를 사용하여 값을 반환합니다.
- 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 라이센스)

본 소프트웨어 및 관련 문서 파일('소프트웨어')의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.

소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 '있는 그대로' 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.

확장하다

추가 정보