折れ線チャート

折れ線チャートは、時間の経過に伴う連続データの変化を、均等に目盛を付けた軸上で視覚化するチャートであり、幅広い用途に使用されます。このチャートは、月間、四半期ごと、会計年度ごとなど、一定の間隔でデータの傾向を分析するような場合に適します。

折れ線チャートには、ワークシートの列または行ごとにまとめたデータをプロットできます。カテゴリデータは水平軸上に均等に配置され、すべての値データは垂直軸上に分布します。

Spread.Sheetsでは、以下の種類の折れ線チャートがサポートされます。以下の例では、それぞれの種類の折れ線チャートを使用して、さまざまな電子機器カテゴリ（携帯電話、ラップトップ、タブレット）に対する第1四半期、第2四半期、および第3四半期の年間売上記録の傾向を表しています。

1. 折れ線チャート

   時間の経過に伴うデータ値をプロットすることで、データの傾向を表します。

   次に、折れ線チャートの例を示します。

   
   

2. 積み上げ折れ線チャート

   個々のデータ値、または順序付けたカテゴリの分布傾向を、積み上げた折れ線によって時間間隔ごとに表すチャートです。次に、積み上げ折れ線チャートの例を示します。

   
   

3. 100%積み上げ折れ線チャート

   個々のデータ値、または順序付けたカテゴリの全体への寄与度を、積み上げた折れ線によって時間間隔ごとに百分率（%）で表すチャートです。

   次に、100%積み上げ折れ線チャートの例を示します。

   
   

4. マーカー付き折れ線チャート

   データ値をマーカーで表すチャートです。カテゴリ数が多い場合、または値が概数である場合に適するチャートです。

   次に、マーカー付き折れ線チャートの例を示します。

   
   

   
   

5. マーカー付き積み上げ折れ線チャート

   データ値をマーカーで表すチャートです。このチャートでは通常、時系列に、または等間隔に配置したカテゴリ上での、各値の寄与度の傾向を表します。

   次に、マーカー付き積み上げ折れ線チャートの例を示します。

   
   

   
   

6. マーカー付き100%積み上げ折れ線

   このチャートでは、個々のデータ値をマーカーで表します。通常、時系列に、または等間隔に配置したカテゴリ上での、各値の寄与度の傾向を百分率（%）で表します。カテゴリ数が多い場合、または値が概数である場合に適するチャートです。

   次に、マーカー付き100%積み上げ折れ線チャートの例を示します。

   
   

コードの使用

次のコードは、スプレッドシートにさまざまな種類の折れ線チャートを追加する方法を示します。

var chart_line, chart_lineStacked, chart_lineStacked100, sheet;
window.onload = function () {
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   sheet = spread.getActiveSheet();
   sheet.suspendPaint();
   // チャートのデータを準備します。
   sheet.setValue(0, 1, "Q1");
   sheet.setValue(0, 2, "Q2");
   sheet.setValue(0, 3, "Q3");
   sheet.setValue(1, 0, "Mobile Phones");
   sheet.setValue(2, 0, "Laptops");
   sheet.setValue(3, 0, "Tablets");
   for (var r = 1; r <= 3; r++) {
       for (var c = 1; c <= 3; c++) {
           sheet.setValue(r, c, parseInt(Math.random() * 100));
       }
   }
    
   // 折れ線チャートを追加します。
   chart_line = sheet.charts.add('chart_line', GC.Spread.Sheets.Charts.ChartType.line, 250, 20, 600, 400, "A1:D4");
   // 積み上げ折れ線チャートを追加します。
   chart_lineStacked = sheet.charts.add('chart_lineStacked', GC.Spread.Sheets.Charts.ChartType.lineStacked, 250, 480, 600, 400, "A1:D4");
   // 100%積み上げ折れ線チャートを追加します。
   chart_lineStacked100 = sheet.charts.add('chart_lineStacked100', GC.Spread.Sheets.Charts.ChartType.lineStacked100, 250, 900, 600, 400, "A1:D4");
   sheet.resumePaint();
};

滑らかな折れ線チャート

smooth プロパティを使用して、折れ線に角度をつけずに、データの傾向を曲線的に表したり、滑らかで見栄え良く表示したりすることができます。なお、smooth プロパティは標準の折れ線チャートのほか、次の折れ線チャートの種類で使用できます。

• 積み上げ折れ線チャート

• 100%積み上げ折れ線チャート

• マーカー付き折れ線チャート

• マーカー付き積み上げ折れ線チャート

• マーカー付き100%積み上げ折れ線

次の図は、smoothプロパティを設定して製品の四半期売上を曲線で表示します。

次のサンプルコードは、smooth プロパティを実装する方法を示します。

// 滑らかな系列。
var series0 = chart_line.series().get(0);
series0.smooth = true;
chart_line.series().set(0, series0);