水平軸と垂直軸

折れ線、縦棒、および勝敗スパークラインでは、水平軸を表示したり、垂直方向を指定したりできます。

水平軸を表示するには、 options.displayXAxis プロパティを使用します。水平または垂直の方向を指定するには、dataOrientationメソッドを使用します。データ範囲、または日付軸の範囲を指定できます。折れ線、縦棒、および勝敗スパークラインの数式には、軸または方向を設定するための各種オプションを使用できます。

次の図は、水平および垂直データの範囲、さらに日付軸範囲を示します。水平日付範囲は、水平データ範囲と似ています。

コードの使用

次のサンプルコードは、日付軸を表示します。

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
        );

コードの使用

次のサンプルコードは、データ範囲の水平データ(1,2,4,8,6)を使用したスパークラインを作成します。分かりやすく例示するため、図の下には該当数値を表示しています。

activeSheet.setValue(1, 0, 10);
activeSheet.setValue(2, 0, 0);
activeSheet.setValue(3, 0, -3);
activeSheet.setValue(4, 0, -5);
activeSheet.setValue(0, 0, 1);
activeSheet.setValue(0, 1, 2);
activeSheet.setValue(0, 2, 4);
activeSheet.setValue(0, 3, 8);
activeSheet.setValue(0, 4, 6);
activeSheet.setValue(0, 5, new Date(2014, 1, 1));
activeSheet.setValue(1, 5, new Date(2014, 9, 1));
activeSheet.setValue(2, 5, new Date(2014, 7, 1));
activeSheet.setValue(3, 5, new Date(2014, 5, 1));
activeSheet.setValue(4, 5, new Date(2014, 3, 1));
var sparkline = activeSheet.setSparkline(5, 0, new GC.Spread.Sheets.Range(0, 0, 5, 5), GC.Spread.Sheets.Sparklines.DataOrientation.Horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, new GC.Spread.Sheets.Sparklines.SparklineSetting(), new GC.Spread.Sheets.Range(0, 5, 5, 1), GC.Spread.Sheets.Sparklines.DataOrientation.Vertical);
sparkline.displayDateAxis(false);

コードの使用

次のサンプルコードは、データ範囲の垂直データ(1,10,0,-3,-5)を使用したスパークラインを作成します。分かりやすく例示するため、図の下には該当数値を表示しています。

activeSheet.setValue(1, 0, 10);
activeSheet.setValue(2, 0, 0);
activeSheet.setValue(3, 0, -3);
activeSheet.setValue(4, 0, -5);
activeSheet.setValue(0, 0, 1);
activeSheet.setValue(0, 1, 2);
activeSheet.setValue(0, 2, 4);
activeSheet.setValue(0, 3, 8);
activeSheet.setValue(0, 4, 6);
activeSheet.setValue(0, 5, new Date(2014, 1, 1));
activeSheet.setValue(1, 5, new Date(2014, 9, 1));
activeSheet.setValue(2, 5, new Date(2014, 7, 1));
activeSheet.setValue(3, 5, new Date(2014, 5, 1));
activeSheet.setValue(4, 5, new Date(2014, 3, 1));
var sparkline = activeSheet.setSparkline(5, 0, new GC.Spread.Sheets.Range(0, 0, 5, 5), GC.Spread.Sheets.Sparklines.DataOrientation.Horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, new GC.Spread.Sheets.Sparklines.SparklineSetting(), new GC.Spread.Sheets.Range(0, 5, 5, 1), GC.Spread.Sheets.Sparklines.DataOrientation.Vertical);
sparkline.displayDateAxis(false);
sparkline.dataOrientation(GC.Spread.Sheets.Sparklines.DataOrientation.Vertical);

コードの使用

次のサンプルコードは、垂直データ(1,10,0,-3,-5)と日付範囲を使用したスパークラインを作成します。分かりやすく例示するため、図内には該当数値を表示しています。

activeSheet.setValue(1, 0, 10);
activeSheet.setValue(2, 0, 0);
activeSheet.setValue(3, 0, -3);
activeSheet.setValue(4, 0, -5);
activeSheet.setValue(0, 0, 1);
activeSheet.setValue(0, 1, 2);
activeSheet.setValue(0, 2, 4);
activeSheet.setValue(0, 3, 8);
activeSheet.setValue(0, 4, 6);
activeSheet.setValue(0, 5, new Date(2014, 1, 1));
activeSheet.setValue(1, 5, new Date(2014, 9, 1));
activeSheet.setValue(2, 5, new Date(2014, 7, 1));
activeSheet.setValue(3, 5, new Date(2014, 5, 1));
activeSheet.setValue(4, 5, new Date(2014, 3, 1));
var sparkline = activeSheet.setSparkline(5, 0, new GC.Spread.Sheets.Range(0, 0, 5, 5), GC.Spread.Sheets.Sparklines.DataOrientation.Horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, new GC.Spread.Sheets.Sparklines.SparklineSetting(), new GC.Spread.Sheets.Range(0, 5, 5, 1), GC.Spread.Sheets.Sparklines.DataOrientation.Vertical);
 sparkline.dataOrientation(GC.Spread.Sheets.Sparklines.DataOrientation.Vertical);
 sparkline.displayDateAxis(true);