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

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

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="

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值