Spread.Sheets
レーダーチャートの作成
Spread.Sheets > 開発者の手引き > データ視覚化とオブジェクトの管理 > チャートの概要 > チャートの種類の処理 > レーダーチャートの作成

レーダーチャート（別名スパイダーチャート）は、行と列にプロットされた多変量データをグラフィカルに表現するための2次元チャートです。

Spread.Sheetsのスプレッドシートでは、レーダーチャートがサポートされます。これによりユーザーは動的なデータ比較を行い、包括的な情報分析を実施できます。さらに、レーダーチャートを使用すると、複数のデータ系列の集計値を詳細に評価できるため、情報を簡単に、短時間で視覚化して操作できます。

レーダーチャートの処理

レーダーチャートは通常、一連の特性に基づき複数のエンティティを比較するために使用します。レーダーチャートでは、3つ以上の定量的変数を軸上に表します。個々のカテゴリにはそれぞれの値軸があり、各値軸は中心から放射線状に広がっています。系列値は直線で結ばれ、軸の相対位置または角度は、通常は予測不可能です。

Spread JSでは、「レーダー」、「塗りつぶしレーダー」、「マーカー付きレーダー」の3種類のレーダーチャートがサポートされます。

例

次の例では、「Lisa」と「Tim」という2人の生徒の試験成績を分析します。試験が行われたのは、数学、英語、歴史、生物学、地理、動物学の6教科。ここでは、次のスプレッドシートのデータを、それぞれの種類のレーダーチャートを使用して分析します。


              
  1.  レーダー        

    次の図は、2人の生徒の試験成績を分析するレーダーチャートです。個々の生徒の領域は、それぞれ別の色の線で表されます。

            

  2.  塗りつぶしレーダー        

    次の図は、2人の生徒の試験成績を分析する塗りつぶしレーダーチャートです。個々の生徒の領域は、それぞれ別の色で塗りつぶされます。

            

  3.  マーカー付きレーダー        

    次の図は、2人の生徒の試験成績を分析するマーカー付きレーダーチャートです。各教科の点数をマーカーで表すとともに、個々の生徒の領域をそれぞれ別の色の線で表しています。

            

コードの使用

次のサンプルコードは、レーダー、塗りつぶしレーダー、マーカー付きレーダーの各レーダーチャートをワークシート上に作成し、2人の生徒の試験成績を分析します。

JavaScript
コードのコピー

  function initSpread(spread)

{
   var sheet = spread.getSheet(0);
   var chartType = [{
        type: GC.Spread.Sheets.Charts.ChartType.radar,
        desc: 'radar'},
      {
        type: GC.Spread.Sheets.Charts.ChartType.radarFilled,
        desc: 'radarFilled'
      },
      {
        type: GC.Spread.Sheets.Charts.ChartType.radarMarkers,
        desc: 'radarMarkers'
      }];

    spread.suspendPaint();

    var sheets = spread.sheets;
    for (var i = 0; i < chartType.length; i++)

    {
      var sheet = sheets[i];
      initSheet(sheet, chartType[i].desc);
      initChart(sheet, chartType[i].type);
      customDataAreaStyle(sheet);
     }

      spread.options.tabStripRatio = 0.8;

      spread.resumePaint();

}

  function initSheet(sheet, sheetName)

{
    sheet.name(sheetName);

    // チャートのデータを追加します。
     var dataArray =

     [
       ['', '田中', '山田'],
       ['数学', 87, 64],
       ['英語', 79, 59],
       ['歴史', 58, 75],
       ['生物', 64, 96],
       ['地理', 49, 85],
               
     ];

    sheet.setArray(1, 1, dataArray);
}

  function customDataAreaStyle(sheet)

{
  sheet.setColumnWidth(0, 20);
  for (var i = 1; i < 4; i++)

     {
       sheet.setColumnWidth(i, 100);
     }

   sheet.options.gridline.showHorizontalGridline = false;
   sheet.options.gridline.showVerticalGridline = false;

   sheet.getRange(1, 1, 7, 3)
   .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
   .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin),  

   { all: true });

   sheet.getRange(1, 2, 1, 3).font('bold normal 10pt Arial');
   sheet.getRange(2, 1, 6, 1).font('bold normal 10pt Arial');
}

  function initChart(sheet, charType)

{
   // チャートを追加します。
    var chart = sheet.charts.add(sheet.name() + ' Chart', charType, 250, 0, 500, 410, 

    '$B$2:$D$7');
  

  // チャートのスタイルをカスタマイズします。
      changeChartLegend(chart);
      changeChartArea(chart);
      changeChartDataLabels(chart);
      changeChartTitle(chart);
      changeChartAxes(chart);
      changeChartSeries(chart);
}

  function changeChartLegend(chart)

{
     var legend = chart.legend();
     legend.visible = true;
     legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
     chart.legend(legend);
}

  function changeChartArea(chart)

{
     var chartArea = chart.chartArea();
     chartArea.fontSize = 14;
     chart.chartArea(chartArea);
}

  function changeChartDataLabels(chart)

{
     var dataLabels = chart.dataLabels();
     dataLabels.showValue = true;
     dataLabels.showSeriesName = false;
     dataLabels.showCategoryName = false;
     dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above;
     chart.dataLabels(dataLabels);
}

  function changeChartTitle(chart)

{
     var title = chart.title();
     title.text = 'テスト結果';
     title.fontSize = 22;
     title.color = "#b20000";
     title.fontFamily = 'Cambria';
     chart.title(title);
}

   function changeChartAxes(chart)

{
     var axes = chart.axes();
     axes.primaryCategory.style.color = '#000000';
     axes.primaryValue.majorGridLine.color = '#ccc';
     chart.axes(axes);
}

   function changeChartSeries(chart)

{
     var series = chart.series();

     var lisaSeries = series.get(0);
     lisaSeries.border.color = 'skyblue';
     lisaSeries.backColor = 'skyblue';
     lisaSeries.backColorTransparency = '0.5';
     series.set(0, lisaSeries);

     var timSeries = series.get(1);
     timSeries.border.color = 'orange';
     timSeries.backColor = 'orange';
     timSeries.backColorTransparency = '0.5';
     series.set(1, timSeries);
}

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.