事先引入:
<script type="text/javascript" src="ichart-1.0.js"></script>
//定义数据
var data = [
{name : 'H',value : 7,color:'#a5c2d5'},
{name : 'E',value : 5,color:'#cbab4f'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'O',value : 15,color:'#a56f8f'},
{name : 'W',value : 13,color:'#c12c44'},
{name : 'O',value : 15,color:'#a56f8f'},
{name : 'R',value : 18,color:'#9f7961'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'D',value : 4,color:'#6f83a5'}
];
$(function(){
var chart = new iChart.Column2D({
render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID
data: data,//绑定数据
title : {text: 'Hello World\'s Height In Alphabet'},//设置标题
width : 800,//设置宽度,默认单位为px
height : 400,//设置高度,默认单位为px
coordinate:{//配置自定义坐标轴
scale:[{//配置自定义值轴
position:'left',//配置左值轴
start_scale:0,//设置开始刻度为0
end_scale:26,//设置结束刻度为26
scale_space:2,//设置刻度间距
listeners:{//配置事件
parseText:function(t,x,y){//设置解析值轴文本
return {text:t+" CM"}
}
}
}]
}
});
//调用绘图方法开始绘图
chart.draw();
});
//Html代码
<div id='canvasDiv'></div
>
以上仅仅是一个3D饼图,需要HTML5 的cavas支持,不过对于IE9之前的浏览器,可以引入一个extcanvas.js实现此特性
分享到:
相关推荐
13款基于SVG的HTML5应用和动画,SVG是HTML的扩展标记语言,利用SVG可以做非常多的矢量动画,结合HTML5,SVG就变得更加强大。下面12款HTML5动画均基于SVG,一起来看看。 1、HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 2、一...
今天我们要为大家分享一个外观很不一样的HTML5柱状图表应用,它的外观就像一座座冰山矗立在海面上,通过海面的高低来表示柱形...同时我们还利用HTML5 Canvas技术模拟海面波浪起伏的动画特效,也可以同时展示多组数据。
这是一款简单而精美的CSS3柱形图表插件,整个插件没有使用一行...跟之前介绍的华丽的HTML5图表 可展示实时数据和HTML5 3D图表插件 可动态显示图表数据相比,这款柱形图表更显简洁,但非常实用,而且使用起来最为简单。
使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合你。 ...
Canvas 动画:通过 HTML5 Canvas 元素绘制图形,利用 JavaScript 控制绘制过程,实现高度可定制化的动画效果,适用于需要实时渲染的复杂动画场景。 WebGL 动画:基于 WebGL(Web图形库)的 3D 图形渲染技术,可以...
## 3D图表展示 - 基于ECharts GL 3D柱形图,3D地球,二维数据的3D化展示 ## 热力图展示 - 基于ECharts & 百度地图 基于百度地图的热力图,基于笛卡尔坐标系的热力图 ## ECharts扩展示例 词云,水球图,烟花秀,...
ActiveReports中包含了图表控制器,支持公共的2D和3D图表类型,并且提供先进的图表功能以及本土特色的各种图像格式的输出。Windows浏览控制器支持报表的缩放和预览、多页浏览超链接、观看分页和多页、内容目录、...
利用HTML5和echarts开发大数据展示及大屏炫酷统计系统,大概有60套左右,包含地图、3D图表、2D图表、统计图、柱状图、圆形图等等各种图,前端源代码拿来改改就可以用了
这是一款利用jQuery实现的图片横向滚动插件,我们可以设置任意数量的图片,然后点击左右箭头按钮即可分组浏览这些图片。这款jQuery图片插件的优势有两点,其一是可以定义每组图片的数量,其二是图片可循环播放,而且...
0032 利用动态数组作为函数参数 24 0033 调用Register过程的注意事项 24 0034 在Delphi中禁止使用result 24 0035 如何在Delphi中录制代码 24 0036 如何编译器会提示数组太大时的处理技巧 25 0037 如何对...
利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...
0032 利用动态数组作为函数参数 24 0033 调用Register过程的注意事项 24 0034 在Delphi中禁止使用result 24 0035 如何在Delphi中录制代码 24 0036 如何编译器会提示数组太大时的处理技巧 25 0037 如何对...
利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...
利用Google:maps JSP标签库就能够在你的Web站点上实现GoogleMaps的所有功能而且不需要javascript或AJAX编程。它还能够与JSTL相结合生成数据库驱动的动态Maps。 OAuth 实现框架 Agorava Agorava 是一个实现了 OAuth ...