Scientific/Css/ichartjs/samples/html/column2d_03.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../../ichart.1.2.1.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		<script type="text/javascript">
		//定义数据
		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 : 'Hello World\'s Height In Alphabet',//设置标题
				width : 800,//设置宽度，默认单位为px
				height : 400,//设置高度，默认单位为px
				shadow:true,//激活阴影
				shadow_color:'#c7c7c7',//设置阴影颜色
				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();
		});
		</script>
	</head>
	<body>
		<div id='canvasDiv'></div>
		<div class='ichartjs_info'>
			<span class='ichartjs_author'>written by <a title="示例的贡献者" href="mailto:taylor@ichartjs.com">taylor</a></span>
			<span class='ichartjs_btn' onmouseover="this.style.color='#2f99ff'" onmouseout="this.style.color='#0b2946'" onclick="window.top.viewCode(document);">View Code</span>
			<div class='ichartjs_sm'>说明</div>
			<div class='ichartjs_details'>
				你一定听过或者见识过各种Hello World，但是你知道把他们的身高(字母表中的位置)比一比是什么样子吗?<br/>
				这是一个柱形图示例，该示例展示了Hello World中各个字母在字母表中的位置，将其位置换算成了身高以柱形图的形式展示。