想问一下……想在网页上实现一个图表，像SINA股市那样实时会动的……应该怎么做

Question

SINA股市那样，会实时动……
假设有数据库，数据，怎样在网页上做这样一个图表呢？

Answer 1

我想这个图表应该是用的一个可以在JS里面调用的控件吧,不过这样的话就可以用AJAX来取数据,就是定时去取数据,然后传到控件里就可以了

Answer 2

一是用JS实现。
二是用Flash实现。
三是用Sliverlight实现。

Answer 3

强烈关注.最近我也遇到类似的问题.一直也没有什么好的解决方案.
MARK

Answer 4

告诉你个实时监控的控件哈，DundasWebChart控件绝对可以实现网页实时数据显示，不过用VS2008的话MSCHART应该也有，MS已经把他收购了，MS真强大

Answer 5

首先要搞懂几个问题.
第一,所谓的图表实质是报表
第二,动态的条件,B/S协议是基于请求/响应的断开式连接模式,你不请求服务器是不会主动发送数据到客户端的.也就是说必须间断的请求才能服务器才能实现动态提供数据解决方案:
1.用flash插件实现,flash是基于TCP/IP,但是它可以规避B/S的弊端建立TCP通道建立常态连接,但是对于需要你对action script有一定了功底.当然,如果你不自己开发,有大把的flash报表控件,但是大部分不基于动态.推荐FusionCharts2.Sliverlight,需客户端安装插件,实质也是建议C/S通道,首先确定你们的项目是业务系统还是互联网项目,如果是互联网项目这个方案目前不适,Sliverlight的普及还很遥远..3.Google API,http://code.google.com/intl/zh-CN/apis/chart/
这种方案下要实现动态效果,可以在客户端利用ajax每隔时间段对服务器请求最近的数据.再调用Google API接口刷新图表

Answer 6

js的方案有好多种呢,更新图片未必是最符合需求的一种其实要说方案就太多了....activeX也是....其实真正开发还是比较麻烦的,尤其是要做成通用性的,这个我用flash开发过

Answer 7

