スパークラインシェイプ

スパークラインは、情報を視覚的かつ魅力的に表示するグラフであり、膨大なデータを小さく簡潔に表現することができます。SpreadJSでは、スパークラインをシェイプまたはピクチャシェイプとして利用でき、視覚的な表現を強調することや、スパークラインを移動／拡大縮小／回転することもできます。

スパークラインはシェイプやピクチャシェイプとして追加することで、プレゼンテーションで情報を簡潔に分かりやすく伝えたり、UIでタスクの進捗状況を表示したりすることができます。

sparkline-shapepic

スパークラインの数式に塗りつぶしの src または style.fill.src プロパティをバインドすることで、スパークラインをピクチャシェイプとして追加することができます。それと同じく、スパークライン数式にstyle.fill.src プロパティをバインドすることでシェイプとして追加することもできます。そのうえに、SpreadJSでは、src属性にバインドするときにスパークラインのグラデーションや固定色、その他の塗りつぶしを追加することができます。

次のサンプルコードは、長方形をシェイプとして追加し、列スパークラインにバインドする方法を示します。

// シェイプを追加します。
var rect = sheet.shapes.add("rect", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 0, 300, 142, 162); 

// 画像塗りつぶしを設定します。
var style = rect.style(); 
style.fill = { src: '' }; 
rect.style(style); 
sheet.setValue(11,0,"販売:"); 
sheet.setValue(11,3,"メモ:"); 

// スパークライン数式を画像塗りつぶしのsrcにバインドします。
rect.setFormula('style.fill.src', '=COLUMNSPARKLINE(Sheet1!B3:B9,0)');

次のサンプルコードは、ピクチャシェイプを円スパークラインにバインドし、単色背景の塗りつぶしを設定する方法を示します。

// ピクチャシェイプを追加します。
var pic = sheet.shapes.addPictureShape("pic", '', 400, 300, 142, 162); 

// スパークライン数式をピクチャのsrcにバインドします。
pic.setFormula('src', '=PIESPARKLINE(Sheet1!B3:B8,"#919F81","#D7913E","CEA722","#B58091","#8974A9","#728BAD")'); 

// 単色背景を設定します。
var style = pic.style(); 
style.fill = { color: '#4F80BC' }; 
pic.style(style);