系列

チャートの系列の表示方法をカスタマイズすることができます。

チャートの 系列 では、以下のカスタマイズに対応しています。 chartType axisGroup backColor backColorTransparency border name xValues yValues errorBars trendlines dataLabels bubbleSizes doughnutHoleSize gapWidth overlap チャートの系列コレクションから系列アイテムを取得、追加、削除したり、系列ごとに名前、ボーダー、幅、ボーダーの色、Y値、X値、塗りつぶしの色をカスタマイズすることができます。 データラベル: データラベルを使用して、データ系列のデータポイントの詳細を識別することができます。 チャートの系列データのラベルスタイルは、以下のオプションでカスタマイズすることができます。 showValue showSeriesName showCategoryName showPercentage separator position format color transparency backColor backColorTransparency borderColor borderWidth borderColorTransparency bubbleSizes: バブルサイズの計算式です。バブル**チャートに使用します。 doughnutHoleSize: ドーナツチャートの穴の大きさを指定します。最大値は0.9、最小値は0です。 gapWidth: 棒グラフとファンネルチャートの系列の間隔を指定します。最大値は5、最小値は0です。 overlap: 棒グラフとファンネルチャートの系列の重なりを指定します。 最大値は1、最小値は-1です。 error bars: エラーバーでは、チャートの誤差や標準偏差を素早く表示することができます。 詳細は、「エラーバー」のデモでご確認ください。 trendlines: トレンドラインは、特定のデータ系列の傾き(またはトレンド)を示す追加のラインです。 詳細は、「近似曲線」のデモでご確認ください。
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); initEvent(spread); //readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList()); } var ColumnGroup = [ GC.Spread.Sheets.Charts.ChartType.columnClustered, GC.Spread.Sheets.Charts.ChartType.columnStacked, GC.Spread.Sheets.Charts.ChartType.columnStacked100, GC.Spread.Sheets.Charts.ChartType.clusteredColumn, GC.Spread.Sheets.Charts.ChartType.waterfall ]; var BarGroup = [ GC.Spread.Sheets.Charts.ChartType.barClustered, GC.Spread.Sheets.Charts.ChartType.barStacked, GC.Spread.Sheets.Charts.ChartType.barStacked100 ]; var positions = [ GC.Spread.Sheets.Charts.DataLabelPosition.center, GC.Spread.Sheets.Charts.DataLabelPosition.insideEnd, GC.Spread.Sheets.Charts.DataLabelPosition.outsideEnd, GC.Spread.Sheets.Charts.DataLabelPosition.bestFit, GC.Spread.Sheets.Charts.DataLabelPosition.below ]; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); var dataArray = [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158], ["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192], ["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ]; sheet.setArray(0, 0, dataArray); var columnChart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.column, 30, 120, 480, 270, "A1:D5"); columnChart.title({ text: "Column Chart" }); var bubbleChart = sheet.charts.add('Chart2', GC.Spread.Sheets.Charts.ChartType.bubble, 520, 120, 480, 270, "A1:D5"); bubbleChart.title({ text: "Bubble Chart" }); var DoughnutChart = sheet.charts.add('Chart3', GC.Spread.Sheets.Charts.ChartType.doughnut, 30, 400, 480, 270, "A1:D5"); DoughnutChart.title({ text: "Doughnut Chart" }); setDataLabel(columnChart); setDataLabel(bubbleChart); setDataLabel(DoughnutChart); sheet.resumePaint(); } function setDataLabel (chart) { var dataLabels = chart.series().get(0).dataLabels; dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; chart.series().set(0, dataLabels); } function initEvent(spread) { spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (chart) { readSetting(chart); } }); _getElementById("apply").addEventListener('click', function () { applySetting(); }); } function readSetting(chart) { var series = chart.series().get(0); if (series.backColor && series.backColor.startsWith('#')) { _getElementById("backColor").value = series.backColor; } else { _getElementById("backColor").value = '#5b9bd5'; } if (series.border && series.border.borderColor && series.border.borderColor.startsWith('#')) { _getElementById("borderColor").value = series.border.borderColor; } else { _getElementById("borderColor").value = '#FFFFFF'; } _getElementById("backColorTransparency").value = series.backColorTransparency || 0; _getElementById("borderLineType").value = (series.border && series.border.lineType); _getElementById("borderWidth").value = (series.border && series.border.width); _getElementById("borderColorTransparency").value = (series.border && series.border.transparency); if (series.dataLabels) { _getElementById("dataLabelShowValue").checked = series.dataLabels.showValue; _getElementById("dataLabelShowSeriesName").checked = series.dataLabels.showSeriesName; _getElementById("dataLabelShowCategoryName").checked = series.dataLabels.showCategoryName; _getElementById("dataLabelShowPercentage").checked = series.dataLabels.showPercentage; _getElementById("separator").value = series.dataLabels.separator; _getElementById("position").value = positions.indexOf(series.dataLabels.position); } _getElementById("name").value = series.name; _getElementById("xValues").value = series.xValues; _getElementById("yValues").value = series.yValues; if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.bubble) { _getElementById("bubbleSizes").disabled = ''; _getElementById("bubbleSizes").value = series.bubbleSizes; } else { _getElementById("bubbleSizes").disabled = 'disabled'; _getElementById("bubbleSizes").value = ''; } if (ColumnGroup.indexOf(chart.chartType()) !==-1 || BarGroup.indexOf(chart.chartType()) !== -1) { _getElementById("gapWidth").disabled = ''; _getElementById("overlap").disabled = ''; _getElementById("gapWidth").value = series.gapWidth; _getElementById("overlap").value = series.overlap; } else { _getElementById("gapWidth").disabled = 'disabled'; _getElementById("overlap").disabled = 'disabled'; _getElementById("gapWidth").value = ''; _getElementById("overlap").value = ''; } if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.doughnut) { _getElementById("doughnutHoleSize").disabled = ''; _getElementById("doughnutHoleSize").value = series.doughnutHoleSize; } else { _getElementById("doughnutHoleSize").disabled = 'disabled'; _getElementById("doughnutHoleSize").value = ''; } } function applySetting() { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (!chart) { return; } var border = { lineType: _getValue("borderLineType"), width: _getFloat("borderWidth"), color: _getText("borderColor"), transparency: _getFloat("borderColorTransparency") }; if (border.lineType && !border.width) { border.width = 1; } var series = { backColor: _getText("backColor"), backColorTransparency: _getText("backColorTransparency") || 0, name: _getText("name"), xValues: _getText("xValues"), yValues: _getText("yValues"), dataLabels: { showValue: _getBoolean("dataLabelShowValue"), showSeriesName: _getBoolean("dataLabelShowSeriesName"), showCategoryName: _getBoolean("dataLabelShowCategoryName"), showPercentage: _getBoolean("dataLabelShowPercentage"), separator: _getText("separator"), position: positions[_getValue("position")] } } if (border) { series.border = border; } if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.bubble) { series.bubbleSizes = _getFloat("bubbleSizes") } else if (ColumnGroup.indexOf(chart.chartType()) !==-1 || BarGroup.indexOf(chart.chartType()) !== -1) { series.gapWidth = _getFloat("gapWidth") series.overlap = _getFloat("overlap") } else if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.doughnut) { series.doughnutHoleSize = _getFloat("doughnutHoleSize") } chart.series().set(0, series); } function getActiveChart(sheet) { var activeChart = null; sheet.charts.all().forEach(function (chart) { if (chart.isSelected()) { activeChart = chart; } }); return activeChart; } function _getElementById(id) { return document.getElementById(id); } function _getBoolean(id) { return _getElementById(id).checked; } function _getFloat(id) { return isNaN(parseFloat(_getElementById(id).value)) ? undefined : parseFloat(_getElementById(id).value); } function _getValue(id) { return _getElementById(id).value ? parseInt(_getElementById(id).value) : undefined; } function _getText(id) { return _getElementById(id).value ? _getElementById(id).value : undefined; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ja-jp" /> <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 class="sample-tutorial"> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>以下のプロパティを変更し、[設定]ボタンを押して適用します。</p> <div class="option-row"> <label for="backColor">背景の色</label> <input id="backColor" type="color" /> </div> <div class="option-row"> <label for="backColorTransparency">背景の透明度</label> <input id="backColorTransparency" type="text" /> </div> <div class="option-row"> <label for="borderLineType">枠線の種類</label> <select id="borderLineType"> <option value="0">実線</option> <option value="1">点線(角)</option> <option value="2">破線</option> <option value="3">長破線</option> <option value="4">一点鎖線</option> <option value="5">長鎖線</option> <option value="6">長二点鎖線</option> <option value="7">短破線</option> <option value="8">短点線</option> <option value="9">短一点鎖線</option> <option value="10">二点鎖線</option> <option value="11">点線(丸)</option> </select> </div> <div class="option-row"> <label for="borderWidth">枠線の太さ</label> <input id="borderWidth" type="number" min="0" max="100" /> </div> <div class="option-row"> <label for="borderColor">枠線の色</label> <input id="borderColor" type="color" /> </div> <div class="option-row"> <label for="borderColorTransparency">枠線の透明度</label> <input id="borderColorTransparency" type="number" min="0" max="1" /> </div> <div class="option-row"> <label for="dataLabelShowValue">データラベルに値を表示する</label> <input type="checkbox" id="dataLabelShowValue" /> </div> <div class="option-row"> <label for="dataLabelShowSeriesName">データラベルに系列名を表示する</label> <input type="checkbox" id="dataLabelShowSeriesName" /> </div> <div class="option-row"> <label for="dataLabelShowCategoryName">データラベルにカテゴリ名を表示する</label> <input type="checkbox" id="dataLabelShowCategoryName" /> </div> <div class="option-row"> <label for="dataLabelShowPercentage">データラベルにパーセンテージを表示する</label> <input type="checkbox" id="dataLabelShowPercentage" /> </div> <div class="option-row"> <label for="separator">区切り文字</label> <select type="text" id="separator"> <option value=",">,(コンマ)</option> <option value=";">;(セミコロン)</option> <option value=".">,(ピリオド)</option> <option value=" ">(改行)</option> <option value=" ">(スペース)</option> </select> </div> <div class="option-row"> <label for="position">ラベルの位置</label> <select type="text" id="position"> <option value="0">中央</option> <option value="1">内側上</option> <option value="2">外側上</option> <option value="3">自動</option> <option value="4">下</option> </select> </div> <div class="option-row"> <label for="name">系列名</label> <input id="name" /> </div> <div class="option-row"> <label for="xValues">X軸の値</label> <input id="xValues" /> </div> <div class="option-row"> <label for="yValues">Y軸の値</label> <input id="yValues" /> </div> <div class="option-row"> <label for="bubbleSizes">バブルの大きさ</label> <input id="bubbleSizes" type="text" readonly /> </div> <div class="option-row"> <label for="doughnutHoleSize">ドーナツの穴の大きさ</label> <input id="doughnutHoleSize" type="number" step="0.1" min="0" max="0.9" /> </div> <div class="option-row"> <label for="gapWidth">要素の間隔</label> <input id="gapWidth" type="number" step="0.1" min="0" max="5" /> </div> <div class="option-row"> <label for="overlap">系列の重なり</label> <input id="overlap" type="number" step="0.1" min="-1" max="1" /> </div> <div class="option-row"> <input type="button" id="apply" value="設定" /> </div> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; } .option-row { padding-bottom: 5px; } label { display:inline-block; } input{ padding: 1px 8px; box-sizing: border-box; width: 100%; } select{ width: 100%; } input[type=checkbox] { display: inline-block; width: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }