ichartjs 图表制作

使用iChartJS创建柱状图

最新推荐文章于 2025-06-13 09:59:23 发布

原创最新推荐文章于 2025-06-13 09:59:23 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

ichartjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用iChartJS库在网页上生成一个交互式的柱状图。通过下载iChartJS包并将其引入项目，定义所需的数据集及样式参数，最终实现在指定的HTML元素中显示图表。

1、下载ichartjs包

连接

2、将包中的ichart.1.2.min.js引入项目

3、在jsp中指定表格的生成位置

<!DOCTYPE html>
<html>

<head>

<title>表格生成测试</title>

</head>

<body class="gray-bg">
	
	<!--生成位置-->
	<div id="canvasDiv"></div>
	
		
	<!-- 引入js -->
	<script src="../../myjs/chart_js/ichart.1.2.min.js"></script>
	<script src="../../myjs/chart_js/my_chart.js"></script>
</body>
</html>

4、指定生成表格的js--->my_chart.js

//定义数据
		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();
		});

5、结果