Use code to play sparklines: teach you how to use programming language to create concise and easy-to-read data charts!

foreword

The Mini Chart originated as a simplified graphic in flowcharts and organizational charts, and is used to represent trends and changes in a large data set. With the development of data visualization technology, sparklines are also widely used in various types of data charts, such as line charts, column charts, scatter charts, etc. Sparklines are usually small, concise, and intuitive, and can effectively display data trends in a limited space, making it easy for users to understand and analyze data. Sparklines have become a very common data visualization tool in modern data analysis and business decision-making. The content of today's article is to introduce how to introduce sparklines in JavaScript.

This article uses the software Visual Studio Code (hereinafter referred to as "VSCode") as the programming environment, please run it as an administrator.

The following is the table of contents of the article:

1. Create project file
2. The JS file that imports the sparkline
3. Import the CSS file for sparklines
4. Import the Html file of the sparkline
5. resource link

Create project file

The first step is to create a blank folder in the file manager as a project and open it with VSCode.

The second step is to create two new folders in the project to store JS files and CSS files.

(create two new folders)

The third step is to introduce the required JS files and CSS files. (The resources are in the source code link at the end of the article).

(Introduce JS files and CSS files)

So far, the steps of creating a project and importing resources have been completed.

The JS file that imports the sparkline

The first step is to create a new .JS file in the JS folder, and the name can be arbitrary.

The second step is to introduce the required JavaScript method in the JS file:

1. Initialization Get the table and set the table content initialization method:

window.onload = function () {
    
    

//获取表格

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

//初始化方法

initSpread(spread);

};

2. Edit the initSpread method:

2.1 Initialize the table and introduce data information:

//初始化表格

var sheet = spread.getSheet(0);

sheet.suspendPaint();

sheet.options.allowCellOverflow = true;

//set data

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 Set two display modes of the sparkline: include date coordinates and not include date coordinates.

//设置迷你图不包含日期坐标轴

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 Set the method of updating and adding sparklines:

// select the changed method

function selectionChangedCallback() {
    
    

var sheet = spread.getActiveSheet();

var sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());

//判断更新迷你图还是新增迷你图

if (sparkline) {
    
    

updateSetting(sparkline);

} else {
    
    

initSetting();

}

}

//update the sparkline

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 Join the sparkline designer:

//迷你图选项容器设置

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

);

So far, the introduction of the sparkline JS file has been completed.

Import the CSS file for sparklines

The first step is to create a new .CSS file in the CSS folder, and the name can be arbitrary.

The second step is to write the CSS style of the sparkline:

1. Example styles

\*示例样式\

.sample {
    
    

position: relative;

height: 100%;

overflow: auto;

}

.sample::after {
    
    

display: block;

content: "";

clear: both;

}

.sample-tutorial {
    
    

position: relative;

height: 100%;

overflow: hidden;

}

2. Option container settings

\*选项容器\

.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;

}

So far, the introduction of the sparkline CSS file has been completed.

4. Import the Html file of the sparkline

The first step is to create a .Html file in the project file, and the name can be arbitrary.

The second step is to import JS file resources in the Html file, mainly using the sparkline component (click here to learn about other component resources).

<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>

The third step is to introduce the content in Html (spark designer and sparkline style)

1. Add sparklines:

<!--添加迷你图-->

<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>

1. Delete sparklines:

<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>

The fourth step is to import JS files and CSS files ( note : the file names in SRC and HREF must be consistent with the file names in the second and third steps ).

<script src="js/sparkline.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/sparkline.css">

So far, the introduction of the Html file has been completed, and a plug-in needs to be downloaded before running: Live Server.

(Live Server plug-in)

After installing the plug-in, you need to restart the VSCode software, and then right-click Open With The Live Server (called Open With The Live Server in Chinese) in the Html file to display it in the browser.

(Effect display diagram)

5. Resource link:

https://gitee.com/GrapeCity/spread-js-sparkline （Gitee）

https://github.com/GrapeCityXA/SpreadJS-sparkline/tree/main (GitHub)

Click here for additional component resources

Extension link:

Five Elements of Choosing a .NET Form Control

ASP.NET Basic Tutorial - Sparklines