在web开发中,经常会遇到需要作图展示的地方,常用的技术是jfreechart,她在服务器端生成图象,在前台展示,对于访问量巨大的网站,必然会加重服务器的负担,于是客户端绘图呼之欲出,典型的技术就是使用js。
客户端使用js绘图主要用到一个开源的js组件wz_jsgraphics.js ,网上有人使用这个js封装了一些画线,饼图的js,我们就可以使用这些js在客户端作图了。
写一个test.html (还要用到pie.js,bar.js,line.js)
<html >
<head>
<title> TEST </title>
<script type ="text/javascript" src ="wz_jsgraphics.js"></script>
<script type ="text/javascript" src ="pie.js"></script>
<script type ="text/javascript" src ="bar.js"></script>
<script type ="text/javascript" src ="line.js"></script>
</head>
<body >
<p>1.饼图</p>
<div id ="PieDiv" style ="position:relative;height:200px;width:300px;"></div>
<script language ="javascript">
var y = new Array ();
y[0] = 20000 ;
y[1] = 20000 ;
y[2] = 20000 ;
var x = new Array ();
x[0] = " a " ;
x[1] = " b " ;
x[2] = " c " ;
var mypie =new Pie( "PieDiv" );
mypie.drawPie(y,x);
// mypie.clearPie();
</script>
<p>2.柱图</p>
<div id="BarDiv" style="position:relative;height:200px;width:500px;"></div>
<script language="javascript">
var y= new Array ();
y[0] = 11112;
y[1] = 16000;
y[2] = 20000;
var x = new Array ();
x[0] = "a";
x[1] = "b";
x[2] = "c";
var mybar = new Bar("BarDiv");
mybar.drawBar(y,x);
</script>
<p> 3.线图 </p>
<div id ="LineDiv" style ="position:relative;height:200px;width:300px;"></div>
<script language ="javascript">
var y = new Array ();
y[0] = 16000 ;
y[1] = 26000 ;
y[2] = 36000 ;
y[3] = 46000 ;
y[4] = 36000 ;
y[5] = 26000 ;
var x = new Array ();
x[0] = "12:01" ;
x[1] = "12:02" ;
x[2] = "12:03" ;
x[3] = "12:04" ;
x[4] = "12:05" ;
x[5] = "12:06" ;
var myline = new Line("LineDiv");
myline.drawXYLine(y,x);
// myline.clearLine();
</script>
</body>
</html>
效果:
分享到:
相关推荐
js chart js柱状图 js配合数据 生成动态柱状图 包含源代码
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...chart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js org...
Laravel开发-laravel-chartjs ChartJS与Laravel 5的Fluent Builder集成
js chart 绘制柱形图 饼图等,里面有多个属性可配置,文件包含属性说明文档
前端jsp画图必备,使用Chart.js,与ajax技术与后台结合后可以做到很好的实时图表展示和阶段性图表统计,本人之前开发的实时监控系统中就是用了该js,很好用,推荐一下
用于创建矩阵图表的Chart.js模块_JavaScript_TypeScript_.zip
基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制...
gauge for asp.net javascript chart
chartjs-chart-financial, 金融证券的Chart.js 模块 Chart.js-财务图表用于烛台和OHLC图表的Chart.js MODULE使用和路线图这个 MODULE 还没有初始版本,在npm上还不可用。Chart.js 2.7.0添加了我们的timeseries扩展...
前端项目-chartjs-plugin-annotation,chart.js的注释
chartjs-gauge 简单量规图 样品 安装 纱线安装: yarn add chart.js chartjs-gauge npm install: npm install --save chart.js chartjs-gauge 配置选项 量规表基于“ 类型。 它定义了以下其他配置选项。 这些选项...
版本:2.5.0
Chart.js学习资料实例,全部资料 这个是目前最新版,与旧版例程有了很大的变化,值得一看。 内含多个完整的demo,包括静态和动态。chart.js是一款基于HTML5 Canvas的图表插件,其功能非常强大,不仅提供了常见的柱形...
Chart.js盒子和小提琴图 Chart.js模块,用于绘制箱形图和小提琴图。 仅适用于Chart.js> = 2.8.0 安装 npm install --save chart.js chartjs-chart-box-and-violin-plot 用法 在Github上查看 和 图表 四种新类型: ...
Javascript图形库 Chart.js ,ChartJS 使用HTML5 Canvas元素的Javascript图形库,支持6种统计图形,不依...
Struts2+Spring+hibernate4.0+Maven用户管理,chart.js对用户男女比例、年龄分析
Jquery GOOGLE chart API plotkit 是 是 一般 中 Mochikit flotr 是 饼图不支持 是 中 Prototype YUI2 chart 是 是 是 上 YUI2 Ext chart 3.0前 是 是 上 ext,yui protochart 是 是 是 中 Pr
chartjs-plugin-zoom Chart.js> = 3.0.0的缩放和平移插件 为了获得Chart.js 2.6.0至2.9.x的支持,请使用 。 平移可以通过鼠标或手指来完成。 缩放是通过鼠标滚轮或捏合手势完成的。 用于手势识别。 文献资料 您...