凡例

チャートの凡例の各データ系列を表すシンボルまたは色をより強調しカスタマイズすることができます。

<p>チャートの凡例は、次のカスタマイズをサポートしています:</p> <ul> <li><strong>表示:凡例の可視性。</strong></li> <li><strong>位置:上、右、左、下、右上。</strong></li> <li><strong>背景:色、透過度。</strong></li> <li><strong>テキスト:フォントファミリ、フォントサイズ、色。</strong></li> <li><strong>境界線:色、透過度、幅、ダッシュスタイル。</strong></li> <li><strong>オーバーラップ: 凡例をプロットエリアに重ねて表示するかどうか。</strong></li> <li><strong>レイアウト: X位置、Y位置、幅、高さ。</strong></li> </ul> <p>次のコードを使用して、凡例をカスタマイズできます:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> legend = chart.legend(); legend.visible = <span class="hljs-string">"orange"</span>; legend.position = GC.Spread.Sheets.Charts.LegendPosition.top; legend.backColor = <span class="hljs-string">"orange"</span>; legend.backColorTransparency = <span class="hljs-number">0.8</span>; legend.fontFamily = <span class="hljs-string">"Arial"</span>; legend.fontSize = <span class="hljs-number">9</span>; legend.color = <span class="hljs-string">"green"</span>; legend.borderStyle.color = <span class="hljs-string">"green"</span>; legend.borderStyle.transparency = <span class="hljs-number">0.3</span>; legend.borderStyle.width = <span class="hljs-number">3</span>; legend.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.dash; legend.showLegendWithoutOverlapping = <span class="hljs-literal">false</span>; legend.layout= { <span class="hljs-attr">x</span>: <span class="hljs-number">0.2</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0.5</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">0.4</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">0.2</span> } chart.legend(legend); </code></pre>
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()); }; 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 chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 120, 480, 270, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns); chart.title({text: "Chart Legend"}); var legend = chart.legend(); legend.borderStyle.color = "green"; legend.borderStyle.width = 3; legend.fontSize = 9; legend.backColor = "orange"; legend.backColorTransparency = 0.8; chart.legend(legend); sheet.resumePaint(); }; 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 legend = chart.legend(); _getElementById("visible").checked = legend.visible; _getElementById("position").value = legend.position; _getElementById("backColor").value = legend.backColor; _getElementById("backColorTransparency").value = legend.backColorTransparency; _getElementById("color").value = legend.color; _getElementById("fontFamily").value = legend.fontFamily; _getElementById("fontSize").value = legend.fontSize; _getElementById("border-color").value = legend.borderStyle.color; _getElementById("border-width").value = legend.borderStyle.width; _getElementById("border-transparency").value = legend.borderStyle.transparency; _getElementById("border-dashStyle").value = legend.borderStyle.dashStyle; _getElementById("showLegendWithoutOverlapping").checked = legend.showLegendWithoutOverlapping; if (legend.layout && legend.layout.x) { _getElementById("layoutX").value = legend.layout.x; } if (legend.layout && legend.layout.y) { _getElementById("layoutY").value = legend.layout.y; } if (legend.layout && legend.layout.width) { _getElementById("layoutWidth").value = legend.layout.width; } if (legend.layout && legend.layout.height) { _getElementById("layoutHeight").value = legend.layout.height; } } function applySetting() { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (!chart) { return; } var legend = { visible: _geBoolean("visible"), position: _getValue("position"), showLegendWithoutOverlapping: _geBoolean("showLegendWithoutOverlapping"), backColor: _getText("backColor"), backColorTransparency: _getFloat("backColorTransparency"), color: _getText("color"), fontFamily: _getText("fontFamily"), fontSize: _getValue("fontSize"), borderStyle:{ color: _getText("border-color"), width: _getValue("border-width"), transparency: _getFloat("border-transparency"), dashStyle: _getValue("border-dashStyle") }, layout: { x: _getFloat("layoutX"), y: _getFloat("layoutY"), width: _getFloat("layoutWidth"), height: _getFloat("layoutHeight") } } chart.legend(legend); } 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 _geBoolean(id) { return _getElementById(id).checked; } function _getFloat(id) { return isNaN(parseFloat(_getElementById(id).value)) ? undefined : parseFloat(_getElementById(id).value); } function _getValue(id) { return parseInt(_getElementById(id).value); } function _getText(id) { return _getElementById(id).value; }
<!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 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="visible">表示する</label> <input type="checkbox" id="visible" checked /> </div> <div class="option-row" id=""> <label for="position">凡例の位置</label> <select id="position"> <option value="1">上</option> <option value="2">右</option> <option value="3">左</option> <option value="4" selected="selected">下</option> <option value="5">右上</option> </select> </div> <div class="option-row"> <input type="checkbox" id="showLegendWithoutOverlapping" checked /> <label style="display:inline" for="showLegendWithoutOverlapping">凡例をチャートに重ねずに表示する</label> </div> <div class="option-row" id=""> <label for="backColor">背景色</label> <input type="text" id="backColor" value="#FF0000" /> </div> <div class="option-row" id=""> <label for="backColorTransparency">背景色の透過度</label> <input type="number" id="backColorTransparency" step="0.1" min="0" max="1" value="0.7" /> </div> <hr> <div class="option-row"> <label for="layoutX">X位置(チャート幅の%:0~1)</label> <input type="number" id="layoutX" step="0.01" min="0" max="1" /> </div> <div class="option-row"> <label for="layoutY">Y位置(チャート高さの%:0~1)</label> <input type="number" id="layoutY" step="0.01" min="0" max="1" /> </div> <div class="option-row"> <label for="layoutWidth">幅(チャート幅の%:0~1)</label> <input type="number" id="layoutWidth" step="0.01" min="0" max="1" /> </div> <div class="option-row"> <label for="layoutHeight">高さ(チャート高さの%:0~1)</label> <input type="number" id="layoutHeight" step="0.01" min="0" max="1" /> </div> <hr> <div class="option-row" id=""> <label for="color">フォントの色:</label> <input type="text" id="color" value="#00FF00" /> </div> <div class="option-row" id=""> <label for="fontFamily">フォント名:</label> <input type="text" id="fontFamily" value="Calibri" /> </div> <div class="option-row" id=""> <label for="fontSize">フォントサイズ:</label> <input type="number" id="fontSize" step="1" min="0" max="100" value="1" /> </div> <hr> <div class="option-row" id=""> <label for="border-color">境界線の色:</label> <input type="text" id="border-color" value="#00FF00" /> </div> <div class="option-row" id=""> <label for="border-width">境界線の太さ:</label> <input type="number" id="border-width" step="1" min="0" max="100" value="1" /> </div> <div class="option-row" id=""> <label for="border-transparency">境界線の透過度:</label> <input type="number" id="border-transparency" step="0.1" min="0" max="1" value="1" /> </div> <div class="option-row" id=""> <label for="border-dashStyle">境界線の線種:</label> <select id="border-dashStyle"> <option value="0" selected="selected">実線</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> </select> </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; }