レーダーチャート

レーダーチャートは、3次元以上の多次元変数を表すために使用します。レーダーチャートを使用すると、データセット内の各変数の重みを明確に視覚化できます。これにより、類似するチャート間を明確に比較できます。レーダーチャートには、ワークシートの列または行ごとにまとめたデータをプロットできます。

SpreadJSでは、レーダー(radar)、塗りつぶしレーダー(radarFilled)、マーカー付きレーダー(radarMarkers)の3種類のレーダーチャートがサポートされます。この種類のチャートを取得するには、GC.Spread.Sheets.Charts.ChartType.radarプロパティを使用します。 たとえば、このチャートAPIを使用することで、レーダーチャートを挿入したり、チャートのスタイルを変更したりできます。 マーカー付きレーダーでは、マーカーの色、形状、境界線をカスタマイズできます。 レーダーおよびマーカー付きレーダーは、マーカーを付けて個々のデータ値を強調することも、マーカーのない折れ線として表示することもできます。 塗りつぶしレーダーチャートには、塗りつぶし色を設定できます。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {sheetCount: 3}); initSpread(spread); }; 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); // prepare data for chart var dataArray = [ ['', 'Bob', 'David'], ['Math', 87, 64], ['Physics', 79, 59], ['History ', 58, 75], ['Biology', 64, 96], ['Geography', 49, 85], ['History', 64, 83] ]; 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, chartType) { //add chart var chart = sheet.charts.add(sheet.name() + ' Chart', chartType, 250, 0, 500, 410, '$B$2:$D$7'); // custom chart style changeChartLegend(chart); changeChartArea(chart); changeChartTitle(chart); changeChartAxes(chart); changeChartSeries(chart); if (chartType === GC.Spread.Sheets.Charts.ChartType.radarMarkers) { changeMarker(chart); } else { changeChartDataLabels(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 = 'Reports'; title.fontSize = 22; title.fontFamily = 'Calibri normal'; chart.title(title); } function changeChartAxes(chart) { var axes = chart.axes(); axes.primaryCategory.style.color = '#666'; axes.primaryValue.majorGridLine.color = '#ccc'; chart.axes(axes); } function changeChartSeries(chart) { var series = chart.series(); var bobSeries = series.get(0); bobSeries.border.color = 'skyblue'; bobSeries.backColor = 'skyblue'; bobSeries.backColorTransparency = '0.5'; series.set(0, bobSeries); var davidSeries = series.get(1); davidSeries.border.color = 'orange'; davidSeries.backColor = 'orange'; davidSeries.backColorTransparency = '0.5'; series.set(1, davidSeries); } function changeMarker(chart) { var series = chart.series(); var bobSeries = series.get(0); bobSeries.symbol.shape = 1; bobSeries.symbol.size = 20; series.set(0, bobSeries); var davidSeries = series.get(1); davidSeries.symbol.shape = 9; davidSeries.symbol.size = 11; series.set(1, davidSeries); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="ss" class="sample-tutorial"></div></body> </html>
.sample-tutorial { height: 100%; width: 100%; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }