マーカーとデータ点

スパークラインのグラフには、マーカーやデータ点を表示できます。スパークラインの頂点（山）、頂点（谷）、負のポイント、始点、終点に、それぞれ異なる色を指定できます。

頂点（山）は、最大値を表すポイントです。頂点（谷）は、最小値を表すポイントです。負のポイントは、負数の値を表します。始点は、グラフ上に最初に描画されるポイントです。終点は、グラフ上に最後に描画されるポイントです。

options.markersColorプロパティは、折れ線スパークラインのみに適用されます。折れ線、縦棒、および勝敗スパークラインの数式には、マーカーを設定するための各種オプションを使用できます。

コードの使用

次のサンプルコードは、スパークラインを追加して、各マーカーの色を指定します。

JavaScript	コードのコピー
activeSheet.setValue(0, 0, "Data Range is A2-A9"); activeSheet.setValue(1, 0, 1); activeSheet.setValue(2, 0, -2); activeSheet.setValue(3, 0, -1); activeSheet.setValue(4, 0, 6); activeSheet.setValue(5, 0, 4); activeSheet.setValue(6, 0, -4); activeSheet.setValue(7, 0, 3); activeSheet.setValue(8, 0, 8); activeSheet.setValue(0, 2, "Date axis range is C2-C9"); activeSheet.setValue(1, 2, '2011/1/5'); activeSheet.setValue(2, 2, '2011/1/1'); activeSheet.setValue(3, 2, '2011/2/11'); activeSheet.setValue(4, 2, '2011/3/1'); activeSheet.setValue(5, 2, '2011/2/1'); activeSheet.setValue(6, 2, '2011/2/3'); activeSheet.setValue(7, 2, '2011/3/6'); activeSheet.setValue(8, 2, '2011/2/19'); 　var data = new GC.Spread.Sheets.Range(1, 0, 8, 1); var dateAxis = new GC.Spread.Sheets.Range(1, 2, 8, 1); 　var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting(); setting.options.showMarkers = true; setting.options.lineWeight = 3; setting.options.displayXAxis = true; setting.options.showFirst = true; setting.options.showLast = true; setting.options.showLow = true; setting.options.showHigh = true; setting.options.showNegative = true; 　setting.options.seriesColor = "Text 2 1"; setting.options.firstMarkerColor = "Text 2 3"; setting.options.negativeColor = "Accent 2 1"; setting.options.markersColor = "Accent 3 1"; setting.options.lowMarkerColor = "Accent 4 1"; setting.options.highMarkerColor = "Accent 6 1"; setting.options.lastMarkerColor = "Accent 6 6"; 　setting.options.axisColor = "Text 1 1"; activeSheet.addSpan(11, 0, 1, 3, null) activeSheet.setText(11, 0, "Sparkline with dateAxis:", null); activeSheet.setText(12, 0, "(1) Line", null); activeSheet.setText(12, 3, "(2)Column", null); activeSheet.setText(12, 6, "(3)Winloss", null); //縦棒 activeSheet.addSpan(14, 0, 4, 3, null); activeSheet.setSparkline(14, 0, data , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical , GC.Spread.Sheets.Sparklines.SparklineType.line , setting , dateAxis , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical ); //列 activeSheet.addSpan(14, 3, 4, 3, null); activeSheet.setSparkline(14, 3, data , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical , GC.Spread.Sheets.Sparklines.SparklineType.column , setting , dateAxis , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical ); //勝敗 activeSheet.addSpan(14, 6, 4, 3, null); activeSheet.setSparkline(14, 6, data , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical , GC.Spread.Sheets.Sparklines.SparklineType.winloss , setting , dateAxis , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical );

JavaScript

コードのコピー

　activeSheet.setValue(0, 0, "Data Range is A2-A9");
activeSheet.setValue(1, 0, 1);
activeSheet.setValue(2, 0, -2);
activeSheet.setValue(3, 0, -1);
activeSheet.setValue(4, 0, 6);
activeSheet.setValue(5, 0, 4);
activeSheet.setValue(6, 0, -4);
activeSheet.setValue(7, 0, 3);
activeSheet.setValue(8, 0, 8);
activeSheet.setValue(0, 2, "Date axis range is C2-C9");
activeSheet.setValue(1, 2, '2011/1/5');
activeSheet.setValue(2, 2, '2011/1/1');
activeSheet.setValue(3, 2, '2011/2/11');
activeSheet.setValue(4, 2, '2011/3/1');
activeSheet.setValue(5, 2, '2011/2/1');
activeSheet.setValue(6, 2, '2011/2/3');
activeSheet.setValue(7, 2, '2011/3/6');
activeSheet.setValue(8, 2, '2011/2/19');

　var data = new GC.Spread.Sheets.Range(1, 0, 8, 1);
var dateAxis = new GC.Spread.Sheets.Range(1, 2, 8, 1);

　var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 3;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;

　setting.options.seriesColor = "Text 2 1";
setting.options.firstMarkerColor = "Text 2 3";
setting.options.negativeColor = "Accent 2 1";
setting.options.markersColor = "Accent 3 1";
setting.options.lowMarkerColor = "Accent 4 1";
setting.options.highMarkerColor = "Accent 6 1";
setting.options.lastMarkerColor = "Accent 6 6";
　setting.options.axisColor = "Text 1 1";
activeSheet.addSpan(11, 0, 1, 3, null)
activeSheet.setText(11, 0, "Sparkline with dateAxis:", null);
activeSheet.setText(12, 0, "(1) Line", null);
activeSheet.setText(12, 3, "(2)Column", null);
activeSheet.setText(12, 6, "(3)Winloss", null);

//縦棒
activeSheet.addSpan(14, 0, 4, 3, null);
activeSheet.setSparkline(14, 0, data
              , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
              , GC.Spread.Sheets.Sparklines.SparklineType.line
              , setting
              , dateAxis
              , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
          );
//列
activeSheet.addSpan(14, 3, 4, 3, null);
activeSheet.setSparkline(14, 3, data
              , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
              , GC.Spread.Sheets.Sparklines.SparklineType.column
              , setting
              , dateAxis
              , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
          );

//勝敗
activeSheet.addSpan(14, 6, 4, 3, null);
activeSheet.setSparkline(14, 6, data
              , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
              , GC.Spread.Sheets.Sparklines.SparklineType.winloss
              , setting
              , dateAxis
              , GC.Spread.Sheets.Sparklines.DataOrientation.Vertical
          );

参照

数式を使用してスパークラインの作成

options フィールド

Sparkline クラス

SparklineAxisMinMax 列挙体

setSparkline メソッド