纯JS中进行数据可视化展示

最新推荐文章于 2026-07-31 08:53:59 发布

原创最新推荐文章于 2026-07-31 08:53:59 发布 · 置顶 · 918 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在纯JavaScript环境中进行数据可视化展示。首先，通过创建HTML页面开始，然后安装并引用ActivereportsJS库。接着，添加报表Viewer的宿主元素，并初始化报表Viewer组件。在JSON格式的报表模板文件中定义内容，最后将脚本代码添加到HTML中以加载报表，完成数据的可视化预览。还提供了整个HTML实现代码和demo实例下载。

1、使用任意工具创建 HTML页面。您可在任何文本编辑器中创建 HTML页面。输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>ARJS Report Viewer</title>

<meta name="description" content="ARJS Report viewer" />

<meta name="author" content="GrapeCity" />

</head>

<body></body>

</html>

2、安装 ActivereportsJS

可直接从 CDN 和 NPM 引用 ActiveReportJS ，最简单的方法可直接引用 CDN 链接 head。

(在实际项目中，都是把JS和CSS文件都直接内置在项目中)

<link

rel="stylesheet"

href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"

type="text/css"

/>

<link

rel="stylesheet"

href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css"

type="text/css"

/>

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js"></script>

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script>

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script>

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js"></script>

3、添加报表 Viewer 宿主元素

body 标签中添加 div 元素

<div id="viewer-host"></div>

在 head 标签，添加 viewer-host 元素

<style>

#viewer-host {

margin: 0 auto;

width: 100%;

height: 100vh;

}

</style>

4、初始化报表Viewer组件

ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的根文件夹中，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。

添加脚本代码：

{

"Name": "Report",

"Body": {

"ReportItems": [

{

"Type": "textbox",

"Name": "TextBox1",

"Value": "Hello, ActiveReportsJS Viewer",

"Style": {

"FontSize": "18pt"

},

"Width": "8.5in",

"Height": "0.5in"

}

]

}

5、初始化报表Viewer组件

将以下脚本添加到body标签中的viewer-host元素之后，以便该脚本在呈现该元素之后运行。此代码初始化报表 Viewer实例，并在页面中加载报表文件。

<script>

var viewer = new ActiveReports.Viewer("#viewer-host");

viewer.open("report.rdlx-json");

</script>

6、整个Html实现代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

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

<title>ActiveReportsJS sample</title>

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

<script src="/dist/ie-polyfills.js"></script>

<script src="/dist/ar-js-core.js"></script>

<script src="/dist/ar-js-designer.js"></script>

<script src="/dist/ar-js-viewer.js"></script>

<script src="/dist/ar-js-pdf.js"></script>

<script src="/dist/designer/zh-locale.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"

rel="stylesheet" />

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"

integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"

crossorigin="anonymous" />

<link rel="stylesheet"

type="text/css"

href="/styles/ar-js-ui.css" />

<link rel="stylesheet"

type="text/css"

href="/styles/ar-js-viewer.css" />

<link rel="stylesheet"

type="text/css"

href="/styles/ar-js-designer.css" />

<style>

#viewer-host {

margin: 0 auto;

width: 100%;

height: 100vh;

}

</style>

</head>

<body>

<div id="viewer-host"></div>

<script>

const viewer = new ActiveReports.Viewer("#viewer-host", { language: "zh" });

viewer.open('reports/MonthSurvey.rdlx-json');

</script>

</body>

</html>

7、预览结果

8、demo实例下载

标签

#html #前端 #javascript #visual studio code