sparkline

スパークライン

外部に依存せずに JavaScript を使用して SVG スパークラインを生成します。

設置

このライブラリは、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 : これは、3 つの必須属性 ( width 、 height 、およびstroke-width ) を含む必要がある<svg>参照です。これらの属性は、描画領域を計算するために使用されます。
• 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ライセンス)

本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。

上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。

ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。