`
8366
  • 浏览: 810252 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

js chart

阅读更多

 

          在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> 

 

效果:

 

 

 

分享到:
评论
1 楼 qinjingkai 2009-05-04  
楼主写得非常好,很有参考价值

相关推荐

    js chart js柱状图

    JavaScript图表库,如"js chart js柱状图",是一种用于在网页上创建交互式图形的工具,尤其适合展示数据。这些库通过JavaScript语言与HTML5的Canvas或SVG元素结合,能够动态地生成各种类型的图表,包括柱状图。柱状...

    js chart 绘制柱形图 饼图等

    JS Chart是一个灵活且功能丰富的JavaScript库,它允许开发者通过配置各种属性来定制自己的图表样式和行为。 1. **柱形图(Bar Chart)**: - **定义**:柱形图是一种以矩形的长度表示数据大小的统计图表,通常用于...

    ChartJS-13.1.5.zip_chartjs_javascript

    **ChartJS 13.1.5:JavaScript图表库** ChartJS是一款轻量级的JavaScript图表库,专为快速创建美观的数据可视化而设计。在"ChartJS-13.1.5.zip"这个压缩包中,包含的是ChartJS的13.1.5版本,它支持多种图表类型,如...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之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...

    js-Chart.js资料包

    Chart.js是一款轻量级的JavaScript图表库,专为网页数据可视化设计,尤其适合快速构建简单而美观的交互式图表。它支持多种图表类型,包括折线图、柱状图、饼图、雷达图、极坐标图等,能满足大部分基本的数据展示需求...

    Chart.min.js

    版本:2.5.0

    用于创建矩阵图表的Chart.js模块_JavaScript_TypeScript_.zip

    Chart.js是一个轻量级的JavaScript库,专门用于创建各种类型的图表,如柱状图、折线图、饼图等。这个“用于创建矩阵图表的Chart.js模块_JavaScript_TypeScript_.zip”压缩包可能包含了一个扩展,使得Chart.js能够...

    Laravel开发-laravel-chartjs

    Chart.js 是一个轻量级的 JavaScript 图表库,它支持多种类型的图表,如线图、柱状图、饼图等。它的设计目标是保持简洁,易于上手,同时提供高质量的图表。 `laravel-chartjs` 包将 Chart.js 的优点与 Laravel 的...

    前端项目-chartjs-plugin-annotation.zip

    Chart.js是一个轻量级且强大的JavaScript库,用于创建各种图表,如折线图、柱状图、饼图等。而`chartjs-plugin-annotation`是Chart.js的一个插件,它提供了在图表上添加注释的功能,比如绘制直线、虚线、箭头、文本...

    前端项目-vue-chartjs.zip

    Vue.js和Chart.js是两个非常流行的JavaScript库,分别在前端开发和数据可视化领域有广泛的应用。Vue.js是一款轻量级的渐进式框架,而Chart.js则是一个简单易用的图表库,适合创建各种类型的图表,如柱状图、折线图、...

    QML+Chart.js 实现图表显示

    2. **数据传递**:将Qt应用中的数据通过JavaScript接口传递到`Chart.js`,可以使用`QML`的`js`函数或者`WebChannel`来实现双向通信。`WebChannel`允许C++和JavaScript之间安全、高效地交换数据。 3. **绘制图表**:...

    Chart.js图形报表

    基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制工具,各种图都有,内含简单Demo,引用js即可用基于js的Chart绘制...

    jquery.orgchart.js

    《jQuery OrgChart.js:构建灵活组织结构图的利器》 OrgChart.js 是一款基于 jQuery 的高效、可定制化的组织结构图插件。它允许开发者轻松地在网页上展示层次分明的组织架构,如公司部门、团队成员关系或者任何具有...

    chart.js-javascript

    Chart.js是一款轻量级的JavaScript库,专门用于在Web上绘制各种统计图表,如饼图、柱状图和线图。它以其简单易用、高效和灵活性而受到开发者喜爱。这个压缩包“Chart.js-master”很可能是Chart.js的源码仓库,包含...

    Struts2+Spring+hibernate4.0+Maven用户管理,chart.js的使用

    chart.js是一款轻量级的JavaScript图表库,适合用于数据可视化。它可以轻松创建各种类型的图表,如柱状图、饼图、线图等。在本项目中,chart.js被用来展示用户性别比例和年龄分布的统计信息。通过JSON数据接口获取...

    Javascript图形库 Chart.js.zip

    总之,Chart.js是JavaScript世界里一款强大的图形库,无论是在网页应用还是移动应用中,都能轻松实现数据可视化,为开发者提供了一个高效、灵活的工具来呈现复杂的数据。通过深入理解和熟练运用,我们可以构建出美观...

    chartjs-chart-financial, 金融证券的Chart.js 模块.zip

    chartjs-chart-financial, 金融证券的Chart.js 模块 Chart.js-财务图表用于烛台和OHLC图表的Chart.js MODULE使用和路线图这个 MODULE 还没有初始版本,在npm上还不可用。Chart.js 2.7.0添加了我们的timeseries扩展...

    chartjs-gauge:Chart.js的量规图

    chartjs-gauge 简单量规图 样品 安装 纱线安装: yarn add chart.js chartjs-gauge npm install: npm install --save chart.js chartjs-gauge 配置选项 量规表基于“ 类型。 它定义了以下其他配置选项。 这些选项...

Global site tag (gtag.js) - Google Analytics