摘要：本文由葡萄城技術(shù)團(tuán)隊(duì)于CSDN原創(chuàng)并首發(fā)。轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開(kāi)發(fā)者提供專業(yè)的開(kāi)發(fā)工具、解決方案和服務(wù)，賦能開(kāi)發(fā)者。
前言
圖表作為一款用于可視化數(shù)據(jù)的工具，可以幫助我們更好的分析和理解數(shù)據(jù)，并發(fā)現(xiàn)數(shù)據(jù)之間的關(guān)系和趨勢(shì)。下面以柱形圖為例介紹如何使用JavaScript在報(bào)表中引入圖表。
本文使用軟件Visual Studio Code(以下簡(jiǎn)稱“VSCode”)作為編程環(huán)境，請(qǐng)您以管理員身份運(yùn)行它。
以下是在報(bào)表中集成柱形圖插件的步驟：
- 創(chuàng)建一個(gè)工程并引入資源
- 創(chuàng)建柱形圖的Html文件
- 創(chuàng)建柱形圖的JS文件
- 創(chuàng)建柱形圖的CSS文件
1.創(chuàng)建一個(gè)工程并引入資源
第一步在文件管理器中創(chuàng)建一個(gè)空白的文件夾作為工程并用VSCode打開(kāi)。
第二步在工程中新建兩個(gè)文件夾用來(lái)存放JS文件和CSS文件。
（新建兩個(gè)文件夾）
第三步引入需要的JS文件和CSS文件。（資源在文末的源碼鏈接中）
至此已經(jīng)完成了創(chuàng)建工程并引入資源的步驟。
2.創(chuàng)建柱形圖的Html文件
第一步在工程中創(chuàng)建一個(gè).html文件并初始化。
（初始化一個(gè)html文件）
第二步在html文件中導(dǎo)入JS文件資源，主要用到的是圖表組件（點(diǎn)擊這里了解其他組件資源）。
<!--格式為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相關(guān)的CSS,默認(rèn)會(huì)有一個(gè)CSS
SpreadJS默認(rèn)提供了7種CSS，可以選擇一個(gè)適合當(dāng)前項(xiàng)目的引入
-->
<link rel="stylesheet" type="text/CSS" href="./CSS/gc.spread.sheets.excel2013white.15.1.0.CSS" />
<!-- 核心資源，最小依賴資源，只要引入了該資源，組件運(yùn)行時(shí)就能顯示出來(lái) -->
<script type="text/javascript" src="./JS/gc.spread.sheets.all.15.1.0.min.JS"></script>
<!-- 中文資源文件，組件運(yùn)行時(shí)默認(rèn)會(huì)用英文資源，使用中文資源需要引入并設(shè)置 -->
<script type="text/javascript" src="./JS/gc.spread.sheets.resources.zh.15.1.0.min.JS"></script>
<!-- 導(dǎo)入導(dǎo)出excel文件的相關(guān)資源 -->
<script type="text/javascript" src="./JS/gc.spread.excelio.15.1.0.min.JS"></script>
<!-- 形狀相關(guān)資源-->
<script type="text/javascript" src="./JS/gc.spread.sheets.shapes.15.1.0.min.JS"></script>
<!-- 透視表相關(guān)資源 -->
<script type="text/javascript" src="./JS/gc.spread.pivot.pivottables.15.1.0.min.JS"></script>
<!-- 圖表的相關(guān)資源 -->
<script type="text/javascript" src="./JS/gc.spread.sheets.charts.15.1.0.min.JS"></script>
<!-- 二維碼相關(guān)資源 -->
<script type="text/javascript" src="./JS/gc.spread.sheets.barcode.15.1.0.min.JS"></script>
<!-- 打印相關(guān)資源 -->
<script type="text/javascript" src="./JS/gc.spread.sheets.print.15.1.0.min.JS"></script>
<!-- PDF相關(guān)資源 -->
<script type="text/javascript" src="./JS/gc.spread.sheets.pdf.15.1.0.min.JS"></script>
<!-- 集算表相關(guān)資源 集算表是SpreadJS特有的功能 -->
<script type="text/javascript" src="./JS/gc.spread.sheets.tablesheet.15.1.0.min.JS"></script>
第三步加入html的內(nèi)容。
<body>
<div class="sample-tutorial">
<!—表格內(nèi)容-->
<div id="ss" class="sample-tutorial"></div>
</div>
</body>
<!--表格格式-->
<style>
#ss {
height: 98vh;
float: left;
width: 100%;
/* left: auto; */
}
</style>
第四步在html中引入柱形圖的JS文件和CSS文件（下面講如何寫(xiě)JS文件和CSS文件）。
<!--引入JS文件-->
<script src="./JS/chartDataDisplay.JS" type="text/javascript"></script>
<!--引入CSS文件-->
<link rel="stylesheet" type="text/CSS" href="./CSS/chartDataDisplay.CSS">
至此已經(jīng)完成了html文件的創(chuàng)建和編寫(xiě)。
3.創(chuàng)建柱形圖的JS文件
第一步在JS文件夾中新建一個(gè)JS文件（注意：文件的名稱要和html文件中引入的文件名稱一致，詳情見(jiàn)創(chuàng)建Html文件的第四步）。
第二步在JS文件中編寫(xiě)引入柱形圖的方法：
（1）在加載方法中獲取表格并調(diào)用獲取柱形圖的方法。
window.onload = function () {
//獲取表格
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3});
//設(shè)置柱形圖
initSpread(spread);
};
（2）設(shè)置柱形圖的方法。
//設(shè)置柱形圖
function initSpread(spread) {
var chartType = [{
//指定chartType為柱形圖
type: GC.Spread.Sheets.Charts.ChartType.columnClustered,
desc: "columnClustered",
//設(shè)置表格數(shù)據(jù)
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]
],
//設(shè)置表格數(shù)據(jù)展示的位置
dataFormula: "A1:M5",
changeStyle: function (chart) {
//改變文章標(biāo)題的方法
changeChartTitle(chart, "The Average Monthly Rainfall");
//顯示數(shù)據(jù)標(biāo)簽的方法
changColumnChartDataLabels(chart);
chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}});
//設(shè)置柱形圖的顏色
changeChartSeriesColor(chart);
//設(shè)置柱形圖的大小和寬度
changeChartSeriesGapWidthAndOverLap(chart);
}
}];
var sheets = spread.sheets;
//掛起活動(dòng)表單和標(biāo)簽條的繪制
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);
}
//恢復(fù)活動(dòng)表單和標(biāo)簽條的繪制
spread.resumePaint();
}
（3）改變文章標(biāo)題的方法。
function changeChartTitle(chart, title) {
chart.title({text: title});
}
（4）顯示數(shù)據(jù)標(biāo)簽的方法。
//顯示數(shù)據(jù)標(biāo)簽
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）設(shè)置柱形圖顏色的方法。
//設(shè)置柱形圖的顏色
function changeChartSeriesColor(chart) {
var series = chart.series().get();
for (var i = 0; i \< series.length; i++) {
chart.series().set(i, {backColor: colorArray[i]});
}
}
（6）設(shè)置柱形圖大小和寬度的方法。
/
/設(shè)置柱形圖的大小和寬度
function changeChartSeriesGapWidthAndOverLap(chart) {
var seriesItem = chart.series().get(0);
seriesItem.gapWidth = 2;
seriesItem.overlap = 0.1;
chart.series().set(0, seriesItem);
}
至此已經(jīng)完成了JS文件的創(chuàng)建和編寫(xiě)。除此之外，柱形圖中還包含一種圖形叫做堆積圖，文末的源碼鏈接中包含了它的寫(xiě)法。
4.創(chuàng)建柱形圖的CSS文件
第一步在CSS文件夾中創(chuàng)建一個(gè)CSS文件（注意：文件的名稱要和html文件中引入的文件名稱一致，詳情見(jiàn)創(chuàng)建Html文件的第四步）。
第二步在CSS文件中編寫(xiě)柱形圖的樣式。
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
至此已經(jīng)完成了CSS文件的創(chuàng)建和編寫(xiě)。在運(yùn)行前需要下載一個(gè)插件：Live Server。
(Live Server插件）
安裝完插件后需要重啟VSCode軟件，然后再打開(kāi)第二步的.html文件后左鍵點(diǎn)擊Open With The Live Server(中文叫以瀏覽器打開(kāi))便可以在瀏覽器中顯示。
（運(yùn)行效果圖）
資源鏈接：
代碼鏈接：
https://gitee.com/GrapeCity/spread-js--chartdata （Gitee）
https://github.com/GrapeCityXA/Spread-chartData/tree/main (Github)
點(diǎn)擊這里了解其他組件資源
擴(kuò)展鏈接：
報(bào)表中的數(shù)據(jù)處理：數(shù)據(jù)運(yùn)算
如何重用其他報(bào)表的元素控件——報(bào)表組件庫(kù)介紹文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-479911.html
利用區(qū)域報(bào)表制作名單類報(bào)表文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-479911.html
到了這里，關(guān)于揭秘報(bào)表新玩法！標(biāo)配插件不再單調(diào)，手把手教你如何在瀏覽器中引入柱形圖插件。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
