Abstract: This article was originally published on CSDN by the technical team of Grape City. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.

foreword

As a tool for visualizing data, charts can help us better analyze and understand data, and discover relationships and trends between data. The following uses a column chart as an example to introduce how to use JavaScript to introduce a chart into a report.

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 are the steps to integrate the column chart plugin in the report:

Create a project and import resources
Create the Html file of the histogram
JS file to create a histogram
Create the CSS file for the column chart

1. Create a project and import resources

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.

insert image description here

(create two new folders)

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

insert image description here

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

2. Create the Html file of the histogram

The first step is to create a .html file in the project and initialize it.

insert image description here

(initialize an html file)

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

<!--格式为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>

The third step is to add the content of 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>

The fourth step is to introduce the JS file and CSS file of the column chart into the html (how to write the JS file and CSS file below).

<!--引入JS文件-->
    <script src="./JS/chartDataDisplay.JS" type="text/javascript"></script>
    <!--引入CSS文件-->
    <link rel="stylesheet" type="text/CSS" href="./CSS/chartDataDisplay.CSS">

At this point, the creation and writing of the html file has been completed.

3. Create the JS file of the column chart

The first step is to create a new JS file in the JS folder (note: the name of the file should be consistent with the file name introduced in the html file, see the fourth step of creating an Html file for details).

The second step is to write the method of introducing the column chart in the JS file:

(1) Get the table in the loading method and call the method of getting the column chart.

window.onload = function () {
    
    

//获取表格

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

//设置柱形图

initSpread(spread);

};

(2) The method of setting the histogram.

//设置柱形图

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) How to change the title of the article.

function changeChartTitle(chart, title) {
    
    

chart.title({
    
    text: title});

}

(4) The method of displaying data labels.

//显示数据标签

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) The method of setting the color of the column chart.

//设置柱形图的颜色

function changeChartSeriesColor(chart) {
    
    

var series = chart.series().get();

for (var i = 0; i \< series.length; i++) {
    
    

chart.series().set(i, {
    
    backColor: colorArray[i]});

}

}

(6) The method of setting the size and width of the column chart.

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

function changeChartSeriesGapWidthAndOverLap(chart) {
    
    

var seriesItem = chart.series().get(0);

seriesItem.gapWidth = 2;

seriesItem.overlap = 0.1;

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

}

So far, the creation and writing of the JS file has been completed. In addition, the column chart also contains a graph called a stacked graph, and its writing method is included in the source code link at the end of the article.

4. Create a CSS file for the column chart

The first step is to create a CSS file in the CSS folder (note: the name of the file should be consistent with the file name introduced in the html file, see the fourth step of creating an Html file for details).

The second step is to write the style of the column chart in the CSS file.

.sample-tutorial {
    
    

position: relative;

height: 100%;

overflow: hidden;

}

body {
    
    

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

So far, the creation and writing of the CSS file has been completed. Need to download a plug-in before running: Live Server.

insert image description here

(Live Server plug-in)

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

insert image description here