揭秘报表新玩法!标配插件不再单调,手把手教你如何在浏览器中引入柱形图插件。

这篇具有很好参考价值的文章主要介绍了揭秘报表新玩法!标配插件不再单调,手把手教你如何在浏览器中引入柱形图插件。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

前言

图表作为一款用于可视化数据的工具,可以帮助我们更好的分析和理解数据,并发现数据之间的关系和趋势。下面以柱形图为例介绍如何使用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默认提供了7CSS,可以选择一个适合当前项目的引入
-->
    <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)

点击这里了解其他组件资源

扩展链接:

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

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

利用区域报表制作名单类报表文章来源地址https://www.toymoban.com/news/detail-479911.html

到了这里,关于揭秘报表新玩法!标配插件不再单调,手把手教你如何在浏览器中引入柱形图插件。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 省钱!NewBing硬核新玩法;手把手教你训练AI模特;用AI替代同事的指南;B站最易上手AI绘画教程 | ShowMeAI日报

    👀 日报周刊合集 | 🎡 生产力工具与行业应用大全 | 🧡 点赞关注评论拜托啦! 社区同学分享了两种NewBing的新用法,不仅准确高效,而且免免免费!简直不要太爽! 第一种硬核玩法直接秒掉「ChatPDF」「ChatDOC」这类文档工具。如果,对于在浏览器中打开的文档,NewBing不仅可

    2024年02月01日
    浏览(48)
  • UE4 手把手教你做插件(1) 从代码引用插件

    我看的是 技术宅阿棍儿 的视频,B站有。 系列视频:从代码引用插件_哔哩哔哩_bilibili 看不懂,只能边查资料边看,讲的顺序有点乱 注意:如果只有空白插件的情况,需要你创建一个C++类,就能够看到很多插件类型了 具体看着:Creating New Plugins - non-content only - missing templat

    2024年01月16日
    浏览(53)
  • 手把手教学windows下Android Studio使用GsonFormatPlus插件

    使用API获取数据时经常需要用把JSON转成Java Class,虽然有网页版的工具:在线JSON字符串转Java实体类(JavaBean、Entity)-BeJSON.com,但是我用不明白,这工具会生成三个文件,一个个复制有点麻烦,所以还是用GsonFormat工具吧,目前csdn上搜好几个要么是MacOS的,本人新手都找不到怎么

    2024年02月11日
    浏览(33)
  • 新人必看!手把手教你如何使用浏览器表格插件(下)

    本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 作为一名优秀的打工人,Excel是大家上班中必不可少的办公软件。随着互联网时代的到来,越来越多的公司开始使用各种B/S系统

    2024年02月06日
    浏览(65)
  • 新人必看!手把手教你如何使用浏览器表格插件(上)

    本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 作为一名优秀的打工人,Excel是大家上班中必不可少的办公软件。随着互联网时代的到来,越来越多的公司开始使用各种B/S系统

    2024年02月06日
    浏览(57)
  • 手把手教你安装Zookeeper 及可视化插件ZooInspector、ZKUI

    环境预备:请确保JDK正确安装 我们先进入 官网发布页面 根据推荐,推荐直接使用最近的稳定版本,此处是3.7.1,点击进入下载详情页 我们下载下来的应该是个压缩包,形如 apache-zookeeper-3.7.1-bin.tar.gz ,直接解压即可 进入 D:apache-zookeeper-3.7.1-binapache-zookeeper-3.7.1-binconf 目录,将

    2024年02月11日
    浏览(40)
  • Nacos2.2使用PostgreSQL数据源插件存储数据手把手教程

    Nacos2.2在2022年的12月份正式发布了,该版本可以让开发者开发支持PostgreSQL数据库的插件,从而实现将配置信息存储到PostgreSQL中。 本文基于自己开发的PostgreSQL数据源插件进行说明,希望可以帮助到大家。 数据源插件开源仓库地址: https://github.com/wuchubuzai2018/nacos-datasource-exte

    2024年02月03日
    浏览(37)
  • 手把手的教你使用Toolkit插件在诗情画意中完成AI诗朗诵

    本文分享自华为云社区《【云驻共创】手把手的使用Toolkit插件在诗情画意中完成AI诗朗诵》,作者: 红目香薰。 云原生时代,开发者们的编程方式、编程习惯都发生了天翻地覆的变化,大家逐渐地习惯在云端构建自己的应用。作为新一代的开发者们,如何更快速了解云,学

    2024年04月14日
    浏览(50)
  • uniapp Android原生插件开发和离线打包调试看这篇就够了!(保姆级手把手教学)

    此文章最适合第一次开发原生插件并且无原生开发经验的攻城狮! uni-app 官方文档地址:uni原生插件开发教程 原生插件必备离线SDK下载:Android 离线SDK - 正式版 要拥有JAVA环境 jdk1.8 版本,其他版本根据情况自我调整 想必读者在看此文章之前电脑就有HBuilderX和Android Studio开发工

    2024年02月10日
    浏览(55)
  • 手把手教你:UE 4.27插件项目的自动化打包(Windows、Android、iOS统统搞定)

    1. 下载/安装Epic Games launcher;然后安装 Unreal Engine v4.27.2 注意: launcher和具体版本的engine 务必 安装在相同的父目录下!如下: 2. 安装Visual Studio 2019或2022。安装完成后执行菜单:帮助 | 检查更新,确保装上最新的补丁。 3. 将上述安装目录下的 InstallationPathUE_4.27EngineBuildBa

    2024年02月03日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包