散点函数迷你图

散点函数迷你图可以用来比较数值,例如系统数据、统计数据和工程数据。

你可以通过散点函数创建一个散点函数迷你图,比如: =SCATTERSPARKLINE(points1, points2?, minX?, maxX?, minY?, maxY?, hLine?, vLine?, xMinZone?, xMaxZone?, yMinZone?, yMaxZone?, tags?, drawSymbol?, drawLines?, color1?, color2?, dash?). 此函数有以下参数: points1: 第一个系列的 x,y的数据。它是一片范围,比如"H1:I3"。如果行数大于等于列数,那么从前两列获取数据;第一列包含了x的值,第二列包含了y的值。否则从前两行取数据;第一行包含x的值,第二行包含y的值。 points2: (可选参数)第二个系列的x,y的数据。它是一片范围,比如"H4:I6"。如果行数大于等于列数,从前两列获取数据;第一列包含了x的值,第二列包含了y的值。否则从前两行获取数据;第一行包含了x的值,第二行包含了y的值。 minX: (可选参数)两个系列x轴值的最小限制;如果这个值省略了,那么每一个系列就拥有自己的最小限制值。 maxX: (可选参数)两个系列x轴值的最大限制;如果这个值省略了,那么每一个系列就拥有自己的最大限制值。 minY: (可选参数)两个系列y轴值得最小限制;如果这个值省略了,那么每一个系列就拥有自己的最小限制值。 maxY: (可选参数)两个系列y轴值得最大限制;如果这个值省略了,那么每一个系列就拥有自己的最大限制值。 hLine: (可选参数)横轴的位置;如果这个值省略了,就没有水平轴。 vLine: (可选参数)纵轴的位置;如果这个值省略了,就没有纵轴。 xMinZone: (可选参数)x轴灰色区域的最小值;如果四个区域的参数都省略了,那么就没有灰色区域。 xMaxZone: (可选参数)x轴灰色区域的最大值;如果四个区域的参数都省略了,那么就没有灰色区域。 yMinZone: (可选参数)y轴灰色区域的最小值;如果四个区域的参数都省略了,那么就没有灰色区域。 yMaxZone: (可选参数)y轴灰色区域的最大值;如果四个区域的参数都省略了,那么就没有灰色区域。 tags: (可选参数)如果为 true,将第一个系列中y轴值最大的标为"#0000FF",把第一个系列中y轴值最小的标为"#CB0000"。这个默认值是 false。 drawSymbol: (可选参数)如果为 true ,将每一个点绘制成一个符号,第一个系列的这个符号是圆圈,第二个系列的这个符号是正方形。默认值是 true 。 drawLines: (可选参数)如果为 true ,按顺序将每个系列的点用线连接起来。默认值是 false。 color1: (可选参数)表示第一个系列的点的颜色;默认值是"#969696"。 color2: (可选参数)表示第二个系列的点的颜色;默认值是"#CB0000"。 dash: (可选参数)如果为 true ,连接线就是虚线;否则线是实线。默认值是 false。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.sheets[0]; sheet.suspendPaint(); sheet.addSpan(0, 0, 1, 5); sheet.getCell(0, 0).value("Particulate Levels in Rainfall").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); var table1 = sheet.tables.add("table1", 1, 0, 10, 5, spreadNS.Tables.TableThemes.medium4); table1.rowFilter().filterButtonVisible(false); sheet.setArray(1, 0, [ ["Daily rainfall", "Particulate level", "Daily rainfall1", "Temperature", "Diagram"], [2.0, 100, 2.0, 15], [2.5, 130, 2.5, 12], [3.0, 120, 3.0, 11], [3.5, 140, 3.5, 9], [4.0, 120, 4.0, 10], [4.5, 110, 4.5, 10], [5.0, 110, 5.0, 9], [5.5, 105, 5.5, 9], [6.0, 100, 6.0, 8] ]); sheet.addSpan(2, 4, 9, 1); sheet.setFormula(2, 4, '=SCATTERSPARKLINE(A3:B11,C3:D11,,,,,AVERAGE(B3:B11),AVERAGE(A3:A11),,,,,TRUE,TRUE,TRUE,"green",,TRUE)'); sheet.setRowHeight(0, 50); for (var i = 1; i < 11; i++) { sheet.setRowHeight(i, 25); } sheet.setColumnWidth(0, 120); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 200); sheet.setColumnVisible(2, false); sheet.resumePaint(); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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 id="ss" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }