[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
デモ ヘルプ APIリファレンス デザイナ
ダウンロード
(Showing Draft Content)

スパークライン

スパークラインは、セル内にデータをすばやく視覚化し、コンパクトな形式に変換できる小さなグラフです。スパークラインは、セル範囲のデータを使用して、データの傾向を簡単に分析できます。

縦棒チャート、折れ線チャート、または勝敗チャートタイプのスパークラインを設定するには、setSparklineメソッドを使用します。または、数式を使用してSpreadJSで使用可能なさまざまなスパークラインを作成できます。

また、独自のロジックを実装して、指定されたデータセットと設定でカスタムスパークラインを定義することができます。カスタムスパークラインを追加するには、addSparklineExメソッドと数式を使用します。

メモ ：数式を使用して作成したスパークラインは、Excelファイルにはエクスポートされません。

次の図は、垂直バースパークラインの使用方法を示します。さまざまな都市における1年間の温度の傾向を示し、頂点（山）と頂点（谷）をすばやく理解できます。


スプレッドシートでは、次の種類のスパークラインを使用できます。各種類の詳細については、スパークラインの画像をクリックしてください。

                                                                                          スパークラインの種類

columnsparkline

縦棒スパークライン

linesparkline

折れ線スパークライン

winlosssparkline

勝敗スパークライン

sparkarea

面スパークライン

sparkpie

円スパークライン

sparkscatter

散布図スパークライン

bullet-sparkline

ブレットスパークライン

sparkspread

スプレッドスパークライン

sparkstacked

積み上げスパークライン

hbar-sparkline

水平バースパークライン

vbar-sparkline

垂直バースパークライン

sparkboxplot

ボックスプロットスパークライン

sparkvari

バリスパークライン

sparkcascade

カスケードスパークライン

sparkmonth

月スパークライン

sparkyear

年スパークライン

pareto-sparkline

パレートスパークライン

rangeblock-spark

レンジブロックスパークライン

histogram-spark

ヒストグラムスパークライン

kpi-spark

ゲージKPIスパークライン

imagesparkline

イメージスパークライン




スパークラインのグループ化

スパークラインをグループ化するには、groupSparklineメソッドを使用します。また、グループ化を解除するには、ungroupSparklineメソッドを使用します。

グループ化すると、複数のスパークラインを一括で変更でき、その処理にかかる時間を節約できます。 また、グループ内で同じ種類のスパークラインと軸を使用することで、スパークラインを簡単に比較できます。

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();

var s1=  sheet.setSparkline(13, 0, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.line
        , setting
        );
var s2 =sheet.setSparkline(13, 3, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.column
        , setting
        );
var s3=  sheet.setSparkline(13, 6, data
        , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
        , GC.Spread.Sheets.Sparklines.SparklineType.winloss
        , setting
        );

// スパークラインをグループ化します。
var group = sheet.groupSparkline([s1,s2,s3]);

group.sparklineType = GC.Spread.Sheets.Sparklines.SparklineType.column;

// スパークラインをグループ解除します。
sheet.ungroupSparkline(group);