마우스로 가리키기

차트의 다양한 측면을 마우스로 가리킬 때 나타나는 차트의 스타일과 동작을 사용자 정의할 수 있습니다. 아래 통합 문서에서 차트를 선택하고 hoverStyle SpreadJS 차트 속성을 통해 별도의 스타일로 설정하고 적용할 수 있는 JavaScript 속성에 해당하는 일부 필드를 편집해 보십시오. 속성이 변경되면 “설정” 버튼을 클릭하고 스프레드시트 차트의 다른 요소를 마우스로 가리켜서 새 스타일을 봅니다.

마우스로 가리키기 스타일: SpreadJS는 다음 마우스로 가리키기 스타일 사용자 정의를 지원합니다. 색 및 투명도 테두리: 색, 투명, 너비, 파선 스타일 기호: 색, 투명도 기호 테두리: 색, 투명도, 너비, 파선 스타일 다음 코드를 사용하여 마우스로 가리키기 스타일을 사용자 정의할 수 있습니다. 마우스로 가리키기 애니메이션: 차트와 상호 작용할 때 사용자 환경을 개선하기 위해 마우스로 가리키기 애니메이션이 추가되었습니다. useAnimation() API를 사용하여 차트에 애니메이션을 적용할지 여부를 설정할 수 있습니다.
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, 494, 0, 480, 270, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns); chart.title({text: "HoverStyle with markers"}); var seriesItem = chart.series().get(0); seriesItem.symbol.size = 20; chart.series().set(0, seriesItem); var hoverStyle = { color: "orange", transparency: 0.1, borderStyle: { transparency: 0.1, color: '#FF0000', width: 3, dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash }, symbolStyle: { color: "yellow", transparency: 0.1, borderStyle: { transparency: 0.1, color: 'rgb(0, 0, 255)', width: 9, dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash } } }; chart.hoverStyle(hoverStyle); var chart2 = sheet.charts.add('Chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 494, 275, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns); chart2.title({text: "Default HoverStyle"}); var chart3 = sheet.charts.add('Chart3', GC.Spread.Sheets.Charts.ChartType.pie, 494, 270, 480, 270, 'A1:H2'); chart3.title({text: "HoverStyle with Animation"}); chart3.useAnimation(true); var hoverStyle3 = { color: "orange", transparency: 0.6, borderStyle: { transparency: 0.1, color: '#FF0000', width: 9, dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash } }; chart3.hoverStyle(hoverStyle3); 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) { _getElementById("useAnimation").checked = chart.useAnimation(); var hoverStyle = chart.hoverStyle(); if (!hoverStyle) { return; } _getElementById("color").value = hoverStyle.color || ""; _getElementById("transparency").value = hoverStyle.transparency; _getElementById("border-color").value = hoverStyle.borderStyle.color || ""; _getElementById("border-width").value = hoverStyle.borderStyle.width || 0; _getElementById("border-transparency").value = hoverStyle.borderStyle.transparency; _getElementById("border-dashStyle").value = hoverStyle.borderStyle.dashStyle; _getElementById("symbol-color").value = hoverStyle.symbolStyle.color || ""; _getElementById("symbol-transparency").value = hoverStyle.symbolStyle.transparency; _getElementById("symbol-border-color").value = hoverStyle.symbolStyle.borderStyle.color || ""; _getElementById("symbol-border-width").value = hoverStyle.symbolStyle.borderStyle.width || 0; _getElementById("symbol-border-transparency").value = hoverStyle.symbolStyle.borderStyle.transparency; _getElementById("symbol-border-dashStyle").value = hoverStyle.symbolStyle.borderStyle.dashStyle; } function applySetting() { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (!chart) { return; } chart.useAnimation( _geBoolean("useAnimation")); var hoverStyle = { color: _getText("color"), transparency: _getFloat("transparency"), borderStyle:{ color: _getText("border-color"), width: _getValue("border-width"), transparency: _getFloat("border-transparency"), dashStyle: _getValue("border-dashStyle"), }, symbolStyle:{ color: _getText("symbol-color"), transparency: _getFloat("symbol-transparency"), borderStyle:{ color: _getText("symbol-border-color"), width: _getValue("symbol-border-width"), transparency: _getFloat("symbol-border-transparency"), dashStyle: _getValue("symbol-border-dashStyle"), } } } chart.hoverStyle(hoverStyle); } 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 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="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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"> <div class="option-row"> <label for="useAnimation">useAnimation</label> <input type="checkbox" id="useAnimation" checked /> </div> <div class="option-row" id=""> <label for="color">Color:</label> <input type="text" id="color" value="#FF0000" /> </div> <div class="option-row" id=""> <label for="transparency">Transparency:</label> <input type="number" id="transparency" step="0.1" min="0" max="1" value="0.7" /> </div> <div class="option-row" id=""> <label for="border-color">Border Color:</label> <input type="text" id="border-color" value="#00FF00" /> </div> <div class="option-row" id=""> <label for="border-width">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">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">Border DashStyle:</label> <select id="border-dashStyle"> <option value="0" selected="selected">solid</option> <option value="1">dot</option> <option value="2">dash</option> <option value="3">lgDash</option> <option value="4">dashDot</option> <option value="5">lgDashDot</option> <option value="6">lgDashDotDot</option> <option value="7">sysDash</option> <option value="8">sysDot</option> <option value="9">sysDashDot</option> <option value="10">sysDashDotDot</option> </select> </div> <hr> <div class="option-row" id=""> <label for="symbol-color">Symbol Color:</label> <input type="text" id="symbol-color" value="orange" /> </div> <div class="option-row" id=""> <label for="symbol-transparency">Symbol Transparency:</label> <input type="number" id="symbol-transparency" step="0.1" min="0" max="1" value="0.7" /> </div> <div class="option-row" id=""> <label for="symbol-border-color">Symbol Border Color:</label> <input type="text" id="symbol-border-color" value="rgb(255,0,255)" /> </div> <div class="option-row" id=""> <label for="symbol-border-width">Symbol Border Width:</label> <input type="number" id="symbol-border-width" step="1" min="0" max="100" value="1" /> </div> <div class="option-row" id=""> <label for="symbol-border-transparency">Symbol Border Transparency:</label> <input type="number" id="symbol-border-transparency" step="0.1" min="0" max="1" value="0.7" /> </div> <div class="option-row" id=""> <label for="symbol-border-dashStyle">Symbol Border DashStyle:</label> <select id="symbol-border-dashStyle"> <option value="0" selected="selected">solid</option> <option value="1">dot</option> <option value="2">dash</option> <option value="3">lgDash</option> <option value="4">dashDot</option> <option value="5">lgDashDot</option> <option value="6">lgDashDotDot</option> <option value="7">sysDash</option> <option value="8">sysDot</option> <option value="9">sysDashDot</option> <option value="10">sysDashDotDot</option> </select> </div> <div class="option-row"> <input type="button" id="apply" value="Set" /> </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; }