//import flash.text.TextField;
//import flash.display.Stage;
import mx.utils.Delegate;
import mx.events.EventDispatcher;Stage.align = "TL";var datavalue:String = "<root><r><c>19.5</c><d>2008-11-2</d></r><r><c>18.5</c><d>2008-11-9</d></r><r><c>18.66</c><d>2008-11-16</d></r><r><c>20</c><d>2008-11-23</d></r><r><c>18.88</c><d>2008-11-30</d></r><r><c>19.01</c><d>2008-12-7</d></r><r><c>19.22</c><d>2008-12-14</d></r><r><c>18.84</c><d>2008-12-21</d></r></root>";
var XXvalue:String=(counvalue!=null)?counvalue:"周均价   ";
//var starttime:String = "2008-11-12";
var xmlTotal:XML = new XML(datavalue);
var dayLength:Number = xmlTotal.childNodes[0].childNodes.length; //获取子结点个数var countArrs=new Array(); 
var countTimes=new Array();
var maxCountValue:Number=0; //获取最大值
var minCountValue:Number=0;var startTop:Number=22; //初始顶步距离
var startLeft:Number=25; //初始左边距
var heigthForCount:Number=(FlashHeight!=null)?FlashHeight:100; //总高度
var leftForCount:Number=20; //第一个点不帖边，距离左边竖线的值
var mostLeft:Number=(FlashRight!=null)?FlashRight:440; //右边距
var lestTop:Number=5; //距离最高点的长度var middleLeft:Number=mostLeft-2*leftForCount; //统计的长度
var averageHeight:Number; //统计的均高
var averageWidth:Number;  //统计的均长
//虚线
MovieClip.prototype.dashTo = function(startPoint, destPoint, dashLength, spaceLength) {  
  var x = destPoint.x-startPoint.x; 
  var y = destPoint.y-startPoint.y;         
  var hyp = Math.sqrt((x)*(x)+(y)*(y)); 
  var units = hyp/(dashLength+spaceLength);              
  var dashSpaceRatio = dashLength/(dashLength+spaceLength); 
  var dashX = (x/units)*dashSpaceRatio; 
  var spaceX = (x/units)-dashX; 
  var dashY = (y/units)*dashSpaceRatio; 
  var spaceY = (y/units)-dashY; 
  this.moveTo(startPoint.x, startPoint.y); 
  while (hyp>0) { 
    startPoint.x += dashX; 
    startPoint.y += dashY; 
    hyp -= dashLength; 
    if (hyp<0) { 
      startPoint.x = destPoint.x; 
      startPoint.y = destPoint.y; 
      } 
  this.lineTo(startPoint.x,startPoint.y); 
  startPoint.x += spaceX; 
  startPoint.y += spaceY; 
  this.moveTo(startPoint.x,startPoint.y); 
  hyp -= spaceLength; 
  } 
  this.moveTo(destPoint.x, destPoint.y); 
}; 
function dotted(Name,cenj,top1,top2,left1,left2){
createEmptyMovieClip(Name, cenj); 
with (eval(Name)) { 
   lineStyle(0, 0xcccccc, 100); 
   dashTo({x:left1, y:top1}, {x:left2, y:top2}, 5, 5); 
}
}//循环取值
for(var i=0;i<dayLength;i++)
{
var dayNode:XMLNode=xmlTotal.childNodes[0].childNodes[i];
var szCount=dayNode.childNodes[0].childNodes[0].nodeValue;
var szTime=dayNode.childNodes[1].childNodes[0].nodeValue;
//trace(szTime);
countArrs[i]=szCount;
countTimes[i]=szTime;
if(i==0)
{
maxCountValue=parseInt(szCount);
}
else if(maxCountValue<parseInt(szCount))
{
maxCountValue=parseInt(szCount);
}

if(i==0)
{
minCountValue=parseInt(szCount);
}
else if(minCountValue>parseInt(szCount))
{
minCountValue=parseInt(szCount);
}

}
if(maxCountValue!=0)
{
var minValue=(ReturnMax(maxCountValue)/10)-(ReturnMin(minCountValue)/10);
//averageHeight=(heigthForCount-startTop)/(ReturnMax(maxCountValue)/10);
//trace(averageHeight);
averageHeight=(heigthForCount-startTop)/minValue;
//trace(averageHeight);
}
else
{
averageHeight=0;
}
if(dayLength>1)
{
averageWidth=middleLeft/(dayLength-1);
}
else
{
averageWidth=0;
}
//trace(averageWidth);
_root.createEmptyMovieClip("CountGraphic", 2);
CountGraphic.lineStyle(1, 0xE6F2FA, 100);
CountGraphic.beginFill(0xE6F2FA,100);
CountGraphic.moveTo(startLeft,heigthForCount);
_root.createEmptyMovieClip("ConnectionLine", 3);
ConnectionLine.lineStyle(2, 0x0077CC, 100);var curLeft:Number;
//_root.btnShow.visible=false;
var arrShow:Array=new Array();
var fontShow:Array=new Array();
var dateNum:Number=0;
for(var i=0;i<dayLength;i++)
{
curLeft=i*averageWidth+startLeft;
var curTop=103-averageHeight*(countArrs[i]-(ReturnMin(minCountValue)/10));
//trace(curTop);
arrShow[i]="btnShow"+i;
_root.attachMovie("yuan",arrShow[i],i+1000);
//duplicateMovieClip(_root.btnShow,arrShow[i], i+13);
var functionTemp:Function;
functionTemp=getDataFunction(countArrs[i],countTimes[i],curTop,curLeft);
eval(arrShow[i])._x = curLeft;
eval(arrShow[i])._y = curTop;
eval(arrShow[i]).onRollOut=HideDataView;
eval(arrShow[i]).onRollOver=functionTemp;
//trace(countArrs[i]);
CountGraphic.lineTo(curLeft,curTop);
if(i==0)
{
ConnectionLine.moveTo(curLeft,curTop);
}
else
{
ConnectionLine.lineTo(curLeft,curTop);
}
var dateStartTime:Date=new Date(countTimes[i].split("-")[0],countTimes[i].split("-")[1]-1,countTimes[i].split("-")[2]);
//trace(dateStartTime.getDay());

if(dateStartTime.getDay()==0)
{
dateNum+=1;
fontShow[i]="my_txt"+i;
if(curLeft<mostLeft-55){
_root.createTextField(fontShow[i], 500+i, curLeft, heigthForCount+5, 300, 100);
}else{
_root.createTextField(fontShow[i], 500+i, curLeft-55, heigthForCount+5, 300, 100);
}
eval(fontShow[i]).multiline = true;
eval(fontShow[i]).wordWrap = true;
var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0x333333;
my_fmt.underline = false;
//if(dateNum<5){
if(i%2==0){
if(curLeft<mostLeft-55){
eval(fontShow[i]).text = "| "+dateStartTime.getFullYear()+"-"+(dateStartTime.getMonth()+1)+"-"+dateStartTime.getDate();
dotted('top_dotted'+i,10+i,heigthForCount,7,curLeft,curLeft);
}else{
eval(fontShow[i]).text = dateStartTime.getFullYear()+"-"+(dateStartTime.getMonth()+1)+"-"+dateStartTime.getDate()+" |";
dotted('top_dotted'+i,10+i,heigthForCount,7,curLeft-55,curLeft-55);
}
}
eval(fontShow[i]).setTextFormat(my_fmt);
}
}
CountGraphic.lineTo(curLeft,heigthForCount);
CountGraphic.lineTo(startLeft,heigthForCount);
CountGraphic.endFill();
//trace((ReturnMax(maxCountValue)/10).toString());

