`
liss
  • 浏览: 842577 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript 生成曲线图

JavaScriptprototypeXHTMLCSSHTML 
阅读更多

引用方法

new gov.Graphic(par1,par2,par3);

par1 为绘图数据，比如：

var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
);

par2 为绘图的容器层 id

par3 为绘图样式参数，可选参数，默认值如下：

{
      height:170, //绘图区域高度
      maxHeight:50, //y轴最高数值
      barDistance:26, //x轴坐标间距
      topDistance:0, //上部填充
      bottomDistance:0, //底部填充
      leftDistance:20, //左部填充
      pointWidth:5, //坐标点宽度
      pointHeight:5, //坐标点高度
      pointColor:"#ff0000", //坐标点颜色
      lineColor:"#ffd43a", //连接线颜色
      valueWidth:20, //y轴数值宽度
      valueColor:"#000", //y轴数值颜色
      timeWidth:20, //x轴数值宽度
      timeColor:"#000", //x轴数值颜色
      disvalue:true, //是否显示y轴数值
      distime:true //是否显示x轴数值
}
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
var gov=new Object();
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}
 var $ = function(elem) {
    if (arguments.length > 1) {
      for (var i = 0, elems = [], length = arguments.length; i < length; i++)
        elems.push($(arguments[i]));
      return elems;
    }
    if (typeof elem == 'string') {
      return document.getElementById(elem);
    } else {
      return elem;
    }
  };
var period =  Class.create();
period.prototype = {
   initialize:function(value,time){
    this.value = value;     
    this.time = time;
   }
};
gov.Graphic = Class.create();
gov.Graphic.prototype={
 initialize: function(data,elm,options){
  this.setOptions(options);
  this.entity=document.createElement("div");
  this.pointBox=$(elm);
  this.showPointGraphic(data);
 },
 setOptions: function(options) {
  this.options = {
   height:170,                 //绘图区域高度
   maxHeight:50,              //y轴最高数值
   barDistance:26,           //x轴坐标间距
   topDistance:0,             //上部填充
   bottomDistance:0,        //底部填充
   leftDistance:20,
   pointWidth:5,               //坐标点宽度
   pointHeight:5,             //坐标点高度
   pointColor:"#ff0000",     //坐标点颜色
   lineColor:"#ffd43a",       //连接线颜色
   valueWidth:20,            //y轴数值宽度
   valueColor:"#000",       //y轴数值颜色
   timeWidth:20,             //x轴数值宽度
   timeColor:"#000",       //x轴数值颜色
   disvalue:true,             //是否显示y轴数值
   distime:true              //是否显示x轴数值
  }
  Object.extend(this.options, options || {});
   },
 showPointGraphic:function(data,obj)
 {
   var This=this;
   var showPoints=new Array();
   var values=new Array();
   var times=new Array();
   This.points=data;
   This.count=data.value.length;
   for(var i=0;i<This.count;i++)
   {
    var showPoint=document.createElement("div");
                var spanValue=document.createElement("span");
                var spanTime=document.createElement("span");
    showPoint.height=This.points.value[i];
                showPoint.value=This.points.value[i];
                showPoint.time=This.points.time[i];
    
    showPoint.style.backgroundColor=this.options.pointColor;
    showPoint.style.fontSize="0px";
    showPoint.style.position="absolute";
    showPoint.style.zIndex ="999";
    showPoint.style.width=this.options.pointWidth+"px";
    showPoint.style.height=this.options.pointHeight+"px";
    showPoint.style.top=this.options.topDistance+"px";
               
    spanValue.style.position="absolute";
    spanValue.style.width=this.options.valueWidth+"px";
    spanValue.style.textAlign="center";
    spanValue.style.color=this.options.valueColor;
    spanValue.style.zIndex ="999";
                spanTime.style.position="absolute";
    spanTime.style.width=this.options.timeWidth+"px";
    spanTime.style.textAlign="center";
    spanTime.style.color=this.options.timeColor;
    var timeHeight=15;
    var valueHeight=21;
    if(!this.options.disvalue) {
     spanValue.style.display="none";
     valueHeight=this.options.pointHeight;
    }
    if(!this.options.distime) {
     spanTime.style.display="none";
     timeHeight=0;
    }
    var left;
    if(showPoints.length!=0){
     left=parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+this.options.barDistance;
    }
    else{
     left=this.options.leftDistance;
    }
    
    showPoint.style.left=left+"px";
                spanValue.style.left=left+parseInt((this.options.pointWidth-this.options.valueWidth)/2)+"px";
                spanTime.style.left=left+parseInt((this.options.pointWidth-this.options.timeWidth)/2)+"px";
            
    if(showPoint.height>this.options.maxHeight)
    {
     showPoint.height=this.options.maxHeight;
    }
    
          spanValue.innerHTML=showPoint.value;
    spanTime.innerHTML=showPoint.time;
                       
                showPoints.push(showPoint);
                values.push(spanValue);
                times.push(spanTime);
    This.entity.appendChild(showPoint);
    This.entity.appendChild(spanValue);
    This.entity.appendChild(spanTime);
    
    var percentage=showPoints[i].height/this.options.maxHeight||0;
    var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage;
    showPoints[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px";
                values[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px";
                times[i].style.top=this.options.height-this.options.bottomDistance-timeHeight+"px";
   }
   var _leng=showPoints.length
   for(var i=0;i<_leng;i++)
   {
    if(i>0)
     {
      This.drawLine(parseInt(showPoints[i-1].style.left),
             parseInt(showPoints[i-1].style.top),
             parseInt(showPoints[i].style.left),
             parseInt(showPoints[i].style.top)
             );
     }
   }
   This.Constructor.call(This);
  },
  drawLine:function(startX,startY,endX,endY)
  {
   var xDirection=(endX-startX)/Math.abs(endX-startX);
   var yDirection=(endY-startY)/Math.abs(endY-startY);
   var xDistance=endX-startX;
   var yDistance=endY-startY;
   var xPercentage=1/Math.abs(endX-startX);
   var yPercentage=1/Math.abs(endY-startY);
   if(Math.abs(startX-endX)>=Math.abs(startY-endY))
   {
    var _xnum=Math.abs(xDistance)
    for(var i=0;i<=_xnum;i++)
    {
     var point=document.createElement("div");
     point.style.position="absolute";
     point.style.backgroundColor=this.options.lineColor;
     point.style.fontSize="0";
     point.style.width="1px";
     point.style.height="1px";       
     
     startX+=xDirection;
     point.style.left=startX+this.options.pointWidth/2+"px";
     startY=startY+yDistance*xPercentage;
     point.style.top=startY+this.options.pointHeight/2+"px";
     this.entity.appendChild(point);
    }
   }
   else
   {
    var _ynum=Math.abs(yDistance)
    for(var i=0;i<=_ynum;i++)
    {
     var point=document.createElement("div");
     point.style.position="absolute";
     point.style.backgroundColor=this.options.lineColor;
     point.style.fontSize="0";
     point.style.width="1px";
     point.style.height="1px";       
     
     startY+=yDirection;
     point.style.top=startY+this.options.pointWidth/2+"px";
     startX=startX+xDistance*yPercentage;
     point.style.left=startX+this.options.pointHeight/2+"px";
     this.entity.appendChild(point);
    }
   }
  },
  Constructor:function()
  {
   this.entity.style.position="absolute";
   this.pointBox.innerHTML="";
   this.pointBox.appendChild(this.entity);
  }
}
 window.onload=function(){
  var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据
   [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
   );
  var data1=new period([48,23,10,2,12,8,24,25,15,35,25,14,42,58,46,25,12,8,14,28,42],//y轴数据
   [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
   );
  new gov.Graphic(data,"box");
  new gov.Graphic(data1,"box1",{ pointColor:"#3366ff",lineColor:"#33ffff"});
 }
</script>
<style type="text/css">
body,td,th {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 margin:0px;
 padding:0px;
}
#box,#box1{
 padding:13px 0px 10px;
 padding-left:28px;
 width:677px;
 height:180px;
 background:url("http://www.cftea.com/c/2010/04/IW3RTIXKSK53OL47/WIVML582TSG7FCYI.gif") no-repeat;
}
</style></head>
 <body>
 <div id="box"></div>
 <div id="box1"></div>
 </body>
</html>
分享到：
| 腾讯检测 IP 省市的接口
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript曲线图

    描述部分说明了本文将提供一个具体的代码示例，用于演示如何使用JavaScript生成曲线图。注释的存在有助于理解代码的逻辑和流程，这对于初学者或希望深入了解其工作原理的人来说非常重要。 ### 知识点详细解析： ##...

    生成曲线图

    "生成曲线图"这个主题，就是关于如何使用编程语言或者特定工具创建图表，特别是曲线图，来展示数据的一种技术。曲线图是一种强大的工具，它能够帮助我们直观地理解复杂的数据关系，比如时间序列分析、函数拟合或者...

    asp生成曲线图asp生成曲线图

    对于ASP经典版（非.NET框架），生成曲线图的过程会有所不同，可能需要借助JavaScript库如jQuery或Flash组件来实现，这通常涉及到更多的前端技术。 在提供的标签“曲线图”和压缩包中的文件“dbvml”可能是指数据库...

    用JavaScript实现网页曲线图动态信息显示.pdf

    用JavaScript实现网页曲线图动态信息显示.pdf 本文主要介绍了如何使用JavaScript实现网页曲线图动态信息显示。曲线图是数据分析中常用的数据表现方式，但传统的曲线图只能显示宏观的变化趋势和走势，无法显示具体的...

    各种JS曲线图效果

    在JavaScript的世界里，曲线图是一种常见的数据可视化工具，它能够帮助我们直观地理解复杂的数据集。本资源包“各种JS曲线图效果”包含了多种不同类型的曲线图实现，这些实现可以帮助开发者在网页上创建动态、交互式...

    javascript js如何根据数据生成png图片.zip_jsp js

    在`canvas+js画曲线图_draw的过程还带补间动画.html`中，我们可能看到如何使用Canvas API创建动态曲线图。关键步骤包括： 1. 获取Canvas元素：通过`document.getElementById('canvasId')`获取HTML中的Canvas元素。 ...

    html曲线图技术资料

    HTML（HyperText Markup Language）本身并不具备绘制图形的能力，但它可以与CSS（Cascading Style Sheets）和JavaScript一起工作，借助于库如Chart.js、D3.js等，实现动态和交互式的曲线图。以下是一些关键知识点： ...

    asp 统计曲线图函数，可随意调用。

    在ASP中生成曲线图，我们可以利用第三方图表库，如FusionCharts、JFreeChart等，这些库提供了丰富的API和示例，使得在服务器端生成图像变得更加简单。例如，FusionCharts是一个JavaScript图表库，可以与ASP结合使用...

    曲线图代码 用php 写的

    此外，可能会涉及到数据处理和计算，以便根据输入数据动态生成曲线图。这些库通常提供了绘制线条、填充颜色、设置轴标签等图形元素的方法，使得开发者可以定制化图表的样式和功能。 【压缩包子文件的文件名称列表】...

    曲线图源码，实例,asp.net,asp,HTML都可调用

    例如，D3.js是一个非常流行的JavaScript库，它可以直接操作DOM来生成复杂的可视化效果，包括曲线图。 "webgraphdemo"这个文件很可能是包含演示和示例代码的目录，它可能包含了如何在ASP.NET、ASP和HTML环境中调用...

    jq字符串转换成曲线图

    有了数据数组，我们可以选择一个图形库来生成曲线图。以Chart.js为例，创建一个新的HTML canvas元素，然后初始化Chart对象： ```html &lt;canvas id="myChart"&gt;&lt;/canvas&gt; ``` ```javascript var ctx = document....

    JS生成多种图形(饼状图,柱状图,折线图,雷达图)

    总的来说，JavaScript生成图形的能力是现代Web开发的重要组成部分，它使得数据可视化变得更加便捷和高效。无论是用于仪表板、报告还是交互式应用，了解如何使用JS创建饼状图、柱状图、折线图和雷达图都将极大地提升...

    网页版专题图、饼图、曲线图

    网页版专题图、饼图和曲线图是数据可视化的重要组成部分，尤其在JavaScript（JS）环境中，它们被广泛应用在各种Web应用程序中，用于清晰地展示复杂的数据。这些图表可以帮助用户直观理解大量信息，使得数据分析和...

    自动绘制海量数据的曲线图

    标题中的"自动绘制海量数据的曲线图"指的是利用特定软件或编程库，如Python的Matplotlib、Seaborn或者JavaScript的D3.js等，将大量数据点有效地转化为可视化的曲线图表，以直观地展示数据的变化规律。 描述中提到，...

    jquery曲线图制作

    #### 五、生成基本曲线图 接下来，通过调用`$.jqplot`插件并传入容器ID以及数据来创建图表。例如： ```javascript $.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]); `...

    使用D3.js库绘制曲线图

    在实际操作中，首先会加载XML数据，然后在JavaScript中解析这些数据，接着创建SVG路径元素，用D3的`line`函数生成曲线路径，这个函数根据给定的数据点计算出连接点的平滑曲线。同时，还可以添加轴、标题、图例等元素...

    各种编程适用的WEB曲线图

    "各种编程适用的WEB曲线图" 提供了一种方式，让开发者可以轻松地在网页上展示数据，通过修改XML来定制图表的样式和内容。这种技术广泛应用于数据分析、报告展示、监控系统等多个领域。以下是关于这个主题的详细知识...

    jsp 曲线图显示 FusionChartsFree

    FusionCharts Free是一款功能强大的JavaScript图表库，它允许开发者轻松地在网页上创建各种交互式的图表，包括曲线图。本篇文章将深入探讨如何在JSP（JavaServer Pages）环境中利用FusionCharts Free来展示曲线图。 ...

    Highcharts饼状图 柱状图 曲线图

    4. 调用`Highcharts.chart()`方法生成曲线图。 关于自定义模块名称，Highcharts支持扩展和自定义模块，通过`Highcharts.registerModule()`方法可以加载和注册自定义功能模块。这允许开发者根据需求增加特定的功能，...

Magicbox
Global site tag (gtag.js) - Google Analytics