レーダーチャート

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

<p>SpreadJSでは、レーダー(radar)、塗りつぶしレーダー(radarFilled)、マーカー付きレーダー(radarMarkers)の3種類のレーダーチャートがサポートされます。この種類のチャートを取得するには、<strong>GC.Spread.Sheets.Charts.ChartType.radar</strong>プロパティを使用します。</p> <p>たとえば、このチャートAPIを使用することで、<strong>レーダー</strong>チャートを挿入したり、チャートのスタイルを変更したりできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'radar'</span>, GC.Spread.Sheets.Charts.ChartType.radar, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>, <span class="hljs-string">'A1:D4'</span>) <span class="hljs-keyword">var</span> series = chart.series().get(index ?) <span class="hljs-comment">// 系列インデックスを使用してパラメータを設定できます。パラメータを指定すると、get(index)によって、このインデックスに対応する系列情報を取得できます。パラメータを指定しない場合は、get()はすべての系列を含む配列を返します。</span> <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>].backColor = <span class="hljs-string">'red'</span>; chart.series().set(index, ser); </code></pre> <p><strong>マーカー付きレーダー</strong>では、マーカーの色、形状、境界線をカスタマイズできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> seriesItem = chart.series().get(index ?); bobSeries.symbol.shape = <span class="hljs-number">1</span> <span class="hljs-comment">/** dash */</span>; bobSeries.symbol.size = <span class="hljs-number">20</span>; bobSeries.symbol.fill = <span class="hljs-string">"red"</span>; bobSeries.symbol.border.size = <span class="hljs-number">2</span>; bobSeries.symbol.border.color = <span class="hljs-string">"rgb(127, 0, 127)"</span>; bobSeries.symbol.border.lineType = <span class="hljs-number">7</span> <span class="hljs-comment">/** sysDot */</span>; series.set(index ?, seriesItem); </code></pre> <p><strong>レーダー</strong>および<strong>マーカー付きレーダー</strong>は、マーカーを付けて個々のデータ値を強調することも、マーカーのない折れ線として表示することもできます。</p> <p><strong>塗りつぶしレーダー</strong>チャートには、塗りつぶし色を設定できます。</p>
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; }