关于前端:揭秘报表新玩法标配插件不再单调如何用柱形图插件让你的报表瞬间高大上

摘要：本文由葡萄城技术团队于思否原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。

前言

图表作为一款用于可视化数据的工具，能够帮忙咱们更好的剖析和了解数据，并发现数据之间的关系和趋势。上面以柱形图为例介绍如何应用 JavaScript 在报表中引入图表。

本文应用软件 Visual Studio Code(以下简称“VSCode”) 作为编程环境，请您以管理员身份运行它。

以下是在报表中集成柱形图插件的步骤：

1. 创立一个工程并引入资源
2. 创立柱形图的 Html 文件
3. 创立柱形图的 JS 文件
4. 创立柱形图的 CSS 文件

1. 创立一个工程并引入资源

第一步在文件管理器中创立一个空白的文件夹作为工程并用 VSCode 关上。

第二步在工程中新建两个文件夹用来寄存 JS 文件和 CSS 文件。

（新建两个文件夹）

第三步引入须要的 JS 文件和 CSS 文件。（资源在文末的源码链接中）

至此曾经实现了创立工程并引入资源的步骤。

2. 创立柱形图的 Html 文件

第一步在工程中创立一个.html 文件并初始化。

（初始化一个 html 文件）

第二步在 html 文件中导入 JS 文件资源，次要用到的是图表组件（点击这里理解其余组件资源）。

\<!-- 格局为 UTF-8--\>

\<meta charset="UTF-8"\>

\<meta http-equiv="X-UA-Compatible" content="IE=edge"\>

\<meta name="spreadJS culture" content="zh-cn" /\>

\<meta name="viewport" content="width=device-width, initial-scale=1.0"\>

\<title\> 柱形图表格 \</title\>

\<!-- 引入 SpreadJS 相干的 CSS, 默认会有一个 CSS

SpreadJS 默认提供了 7 种 CSS，能够抉择一个适宜以后我的项目的引入

\--\>

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

\<!-- PDF 相干资源 --\>

\<script type="text/javascript" src="./JS/gc.spread.sheets.pdf.15.1.0.min.JS"\>\</script\>

\<!-- 集算表相干资源 集算表是 SpreadJS 特有的性能 --\>

\<script type="text/javascript" src="./JS/gc.spread.sheets.tablesheet.15.1.0.min.JS"\>\</script\>

第三步退出 html 的内容。

\<body\>

\<div class="sample-tutorial"\>

\<!—表格内容 --\>

\<div id="ss" class="sample-tutorial"\>\</div\>

\</div\>

\</body\>

\<!-- 表格格局 --\>

\<style\>

\#ss {

height: 98vh;

float: left;

width: 100%;

/\* left: auto; \*/

}

\</style\>

第四步在 html 中引入柱形图的 JS 文件和 CSS 文件（上面讲如何写 JS 文件和 CSS 文件）。

\<!-- 引入 JS 文件 --\>

\<script src="./JS/chartDataDisplay.JS" type="text/javascript"\>\</script\>

\<!-- 引入 CSS 文件 --\>

\<link rel="stylesheet" type="text/CSS" href="./CSS/chartDataDisplay.CSS"\>

至此曾经实现了 html 文件的创立和编写。

3. 创立柱形图的 JS 文件

第一步在 JS 文件夹中新建一个 JS 文件（留神：文件的名称要和 html 文件中引入的文件名称统一，详情见创立 Html 文件的第四步）。

第二步在 JS 文件中编写引入柱形图的办法：

（1）在加载办法中获取表格并调用获取柱形图的办法。

window.onload = function () {

// 获取表格

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3});

// 设置柱形图

initSpread(spread);

};

（2）设置柱形图的办法。

// 设置柱形图

function initSpread(spread) {

var chartType = [{

// 指定 chartType 为柱形图

type: GC.Spread.Sheets.Charts.ChartType.columnClustered,

desc: "columnClustered",

// 设置表格数据

dataArray: [["",'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],

["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],

["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],

["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

],

// 设置表格数据展现的地位

dataFormula: "A1:M5",

changeStyle: function (chart) {

// 扭转文章题目的办法

changeChartTitle(chart, "The Average Monthly Rainfall");

// 显示数据标签的办法

changColumnChartDataLabels(chart);

chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}});

// 设置柱形图的色彩

changeChartSeriesColor(chart);

// 设置柱形图的大小和宽度

changeChartSeriesGapWidthAndOverLap(chart);

}

}];

var sheets = spread.sheets;

// 挂起流动表单和标签条的绘制

spread.suspendPaint();

for (var i = 0; i \< chartType.length; i++) {var sheet = sheets[i];

initSheet(sheet, chartType[i].desc, chartType[i].dataArray);

var chart = addChart(sheet, chartType[i].type, chartType[i].dataFormula);//add chart

chartType[i].changeStyle(chart);

}

// 复原流动表单和标签条的绘制

spread.resumePaint();}

（3）扭转文章题目的办法。

function changeChartTitle(chart, title) {chart.title({text: title});

}

（4）显示数据标签的办法。

// 显示数据标签

function changColumnChartDataLabels(chart) {var dataLabels = chart.dataLabels();

dataLabels.showValue = true;

dataLabels.showSeriesName = false;

dataLabels.showCategoryName = false;

var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;

dataLabels.position = dataLabelPosition.outsideEnd;

chart.dataLabels(dataLabels);

}

（5）设置柱形图色彩的办法。

// 设置柱形图的色彩

function changeChartSeriesColor(chart) {var series = chart.series().get();

for (var i = 0; i \< series.length; i++) {chart.series().set(i, {backColor: colorArray[i]});

}

}

（6）设置柱形图大小和宽度的办法。

/

/ 设置柱形图的大小和宽度

function changeChartSeriesGapWidthAndOverLap(chart) {var seriesItem = chart.series().get(0);

seriesItem.gapWidth = 2;

seriesItem.overlap = 0.1;

chart.series().set(0, seriesItem);

}

至此曾经实现了 JS 文件的创立和编写。除此之外，柱形图中还蕴含一种图形叫做沉积图，文末的源码链接中蕴含了它的写法。

4. 创立柱形图的 CSS 文件

第一步在 CSS 文件夹中创立一个 CSS 文件（留神：文件的名称要和 html 文件中引入的文件名称统一，详情见创立 Html 文件的第四步）。

第二步在 CSS 文件中编写柱形图的款式。

.sample-tutorial {

position: relative;

height: 100%;

overflow: hidden;

}

body {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

至此曾经实现了 CSS 文件的创立和编写。在运行前须要下载一个插件：Live Server。

(Live Server 插件）

装置完插件后须要重启 VSCode 软件，而后再关上第二步的.html 文件后左键点击 Open With The Live Server(中文叫以浏览器关上) 便能够在浏览器中显示。

（运行效果图）

资源链接：

代码链接：

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

https://github.com/GrapeCityXA/Spread-chartData/tree/main (Github)

点击这里理解其余组件资源

扩大链接：

报表中的数据处理：数据运算

如何重用其余报表的元素控件——报表组件库介绍

利用区域报表制作名单类报表