<script>
$(document).ready(function ()

{
// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// activesheetを取得します。
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();

// チャートのデータを準備します。
activeSheet.setValue(0, 1, "2015年");
activeSheet.setValue(0, 2, "2016年");
activeSheet.setValue(0, 3, "2017年");
activeSheet.setValue(0, 4, "2018年");
activeSheet.setValue(0, 5, "2019年");
activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");
activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");
activeSheet.setColumnWidth(0, 120);
for (var r = 1; r <= 2; r++) {
for (var c = 1; c <= 5; c++) {
  activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
}
}

// 集合縦棒チャートを追加します。
chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 500, 400);

var series = chart_columnClustered.series();
series.add({
chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
name: "Sheet1!$A$2",
xValues: "Sheet1!$B$1:$F$1",
yValues: "Sheet1!$B$2:$D$2"
});
series.add({
chartType: GC.Spread.Sheets.Charts.ChartType.line,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,
name: "Sheet1!$A$3",
xValues: "Sheet1!$B$1:$F$1",
yValues: "Sheet1!$B$3:$D$3"
});

var axes = chart_columnClustered.axes();

// 第1カテゴリ軸を設定します。
axes.primaryCategory.style.color = 'green';
axes.primaryCategory.title.color = 'green';
axes.primaryCategory.title.text = '第1カテゴリ軸';

// 第1値軸を設定します。
axes.primaryValue.style.color = 'blue';
axes.primaryValue.title.color = 'blue';
axes.primaryValue.title.text = '第1値軸';
axes.primaryValue.title.fontSize = 16;

// 「第1値軸」に対して組み込みの表示単位を設定します。
axes.primaryValue.displayUnit = {
unit: GC.Spread.Sheets.Charts.DisplayUnit.thousands,  // 組み込みの表示単位は数千です。
visible: true,
style: {
  color: 'red',
  transparency: 0.1,
  fontFamily: 'arial',
  fontSize: 14
}
};

// 第2カテゴリ軸を設定します。
axes.secondaryCategory.visible = true;
axes.secondaryCategory.style.color = 'green';
axes.secondaryCategory.title.color = 'green';
axes.secondaryCategory.title.text = '第2カテゴリ軸';
axes.secondaryCategory.title.fontSize = 16;

// 「第2値軸」に対して組み込みの表示単位を設定します。
axes.secondaryValue.displayUnit = {
unit: 500, // カスタム表示単位は500です。
visible: true,
style: {
  color: 'red',
  transparency: 0.1,
  fontFamily: 'Verdana',
  fontSize: 14
}
};

// 第2値軸を設定します。
axes.secondaryValue.style.color = 'blue';
axes.secondaryValue.title.color = 'blue';
axes.secondaryValue.format = 'General';
axes.secondaryValue.title.text = '第2値軸';
chart_columnClustered.axes(axes);

// チャートのタイトルを設定します。
var title = chart_columnClustered.title();
title.text = "年間売上高";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "Red";
chart_columnClustered.title(title);
activeSheet.resumePaint();
});
</script>

    // Spreadを初期化します。
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // アクティブシートを取得します。
    var activeSheet = spread.getActiveSheet();
    // 配列数式を作成します。
    var dataArray = [
        ["", new Date(2019, 1, 1), new Date(2019, 2, 1), new Date(2019, 3, 1), new Date(2019, 4, 1), new Date(2019, 5, 1), new Date(2019, 6, 1)],
        ["Chrome", 5.782, 6.263, 7.766, 8.389, 9.830, 11.260],
        ["FireFox", 4.284, 4.130, 3.951, 3.760, 3.631, 3.504],
        ["IE", 2.814, 2.491, 2.455, 1.652, 1.073, 0.834],
    ];
    // 列幅を設定します。
    for (var i = 0; i < 8; i++) {
        activeSheet.setColumnWidth(i, 80.0, GC.Spread.Sheets.SheetArea.viewport);
    }
    // 配列を設定します。
    activeSheet.setArray(0, 0, dataArray);
    // 範囲に日付書式を設定します。
    activeSheet.getRange(0, 0, 1, 7).formatter("yyyy/m/d");
    // チャートを追加します。
    var chart = activeSheet.charts.add('ChartWithDateAxis', GC.Spread.Sheets.Charts.ChartType.line, 2, 85, 400, 400, 'A1:G4');
    // チャートのタイトルを設定します。
    chart.title({ text: "日付軸付きのチャート" });
    // 軸のプロパティを設定します。
    var axes = chart.axes();

    // DateAxisとしてprimaryCategoryのプロパティを設定します。
    axes.primaryCategory.baseUnit = GC.Spread.Sheets.Charts.TimeUnit.months;
    axes.primaryCategory.majorUnit = 2;
   // axes.primaryCategory.minorUnit = 1;
    axes.primaryCategory.majorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.months;
 //   axes.primaryCategory.minorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.days;
    chart.axes(axes);
});

var axesMin = minMaxChart.axes();
axesMin.primaryValue.scaling = {
    orientation: GC.Spread.Sheets.Charts.AxisOrientation.minMax
    // または 
    //方向　: 0
};
minMaxChart.axes(axesMin);

var axesMax = maxMinChart.axes();
axesMax.primaryValue.scaling = {
    orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin
    // または 
    //方向　: 1
};
maxMinChart.axes(axesMax);