开发背景 很多企业的业务对标准数据图表有很多的业务系统需求，而开发的节奏一直跟不上的。在报表开发中，很多的企业的流程是这样的： 1、BI负责数据的获取整合加工； 2、业务部门负责自己数据的展示。...解决的问题 1、业务无编码开发图表； 2、多种数据源接入方式； 3、复合报表的灵活组装； 支持特性； 1、多种布局支持（单排、双排、组合、Tab）； 2、多种数据源支持； 3、数据加工支持； 4、复合报表组合...前端支撑库React-Auto-Chart的支持； 2、后端多数数据源驱动Graphreport_Drive库支持； 3、前端微服务管理Graphreport_Admin_Frontend支持； 4、后端图表管理...Graphreport_Admin_Backedn支持； 流程 创建数据源 创建图表 创建组合图表 Github地址 Github链接 开源条款 GPLv3 License
这个库非常好，以至于xcharts、nvd3、Rickshaw、Cubism.js、dc.js、xkcd都是基于它构建的。...dc.js——基于D3的JavaScript图表库，拥有本地跨过滤器（crossfilter）的支持，并让你可以高效率地浏览大型多维数据集。 xcharts——基于D3用于构建自定义图表的库。...nvd3——让你可以构建可重用的图表和图表组件，同时具有d3.js的强大功能。 rickshaw——用于创建可交互时间线图表的JavaScript工具。...Flotr——为Prototype.js所用的JavaScript图表库。...JS Charts——基于JavaScript的图表生成器，只需要很少甚至不需要编码。免费版会有水印，可以通过付费去掉。
chart.xkcd：手绘风格的 JS 图表库。 手绘风格的设计给人一种很可爱的感觉，看了这些图表你会发现数据也可以以萌萌哒的形式展示。...只需页面中包含的脚本以及一个用于显示图表的 节点即可。 在以下示例中，我们创建一个折线图。...class="line-chart"> <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.<em>js</em>
在前端日常开发中，正常会遇到这中场景，需要将html代码片段转为JS中的变量，方便JS代码中调用，常规的操作就是手工复制用加号连接，但是这个操作着实费时，完全就是体力活，也没有啥技术含量，因此就有了HTML...在线转换JS工具，它可以在线将html代码转换成js代码，您只需要将需要转换的代码放置于代码框内,然后点击对应的转换按钮。...html在线转换js 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
第一步：下载源码https://github.com/mozilla/pdf.js 第二步：将源码拷贝进项目中，可以新建一个PDFShow文件夹存放代码 第三步：修改viewer.js var DEFAULT_URL...13:01的分割线------------------------------- 文章年久失修，使用案例可参阅官方Demo 插件官方的例子：http://mozilla.github.io/pdf.js
本文作者：HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库：一个手绘风格的 JS 图表库 —— Chart.xkcd，快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果...一、介绍 项目地址：https://github.com/timqian/chart.xkcd Chart.xkcd 是一个图表库，可绘制“非精细”、“卡通”或“手绘”样式的图表。...--引入 JS 库--> </script...xLabel：图表的 x 标签 yLabel：图表的 y 标签 data：需要可视化的数据 options：自定义设置 三、图表类型 Chart.xkcd 支持多样的图表类型，下面将逐一讲解和实现：...--引入 JS 库--> </script
Centos下在线安装Node.js Linux下在线安装Node.js 查看有哪些版本 dnf module list nodejs 安装nodejs 14 dnf module install
前段时间小编给大家推荐了一个非常优秀的在线图表绘制工具：绘图技巧 | 超多种类在线可视化图表制作工具推荐。...这个工具偏商业化图表绘制，这两天小编再查阅资料时发现了一个宝藏在线可视化工具-Hiplot，这个网站绘制的图表全部都是学术类型的，这下，不会代码的小伙伴也可以绘制高质量的科研学术类图表啦。...接下来，就让小编给大家介绍一个这个在线工具的基本绘图流程吧~~ Hiplot 制图流程 注册 这一步就不用多说，进行简单的注册即可。...主要模块 Hiplot网站主要包括以下几大模块： Hiplot网站主要模块 而我们常规绘图只需要使用基础模块绘图即可，进阶模块则适合绘制较复杂的科研图表，小工具箱模块则包含如拼图工具、文本提取、在线加密解密等工具...接下来，小编就基础模块演示下Hiplot如何进行科研图表的绘制过程的： 绘制过程演示 Hiplot优秀案例欣赏 「热图」 热图 「相关性热图」 相关性热图 「主成分分析 (PCAtools)」
前段时间小编给大家推荐了一个非常优秀的在线图表绘制工具：绘图技巧 | 超多种类在线可视化图表制作工具推荐。...这个工具偏商业化图表绘制，这两天小编在查阅资料时发现了一个宝藏在线可视化工具-Hiplot，这个网站绘制的图表全部都是学术类型的，这下，不会代码的小伙伴也可以绘制高质量的科研学术类图表啦。...接下来，就让小编给大家介绍一个这个在线工具的基本绘图流程吧~~ Hiplot 制图流程 注册 这一步就不用多说，进行简单的注册即可。...主要模块 Hiplot网站主要包括以下几大模块： Hiplot网站主要模块 而我们常规绘图只需要使用基础模块绘图即可，进阶模块则适合绘制较复杂的科研图表，小工具箱模块则包含如拼图工具、文本提取、在线加密解密等工具...接下来，小编就基础模块演示下Hiplot如何进行科研图表的绘制过程的： 绘制过程演示 Hiplot优秀案例欣赏 「热图」 热图 「相关性热图」 相关性热图 「主成分分析 (PCAtools)」
前言 BlazorChartjs是一个在Blazor中使用Chart.js的库（支持Blazor WebAssembly和Blazor Server两种模式），它提供了简单易用的组件来帮助开发者快速集成数据可视化图表到他们的...本文我们将一起来学习一下在Blazor中使用Chart.js快速创建图表。 Blazor是什么？ Blazor是一种新兴的Web应用程序框架，具有很大的潜力和发展前景。...包： 添加以下脚本 打开index.html文件，在页面末尾添加以下脚本： </script...collapseNavMenu; } } 更多图表效果截图 更多图表效果展示可以查看官网示例地址：https://chartjs.puresourcecode.com/ 项目源码地址 更多项目实用功能和特性欢迎前往项目开源地址查看
Javascript 等前端技术的发展，越来越多网站使用 AJAX 技术来实现用户交互，所以对 Javascript 代码进行压缩节省带宽，加速网站载入，提供用户体验已经成为了网站维护的日常工作之一，而 JS...JS Beauty：在线 Javascript 美化压缩工具 JS Beauty 是一款在线 Javascript 美化工具，它具有美化，净化，压缩和解压缩 Javascript 代码等功能： 1....JS Beauty 网址：http://jsbeauty.iyi.cn/ ----
认识 Next.js Next.js是一款React 开发框架，它可以帮助我们构建 React 应用程序。...接下来，我们将带大家基于Next.js实现类Excel控件的在线表格编辑的功能。...最终展示效果如图： 其中红色区域为表格主体，上方的工具栏是在线表格编辑器。在实际项目中，我们可以单独引入组件运行时，也可以将在线表格编辑区全部引入（在线表格编辑器会包含一个与之关联的运行时）。...我们需要继续在components文件夹下新建一个OnlineDesigner.js，引入在线表格编辑器： import React,{useState,useEffect} from "react"...实现在线表格编辑功能。
-- 4 作者：702004176@qq.com 5 时间：2017-04-07 6 描述：在线运行代码小工具 7 --> 8... 9 10 在线运行代码 11 12 13 14 15 16 <textarea
本文作者：IMWeb 林鑫 原文出处：IMWeb社区 未经同意，禁止转载 介绍 sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表...sChart.js 基本可以满足这四种图表的需求。而它的小，体现在它的体积上，代码只有 8kb，如果经过服务器的Gzip压缩，那就更小了，因此不用担心造成项目代码冗余。.../js/sChart.min.js"> 使用简单： new sChart(canvasId, type, data, options); 即可生成一个图表。...其他类型的图表data格式都相同，可以同个数据生成不同图表。 vue相关 vue-schart：是用vue.js封装了 sChart.js 的一个库。方便在vue的项目中使用。...Chart.js、echarts等等，有着丰富的图表和炫酷的效果。
介绍 sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四种图表的需求。.../js/sChart.min.js"> 使用简单： new sChart(canvasId, type, data, options); 即可生成一个图表。...type：图表类型，必填。 options：图表配置参数，可选，具体参考文档。...其他类型的图表data格式都相同，可以同个数据生成不同图表。 vue相关 vue-schart：是用vue.js封装了 sChart.js 的一个库。方便在vue的项目中使用。...Chart.js、echarts等等，有着丰富的图表和炫酷的效果。
下面我们就介绍下这个宝藏在线数据可视化制作网站。 图表筛选 PlotDB 可通过 图表类型 进行图表选择，有折线图、柱形图、面积图、饼图、泡泡图、时序图、树形图、地图等计划所有常见的可视化图表。...视觉元素 我们有的时候常常不知道什么样的图表用于什么样的场合，PlotDB就可以很好的解决这一点，它通过提供资讯图表、地理资讯、新闻报道、统计图、商业应用等用途将图表细分。...这一点就可以帮助我们很好的了解各个图表的用途。 ? 图表用途 PlotDB 还可以让我们通过数据维度去划分图表。这就解决了很多小伙伴一遇到多维数据就不知道如何选择合适的图表表示问题。 ?...操作步骤 可视化图表欣赏 这一部分，小编选择几个不错的可视化图表进行展示，更多图表类型，小伙伴们可参考官网哈~~ Bubble Array ?...嘉義縣互動地圖 以上样例都是交互式的，更多例子，大家可去 官网继续探索~~ 总计 今天的推文小编给大家安利一个优秀的在线可视化绘制工具，大家可结合自己的需求进行选取哈~，有条件的且喜欢交互式可视化的，建议还是认真学习下
下面我们就介绍下这个宝藏在线数据可视化制作网站。 图表筛选 PlotDB 可通过 图表类型 进行图表选择，有折线图、柱形图、面积图、饼图、泡泡图、时序图、树形图、地图等计划所有常见的可视化图表。...如下： 图表类型 PlotDB还可以通过位置、长度、方向、角度、面积、体积饱和度、曲率等视觉元素进行划分不同的可视化图表。...视觉元素 我们有的时候常常不知道什么样的图表用于什么样的场合，PlotDB就可以很好的解决这一点，它通过提供资讯图表、地理资讯、新闻报道、统计图、商业应用等用途将图表细分。...这一点就可以帮助我们很好的了解各个图表的用途。 图表用途 PlotDB 还可以让我们通过数据维度去划分图表。这就解决了很多小伙伴一遇到多维数据就不知道如何选择合适的图表表示问题。...Voronoi Treemap Voronoi Treemap 嘉義縣互動地圖 嘉義縣互動地圖 以上样例都是交互式的，更多例子，大家可去 官网继续探索~~ 总计 今天的推文小编给大家安利一个优秀的在线可视化绘制工具
前段时间小编给大家推荐了一个非常优秀的在线图表绘制工具：绘图技巧 | 超多种类在线可视化图表制作工具推荐。...这个工具偏商业化图表绘制，这两天小编再查阅资料时发现了一个宝藏在线可视化工具-Hiplot，这个网站绘制的图表全部都是学术类型的，这下，不会代码的小伙伴也可以绘制高质量的科研学术类图表啦。...接下来，就让小编给大家介绍一个这个在线工具的基本绘图流程吧~~ Hiplot 制图流程 注册 这一步就不用多说，进行简单的注册即可。 主要模块 Hiplot网站主要包括以下几大模块： ?...Hiplot网站主要模块 而我们常规绘图只需要使用基础模块绘图即可，进阶模块则适合绘制较复杂的科研图表，小工具箱模块则包含如拼图工具、文本提取、在线加密解密等工具，十分有用。...接下来，小编就基础模块演示下Hiplot如何进行科研图表的绘制过程的： ? 绘制过程演示 Hiplot优秀案例欣赏 「热图」 ? 热图 「相关性热图」 ?
JS的selection.createRange()可以选中文本，返回一个对象，你可以通过访问该对象的text属性得到被选中的文本。
在线即时展现 Html、JS、CSS 编辑工具 – JSFiddle 想对它做些说明介绍。但是它确是那么的easy使用。 兴许有时间，把左側列表作以相关介绍和演示样例演示吧。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
