概述
本 Demo 展示了如何使用 MONTHSPARKLINE 公式创建月份迷你图。Demo 包含两个工作表：第一个工作表展示使用颜色参数创建迷你图，通过设置空值、最小值、平均值和最大值对应的颜色来呈现数据分布；第二个工作表展示使用颜色范围创建迷你图，为每个数据点指定独立的颜色。
实现思路
初始化工作簿，创建两个工作表分别展示两种创建方式
为每个工作表准备数据：日期列和数值列
第一个工作表使用颜色参数方式：通过公式参数设置渐变色
第二个工作表准备额外的颜色列，使用颜色范围方式：每个日期对应一个颜色值
使用 setFormula 方法设置 MONTHSPARKLINE 公式
代码解析
方式一：使用颜色参数
这种方式通过四个颜色参数来定义渐变效果：emptyColor 用于空值或零值日期，startColor 用于最小值日期，middleColor 用于平均值日期，endColor 用于最大值日期。迷你图会根据数值大小在这四个颜色之间进行插值。
方式二：使用颜色范围
这种方式为每个数据点指定独立的颜色，通过 colorRange 参数引用包含颜色字符串的单元格区域，实现更灵活的颜色控制。
运行效果
第一个工作表 "No ColorRange" 展示了1月和2月的月份迷你图，使用灰度渐变色显示数据分布
第二个工作表 "ColorRange" 展示了使用自定义颜色的月份迷你图，每个日期显示不同的颜色
迷你图以日历网格形式呈现，水平方向是星期，垂直方向是工作日
数据值通过颜色深浅直观呈现，可以快速识别数据趋势和异常值
API 参考
MONTHSPARKLINE 公式
参数说明：
year：数字类型，表示年份
month：数字类型，表示月份（1-12）
dataRange：单元格引用，第一列为日期，第二列为数值
emptyColor：颜色字符串，填充空值或零值日期
startColor：颜色字符串，填充最小值日期
middleColor：颜色字符串，填充平均值日期
endColor：颜色字符串，填充最大值日期
colorRange：单元格引用，引用的颜色字符串区域
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initNormalSheet(spread);
initColorRangeSheet(spread);
};
function initNormalSheet(spread) {
var sheet = spread.sheets[0];
sheet.name("No ColorRange");
sheet.suspendPaint();
sheet.setColumnWidth(0, 80);
sheet.setColumnWidth(1, 60);
sheet.setColumnWidth(2, 30);
sheet.setColumnWidth(3, 80);
sheet.setColumnWidth(4, 60);
sheet.setColumnWidth(5, 30);
sheet.setColumnWidth(6, 90);
sheet.getRange(0,0,1,7).backColor("#999999").foreColor("#FFFFFF");
sheet.setFormatter(-1, 0, "yyyy-MM-dd");
sheet.setFormatter(-1, 3, "yyyy-MM-dd");
sheet.addSpan(2, 6, 5, 1);
sheet.addSpan(9, 6, 5, 1);
var currentYear = new Date().getFullYear();
for (let row = 1; row <= 31; row++) {
sheet.setValue(row, 0, new Date(currentYear, 0, row));
sheet.setValue(row, 1, Math.round(Math.random() * 100));
}
for (let row = 1; row <= 28; row++) {
sheet.setValue(row, 3, new Date(currentYear, 1, row));
sheet.setValue(row, 4, Math.round(Math.random() * 100));
}
sheet.setText(0,0,"January");
sheet.setText(0,1,"Value");
sheet.setText(0,3,"February");
sheet.setText(0,4,"Value");
sheet.setText(0,6,"Diagram");
sheet.setFormula(2, 6, '=MONTHSPARKLINE('+currentYear+', 1, A2:B32, "#6d6d6d", "#c4c4c4", "#979797", "#f3f3f3")');
sheet.setFormula(7, 6, '=TEXT(DATE('+currentYear+',1, 1),"mmmm")');
sheet.setFormula(9, 6, '=MONTHSPARKLINE('+currentYear+',2,D2:E29, "#6d6d6d", "#c4c4c4", "#979797", "#f3f3f3")');
sheet.setFormula(14, 6, '=TEXT(DATE('+currentYear+',2, 1),"mmmm")');
sheet.resumePaint();
}
function initColorRangeSheet(spread) {
var sheet = spread.sheets[1];
sheet.name("ColorRange");
sheet.suspendPaint();
sheet.setColumnWidth(0, 80);
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, 70);
sheet.setColumnWidth(3, 30);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(5, 70);
sheet.setColumnWidth(6, 70);
sheet.setColumnWidth(7, 30);
sheet.setColumnWidth(8, 90);
sheet.getRange(0,0,1,9).backColor("#999999").foreColor("#FFFFFF");
sheet.setFormatter(-1, 0, "yyyy-MM-dd");
sheet.setFormatter(-1, 4, "yyyy-MM-dd");
sheet.addSpan(2, 8,5 , 1);
sheet.addSpan(9, 8, 5, 1);
var currentYear = new Date().getFullYear();
for (let row = 1; row < 29; row++) {
sheet.setValue(row, 0, new Date(currentYear, 0, row ));
sheet.setValue(row, 1, Math.round(Math.random() * 100));
sheet.setValue(row, 2, this.getRandomColor());
}
for (let row = 1; row < 29; row++) {
sheet.setValue(row, 4, new Date(currentYear, 1, row ));
sheet.setValue(row, 5, Math.round(Math.random() * 100));
sheet.setValue(row, 6, this.getRandomColor());
}
sheet.setText(0,0,"January");
sheet.setText(0,1,"Value");
sheet.setText(0,2,"Color");
sheet.setText(0,4,"February");
sheet.setText(0,5,"Value");
sheet.setText(0,6,"Color");
sheet.setText(0,8,"Diagram");
sheet.setFormula(2, 8, '=MONTHSPARKLINE('+currentYear+',1,A2:B31,C2:C32)');
sheet.setFormula(7, 8, '=TEXT(DATE('+currentYear+',1, 1),"mmmm")');
sheet.setFormula(9, 8, '=MONTHSPARKLINE('+currentYear+',2,E2:F29,G2:G29)');
sheet.setFormula(14, 8, '=TEXT(DATE('+currentYear+',2, 1),"mmmm")');
sheet.resumePaint();
}
function getRandomColor() {
var colorList = ["#82bc00", "#9fc94c", "#00C2D6", "#d2e4a7", "#e9f2d2", "#ffedd3", "#ffdba8", "#ffc97d", "#feb850", "#f7a711","#00c2d6"];
return colorList[Math.round(Math.random() * 10)];
}
<!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-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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;
}