Answer 8

/*
外框代码
*/
_root.createEmptyMovieClip("line", 1);
line.lineStyle(2, 0x666666, 100);
line.moveTo(leftForCount-12, lestTop+3);
line.lineTo(leftForCount-12,heigthForCount+3);
line.lineTo(mostLeft+7,heigthForCount+3);
function ShowGraphic(){

}//获得最高位数，例如324的最高位是400
function ReturnMax(maxV)
{
var maxValue:Number=maxV;
if(maxValue>=10)
{
return ReturnMax(maxValue/10)*10;
}
else
{
return parseInt((maxValue*10+1).toString());
}
}function ReturnMin(minV)
{
var minValue:Number=minV;
if(minValue>=10)
{
return ReturnMin(minValue/10)*10;
}
else
{
return parseInt((minValue*10-1).toString());
}
}function getDataFunction(countData,curDate,posTop,posLeft)
{
return function(){
if(!_root.ShowDataDetail){
_root.attachMovie("title","ShowDataDetail",9900);
_root.createTextField("titleData", 9901, 1000, 1000, 120, 20);
_root.createTextField("titleNum", 9902, 1000, 1000, 120, 20);
}
if(posLeft<mostLeft/2){
_root.titleData._x=posLeft+45;
_root.titleData._y=posTop-22;
_root.titleNum._x=posLeft+45;
_root.titleNum._y=posTop-10;
_root.ShowDataDetail._x=posLeft-30;
_root.ShowDataDetail._y=posTop;
}else{
_root.titleData._x=posLeft-125;
_root.titleData._y=posTop-32;
_root.titleNum._x=posLeft-125;
_root.titleNum._y=posTop-18;
_root.ShowDataDetail._x=posLeft-200;
_root.ShowDataDetail._y=posTop-10;
}
_root.ShowDataDetail._visible=true;
_root.titleData._visible=true;
_root.titleNum._visible=true;
var my_titleData:TextFormat = new TextFormat();
my_titleData.color = 0x0077CC;
var date2=curDate.split("-")[2]==undefined?'':curDate.split("-")[2]+"日";
_root.titleData.text=curDate.split("-")[0]+"年"+curDate.split("-")[1]+"月"+date2;
        _root.titleNum.text=XXvalue+countData.toString();
titleData.setTextFormat(my_titleData);
};
}function HideDataView()
{
_root.ShowDataDetail._visible=false;
_root.titleData._visible=false;
_root.titleNum._visible=false;
}
function LeftFont(font,con,top,cenj){
_root.createTextField(font, cenj,7, top, 50, 20);
eval(font).multiline = true;
eval(font).wordWrap = true;
var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0x333333;
my_fmt.size = 10;
my_fmt.underline = false;
eval(font).text = con;
eval(font).setTextFormat(my_fmt);
}
//LeftFont('font12','0',120,501);
LeftFont('font1',"-"+(ReturnMin(minCountValue)/10),heigthForCount-10,5);
LeftFont('font2',"-"+ReturnMax(maxCountValue)/10,lestTop+10,6);
dotted('font2_dotted',20,lestTop+20,lestTop+20,mostLeft,10);
LeftFont('font3',"-"+((ReturnMax(maxCountValue)/10)+(ReturnMin(minCountValue)/10))/2,(startTop+lestTop)*2,7);
dotted('font3_dotted',21,(startTop+lestTop)*2+10,(startTop+lestTop)*2+10,mostLeft,10);

Answer 9

使用java的jFreeChart可以实现！