prefácio
O Minigráfico surgiu como um gráfico simplificado em fluxogramas e organogramas, e é utilizado para representar tendências e mudanças em um grande conjunto de dados. Com o desenvolvimento da tecnologia de visualização de dados, os minigráficos também são amplamente utilizados em vários tipos de gráficos de dados, como gráficos de linhas, gráficos de colunas, gráficos de dispersão, etc. Minigráficos geralmente são pequenos, concisos e intuitivos e podem exibir tendências de dados com eficiência em um espaço limitado, facilitando a compreensão e a análise dos dados pelos usuários. Sparklines se tornaram uma ferramenta de visualização de dados muito comum na análise de dados moderna e na tomada de decisões de negócios. O conteúdo do artigo de hoje é apresentar como introduzir minigráficos em JavaScript.
Este artigo usa o software Visual Studio Code (doravante denominado "VSCode") como ambiente de programação, execute-o como administrador.
Segue o índice do artigo:
- Criar arquivo de projeto
- O arquivo JS que importa o minigráfico
- Importe o arquivo CSS para minigráficos
- Importe o arquivo HTML do minigráfico
- link de recurso
Criar arquivo de projeto
O primeiro passo é criar uma pasta em branco no gerenciador de arquivos como um projeto e abri-la com o VSCode.
A segunda etapa é criar duas novas pastas no projeto para armazenar arquivos JS e arquivos CSS.
(crie duas novas pastas)
A terceira etapa é apresentar os arquivos JS e CSS necessários. (Os recursos estão no link do código-fonte no final do artigo).
(Apresentar arquivos JS e arquivos CSS)
Até agora, as etapas de criação de um projeto e importação de recursos foram concluídas.
O arquivo JS que importa o minigráfico
O primeiro passo é criar um novo arquivo .JS na pasta JS, e o nome pode ser arbitrário.
A segunda etapa é introduzir o método JavaScript necessário no arquivo JS:
1. Inicialização Obtenha a tabela e defina o método de inicialização do conteúdo da tabela:
window.onload = function () {
//获取表格
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//初始化方法
initSpread(spread);
};
2. Edite o método initSpread:
2.1 Inicialize a tabela e introduza as informações dos dados:
//初始化表格
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.allowCellOverflow = true;
//definir dados
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 Defina dois modos de exibição do minigráfico: incluir coordenadas de data e não incluir coordenadas de data.
//设置迷你图不包含日期坐标轴
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 Defina o método de atualização e adição de minigráficos:
// seleciona o método alterado
function selectionChangedCallback() {
var sheet = spread.getActiveSheet();
var sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
//判断更新迷你图还是新增迷你图
if (sparkline) {
updateSetting(sparkline);
} else {
initSetting();
}
}
//atualiza o 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 Junte-se ao designer sparkline:
//迷你图选项容器设置
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
);
Até agora, a introdução do arquivo JS sparkline foi concluída.
Importe o arquivo CSS para minigráficos
O primeiro passo é criar um novo arquivo .CSS na pasta CSS, e o nome pode ser arbitrário.
A segunda etapa é escrever o estilo CSS do minigráfico:
1. Exemplos de estilos
\*示例样式\
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
2. Configurações do contêiner de opções
\*选项容器\
.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;
}
Até agora, a introdução do arquivo CSS sparkline foi concluída.
4. Importe o arquivo HTML do minigráfico
A primeira etapa é criar um arquivo .Html no arquivo de projeto e o nome pode ser arbitrário.
O segundo passo é importar os recursos do arquivo JS no arquivo Html, principalmente usando o componente sparkline (clique aqui para conhecer outros recursos do 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>
A terceira etapa é apresentar o conteúdo em Html (spark designer e estilo sparkline)
- Adicionar 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>
- Excluir 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>
A quarta etapa é importar arquivos JS e CSS ( observação : os nomes dos arquivos em SRC e HREF devem ser consistentes com os nomes dos arquivos nas segunda e terceira etapas ).
<script src="js/sparkline.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/sparkline.css">
Até agora, a introdução do arquivo Html foi concluída e um plug-in precisa ser baixado antes de executar: Live Server.
(plug-in do servidor ao vivo)
Depois de instalar o plug-in, você precisa reiniciar o software VSCode e clicar com o botão direito do mouse em Open With The Live Server (chamado Open With The Live Server em chinês) no arquivo Html para exibi-lo no navegador.
(Diagrama de exibição do efeito)
5. Link do recurso:
https://gitee.com/GrapeCity/spread-js-sparkline（Gitee）
https://github.com/GrapeCityXA/SpreadJS-sparkline/tree/main (GitHub)
Clique aqui para recursos de componentes adicionais
Link da extensão:
Cinco elementos para escolher um controle de formulário .NET