标签归档:HTML5图表

基于 ApexCharts 的 HTML5 曲线图表 可选取数据范围

ApexCharts是一款基于JavaScript和HTML5的现代化图表库,功能十分强大。今天要分享的这款曲线图表便是基于ApexCharts实现的,图表最终以SVG的形式展示在浏览器上。这款图表的另一个特点是可以自定义选取数据的范围,范围确定后,图表中同时显示该范围中的曲线图形和柱状图形。类似的还有这款HTML5 Canvas图表应用Chart.js

html5-apexcharts

在线演示源码下载

Frappe Charts图表应用 不依赖第三方插件库

之前我们分享过很多基于jQuery和HTML5的图表插件,但是很多都是基于第三方的插件实现,比如依赖jQuery库等等,例如10款绚丽实用的HTML5图表动画应用。今天我们要为大家分享的这款Frappe Charts图表应用并没有依赖第三方的脚本库,但是Frappe Charts依然实现了非常实用的图表应用,包括折线图、饼图和柱形图等。不依赖第三方库的好处在于很多不需要使用的功能并不会包含进来,从而减少应用的大小。

frappe-charts

在线演示源码下载

SVG/CSS3平滑线性图表 可定义数据选取范围

前段时间给大家分享过很多炫酷实用的HTML5图表应用,比如这款HTML5 Canvas气温折线图表超酷HTML5 Canvas图表应用Chart.js。今天要介绍的是一款基于SVG和CSS3的平滑线性图表,它的特点是可以通过鼠标拖动滑杆来选取需要统计的数据范围,非常实用。

svg-css3-data-scope-chart

在线演示源码下载

HTML5 Canvas酷似冰山的3D柱状图表

今天我们要为大家分享一个外观很不一样的HTML5柱状图表应用,它的外观就像一座座冰山矗立在海面上,通过海面的高低来表示柱形图数据的高低,非常形象和直观。同时我们还利用HTML5 Canvas技术模拟海面波浪起伏的动画特效,也可以同时展示多组数据。

html5-canvas-iceberg-chart

在线演示源码下载

CSS3 3D立体柱状图表演示动画

之前我们给大家分享过很多基于jQuery和HTML5的图表插件,有线型图、柱形图、饼状图等,外观也是各种各样,比如这10个经典实用的HTML5图表动画应用。这次我们依然要分享一款炫酷的3D立体柱状图表,它是完全基于CSS3实现的,它的特点是根据数据动态生成一个柱状图,并实现3D播放演示。

css3-3d-bar-chart-animation

在线演示源码下载

CSS3实现漂亮的柱形图表

这是一款简单而精美的CSS3柱形图表插件,整个插件没有使用一行JavaScript代码,都是利用CSS3的动画属性完成的。跟之前介绍的华丽的HTML5图表 可展示实时数据HTML5 3D图表插件 可动态显示图表数据相比,这款柱形图表更显简洁,但非常实用,而且使用起来最为简单。

css3-bar-chart

在线演示源码下载

CSS3 3D柱形统计图表

我们已经分享过很多HTML5图表了,当然也有基于jQuery的,类型包括很多种,包括柱形图、线型图、饼图等等。今天我们要分享的是一个用来统计运动步数的CSS3 3D柱形统计图表,初始化的时候图表是平面的,点击页面任意地方后,图表将呈现3D立体的柱形图。

css3-3d-column-chart

在线演示源码下载

CSS3 3D环形百分比进度条图表

这是一款基于JavaScript和CSS3的3D环形百分比进度条图表,它可以展示当前数据的百分比情况,与之前分享过的一款HTML5 SVG环形图表应用相比,这款环形图表应用的特点是它的外观呈现3D立体的视觉效果,而且实用性也是不错的。

css3-3d-circle-progress-chart

在线演示源码下载

HTML5 Canvas气温折线图表 带Tooltip提示框

今天要给大家带来一款基于HTML5 Canvas的折线图表应用,它主要用来显示指定日期的气温变化趋势,当我们将鼠标滑过折线图上时,图表上即可显示一个Tooltip提示框,提示框中显示当前的天气状况及气温情况。当然这款HTML5图表也可以在其他地方使用。

html5-canvas-tooltip-chart

在线演示源码下载

HTML5 Canvas 柱形图 鼠标滑过显示百分比

这是一款基于HTML5的柱形图表,跟其他的HTML5图表类似,它也可以定义柱形的高度来表示其百分比的高低,同时当你将鼠标滑过某个柱形体时,将会显示具体的数据百分比,当让你也可以自定义其他的图表数据。另外,这款图表是基于HTML5 Canvas技术的,所以在支持HTML5的浏览器上效果都会不错。

html5-canvas-bar-chart

在线演示源码下载