prefacio
El minigráfico se originó como un gráfico simplificado en diagramas de flujo y organigramas, y se usa para representar tendencias y cambios en un gran conjunto de datos. Con el desarrollo de la tecnología de visualización de datos, los minigráficos también se utilizan ampliamente en varios tipos de gráficos de datos, como gráficos de líneas, gráficos de columnas, gráficos de dispersión, etc. Los minigráficos suelen ser pequeños, concisos e intuitivos, y pueden mostrar de manera eficaz las tendencias de los datos en un espacio limitado, lo que facilita a los usuarios la comprensión y el análisis de los datos. Los minigráficos se han convertido en una herramienta de visualización de datos muy común en el análisis de datos moderno y la toma de decisiones comerciales. El contenido del artículo de hoy es presentar cómo introducir minigráficos en JavaScript.
Este artículo utiliza el software Visual Studio Code (en adelante, "VSCode") como entorno de programación, ejecútelo como administrador.
El siguiente es el índice del artículo:
- Crear archivo de proyecto
- El archivo JS que importa el minigráfico
- Importe el archivo CSS para minigráficos
- Importe el archivo Html del minigráfico
- enlace de recursos
Crear archivo de proyecto
El primer paso es crear una carpeta en blanco en el administrador de archivos como un proyecto y abrirlo con VSCode.
El segundo paso es crear dos nuevas carpetas en el proyecto para almacenar archivos JS y archivos CSS.
(crear dos nuevas carpetas)
El tercer paso es introducir los archivos JS y CSS necesarios. (Los recursos están en el enlace del código fuente al final del artículo).
(Introducir archivos JS y archivos CSS)
Hasta ahora, se han completado los pasos de creación de un proyecto e importación de recursos.
El archivo JS que importa el minigráfico
El primer paso es crear un nuevo archivo .JS en la carpeta JS, y el nombre puede ser arbitrario.
El segundo paso es introducir el método JavaScript requerido en el archivo JS:
1. Inicialización Obtenga la tabla y configure el método de inicialización del contenido de la tabla:
window.onload = function () {
//获取表格
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//初始化方法
initSpread(spread);
};
2. Edite el método initSpread:
2.1 Inicialice la tabla e introduzca la información de los datos:
//初始化表格
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.allowCellOverflow = true;
//establecer datos
var data = [1,-2,-1,6,4,-4,3,8];
var dateAxis = [new Date(2011, 0, 5),new Date(2011, 0, 1),new Date(2011, 1, 11),new Date(2011, 2, 1),
new Date(2011, 1, 1),new Date(2011, 1, 3),new Date(2011, 2, 6),new Date(2011, 1, 19)];
sheet.setValue(0, 0, "Series 1");
sheet.setValue(0, 1, "Series 2");
//数据循环写入
for(let i=0;i<8;i++)
{
sheet.setValue(i+1, 0,data[i]);
sheet.getCell(i+1, 1).value(dateAxis[i]).formatter("yyyy-mm-dd");
}
2.2 Establecer dos modos de visualización del minigráfico: incluir coordenadas de fecha y no incluir coordenadas de fecha.
//设置迷你图不包含日期坐标轴
sheet.getCell(0, 5).text("Sparkline without dateAxis:");
sheet.getCell(1, 5).text("(1) Line");
sheet.getCell(1, 8).text("(2) Column");
sheet.getCell(1, 11).text("(3) Winloss");
//设置迷你图包含日期坐标轴
sheet.getCell(7, 5).text("Sparkline with dateAxis:");
sheet.getCell(8, 5).text("(1) Line");
sheet.getCell(8, 8).text("(2) Column");
sheet.getCell(8, 11).text("(3) Winloss");
2.3 Establezca el método de actualización y adición de minigráficos:
// seleccione el método modificado
function selectionChangedCallback() {
var sheet = spread.getActiveSheet();
var sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
//判断更新迷你图还是新增迷你图
if (sparkline) {
updateSetting(sparkline);
} else {
initSetting();
}
}
//actualiza el minigráfico
function updateSetting(sparkline) {
var type = sparkline.sparklineType(), orientation = sparkline.dataOrientation(),
row = sparkline.row, column = sparkline.column;
_getElementById("line_position").value = row + "," + column;
var line_type = _getElementById("line_type");
_selectOption(line_type, type + "");
var line_orientation = _getElementById("line_orientation");
_selectOption(line_orientation, orientation + "");
}
//新增迷你图
function initSetting() {
_getElementById("line_position").value = '';
var line_type = _getElementById("line_type");
_selectOption(line_type, '0');
var line_orientation = _getElementById("line_orientation");
_selectOption(line_orientation, '0');
}
2.4 Únase al diseñador de minigráficos:
//迷你图选项容器设置
var setting = new spreadNS.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 3;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
//行
sheet.addSpan(2, 5, 4, 3);
//setSparkline方法用来设置单元格
sheet.setSparkline(2, 5, dataRange
, spreadNS.Sparklines.DataOrientation.vertical
, spreadNS.Sparklines.SparklineType.line
, setting
);
Hasta ahora, se ha completado la introducción del archivo Sparkline JS.
Importe el archivo CSS para minigráficos
El primer paso es crear un nuevo archivo .CSS en la carpeta CSS, y el nombre puede ser arbitrario.
El segundo paso es escribir el estilo CSS del minigráfico:
1. Estilos de ejemplo
\*示例样式\
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
2. Configuración del contenedor de opciones
\*选项容器\
.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;
margin-top: 10px;
}
\*选项组\
.option-group {
margin-bottom: 8px;
}
Hasta ahora, se ha completado la introducción del archivo CSS minigráfico.
4. Importa el archivo Html del minigráfico.
El primer paso es crear un archivo .Html en el archivo del proyecto, y el nombre puede ser arbitrario.
El segundo paso es importar los recursos del archivo JS en el archivo Html, principalmente usando el componente minigráfico (haga clic aquí para conocer otros recursos del componente).
<title>迷你图</title>
<link rel="stylesheet" type="text/css" href="./css/gc.spread.sheets.excel2013white.15.1.0.css" />
<!-- 核心资源，最小依赖资源，只要引入了该资源，组件运行时就能显示出来 -->
<script type="text/javascript" src="./js/gc.spread.sheets.all.15.1.0.min.js"\></script>
<!-- 中文资源文件，组件运行时默认会用英文资源，使用中文资源需要引入并设置 -->
<script type="text/javascript" src="./js/gc.spread.sheets.resources.zh.15.1.0.min.js"></script>
<!-- 导入导出excel文件的相关资源 -->
<!-- <script type="text/javascript" src="./js/gc.spread.excelio.15.1.0.min.js"></script> -->
<!-- 形状相关资源-->
<script type="text/javascript" src="./js/gc.spread.sheets.shapes.15.1.0.min.js"></script>
<!-- 透视表相关资源 -->
<script type="text/javascript" src="./js/gc.spread.pivot.pivottables.15.1.0.min.js"></script>
<!-- 迷你图的相关资源 -->
<script type="text/javascript" src="./js/gc.spread.sheets.charts.15.1.0.min.js"\></script>
<!-- 二维码相关资源 -->
<script type="text/javascript" src="./js/gc.spread.sheets.barcode.15.1.0.min.js"></script>
<!-- 打印相关资源 -->
<script type="text/javascript" src="./js/gc.spread.sheets.print.15.1.0.min.js"></script>
El tercer paso es introducir el contenido en Html (spark designer y sparkline style)
- Agregar minigráficos:
<!--添加迷你图-->
<div class="option-group">
<label><b>Add SparkLine（-添加迷你图）:</b></label>
</div>
<hr>
<!--选择工作表中的数据区域-->
<div class="option-group">
<label>1. Select the data range in the sheet(选择工作表中的数据区域)</label>
</div>
<div class="option-group">
<!--输入目标单元格（行、列索引）-->
<label for="line_position">2. Enter destination cell (row,column index)(输入目标单元格（行、列索引）)</label>
<!--id名称，用来在js中获取事件-->
<input id="line_position" value="0,0" />
</div>
<!--更改迷你图的类型和方向-->
<div class="option-group">
<label for="line_position">3. Change the type and orientation(更改迷你图的类型和方向)</label\>
</div>
<div class="option-group">
<label for="line_type" style="width: auto;">Type:</label>
<select id="line_type" class="position">
<option value="0">line</option>
<option value="1">column</option>
<option value="2">winloss</option>
</select>
</div>
<div class="option-group">
<label for="line_orientation">Orientation:</label>
<!--id名称，用来在js中获取事件-->
<select id="line_orientation" class="position">
<option value="0">Vertical</option>
<option value="1">Horizontal</option>
</select>
</div>
<!--单击“添加迷你图”按钮-->
<div class="option-group">
<label for="line_position">4. Click "Add Sparkline" button(单击“添加迷你图”按钮)</label>
</div>
<div class="option-group">
<input type="button" value="Add Sparkline" id="btnAddSparkline">
</div>
- Eliminar minigráficos:
<div>
<!--删除迷你图-->
<label><b>Remove SparkLine(删除迷你图):</b></label>
</div>
<hr>
<div class="option-group">
<label>1. Select Sparkline(选择要删除的迷你图)</label>
</div>
<div class="option-group">
<label for="line_position">2. Click "Clear Sparkline" butto(单击“清除迷你图”按钮)</label>
</div>
<div class="option-group">
<input type="button" value="Clear Sparkline" id="btnClearSparkline">
</div>
El cuarto paso es importar archivos JS y CSS ( nota : los nombres de archivo en SRC y HREF deben ser coherentes con los nombres de archivo en el segundo y tercer paso ).
<script src="js/sparkline.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/sparkline.css">
Hasta ahora, se ha completado la introducción del archivo Html y es necesario descargar un complemento antes de ejecutarlo: Live Server.
(Complemento de servidor en vivo)
Después de instalar el complemento, debe reiniciar el software VSCode y luego hacer clic con el botón derecho en Abrir con el servidor en vivo (llamado Abrir con el servidor en vivo en chino) en el archivo Html para mostrarlo en el navegador.
(Diagrama de visualización de efectos)
5. Enlace de recursos:
https://gitee.com/GrapeCity/spread-js-sparkline (Gitee)
https://github.com/GrapeCityXA/SpreadJS-sparkline/tree/main (GitHub)
Haga clic aquí para obtener recursos de componentes adicionales