在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>
效果:
分享到:
相关推荐
JavaScript图表库,如"js chart js柱状图",是一种用于在网页上创建交互式图形的工具,尤其适合展示数据。这些库通过JavaScript语言与HTML5的Canvas或SVG元素结合,能够动态地生成各种类型的图表,包括柱状图。柱状...
JS Chart是一个灵活且功能丰富的JavaScript库,它允许开发者通过配置各种属性来定制自己的图表样式和行为。 1. **柱形图(Bar Chart)**: - **定义**:柱形图是一种以矩形的长度表示数据大小的统计图表,通常用于...
**ChartJS 13.1.5:JavaScript图表库** ChartJS是一款轻量级的JavaScript图表库,专为快速创建美观的数据可视化而设计。在"ChartJS-13.1.5.zip"这个压缩包中,包含的是ChartJS的13.1.5版本,它支持多种图表类型,如...
组织架构图之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...
Chart.js是一款轻量级的JavaScript图表库,专为网页数据可视化设计,尤其适合快速构建简单而美观的交互式图表。它支持多种图表类型,包括折线图、柱状图、饼图、雷达图、极坐标图等,能满足大部分基本的数据展示需求...
版本:2.5.0
Chart.js是一个轻量级的JavaScript库,专门用于创建各种类型的图表,如柱状图、折线图、饼图等。这个“用于创建矩阵图表的Chart.js模块_JavaScript_TypeScript_.zip”压缩包可能包含了一个扩展,使得Chart.js能够...
Chart.js 是一个轻量级的 JavaScript 图表库,它支持多种类型的图表,如线图、柱状图、饼图等。它的设计目标是保持简洁,易于上手,同时提供高质量的图表。 `laravel-chartjs` 包将 Chart.js 的优点与 Laravel 的...
Chart.js是一个轻量级且强大的JavaScript库,用于创建各种图表,如折线图、柱状图、饼图等。而`chartjs-plugin-annotation`是Chart.js的一个插件,它提供了在图表上添加注释的功能,比如绘制直线、虚线、箭头、文本...
Vue.js和Chart.js是两个非常流行的JavaScript库,分别在前端开发和数据可视化领域有广泛的应用。Vue.js是一款轻量级的渐进式框架,而Chart.js则是一个简单易用的图表库,适合创建各种类型的图表,如柱状图、折线图、...
2. **数据传递**:将Qt应用中的数据通过JavaScript接口传递到`Chart.js`,可以使用`QML`的`js`函数或者`WebChannel`来实现双向通信。`WebChannel`允许C++和JavaScript之间安全、高效地交换数据。 3. **绘制图表**:...
基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制...
Chart.js是一款轻量级的JavaScript库,专门用于在Web上绘制各种统计图表,如饼图、柱状图和线图。它以其简单易用、高效和灵活性而受到开发者喜爱。这个压缩包“Chart.js-master”很可能是Chart.js的源码仓库,包含...
《jQuery OrgChart.js:构建灵活组织结构图的利器》 OrgChart.js 是一款基于 jQuery 的高效、可定制化的组织结构图插件。它允许开发者轻松地在网页上展示层次分明的组织架构,如公司部门、团队成员关系或者任何具有...
chart.js是一款轻量级的JavaScript图表库,适合用于数据可视化。它可以轻松创建各种类型的图表,如柱状图、饼图、线图等。在本项目中,chart.js被用来展示用户性别比例和年龄分布的统计信息。通过JSON数据接口获取...
总之,Chart.js是JavaScript世界里一款强大的图形库,无论是在网页应用还是移动应用中,都能轻松实现数据可视化,为开发者提供了一个高效、灵活的工具来呈现复杂的数据。通过深入理解和熟练运用,我们可以构建出美观...
chartjs-chart-financial, 金融证券的Chart.js 模块 Chart.js-财务图表用于烛台和OHLC图表的Chart.js MODULE使用和路线图这个 MODULE 还没有初始版本,在npm上还不可用。Chart.js 2.7.0添加了我们的timeseries扩展...
chartjs-gauge 简单量规图 样品 安装 纱线安装: yarn add chart.js chartjs-gauge npm install: npm install --save chart.js chartjs-gauge 配置选项 量规表基于“ 类型。 它定义了以下其他配置选项。 这些选项...