用applet对客户端有要求,不如在Server端将图形生成好,暂存为文件,然后输出url到html,或者,将image的url定位到专用来做图像生成的servlet上,servlet可直接写JPEG的mime流。

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <title>Thinking in VML</title>
    </head>
    <STYLE>
     v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
    <script>
    function drawLinesX(m)
    {
     count=0; //画横坐标
     var textPoint=1;
     for(var i=1;i<=10;i++){
        var py=2750-i*245;
        var strTo=m+" "+py;
        var newLine = document.createElement("<v:line from='200 "+py+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
        group1.insertBefore(newLine);
        if(count%2!=0){
        var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");
        newLine.insertBefore(newStroke);
            var newShape= document.createElement("<v:shape style='position:absolute;left:0;top:"+(py-50)+";WIDTH:1000px;HEIGHT:200px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")    
            group1.insertBefore(newShape);        
            var newText = document.createElement("<v:textbox id='tx"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
            newShape.insertBefore(newText);
            newText.innerText=textPoint;
            textPoint++;
    }
    else
    {
        var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
        newLine.insertBefore(newStroke);
    }
    count++;
     }
    }
    function drawLinesY(n)
    {
     var textPoint=1;
     for(var i=1;i<=n;i++){
        var py=170+i*300;
        var newLine = document.createElement("<v:line from='"+py+" 2700' to='"+py+" 2750' style='position:absolute;z-index:8'></v:line>");
        group1.insertBefore(newLine);
        var newStroke = document.createElement("<v:stroke color='black'>");
        newLine.insertBefore(newStroke);
        var newShape= document.createElement("<v:shape style='position:absolute;left:"+(py-50)+";top:2750;WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")    
        group1.insertBefore(newShape);        
        var newText = document.createElement("<v:textbox id='ty"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
        newShape.insertBefore(newText);
    newText.innerHTML=textPoint;
        textPoint++;
     }
    }
    function drawBar(v,t)
    {
      var h=v*245-50;
      var px=2750-v*245;
      var py=170+t*300;
      var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9' coordsize='21600,21600' fillcolor='blue'></v:rect>")    
      group1.insertBefore(newShape);
    }
    function drawBars()
    {
     drawBar(6,1);
     drawBar(5,2);
     drawBar(6,3);
     drawBar(8,4);
     drawBar(3,5);
     drawBar(1,6);
     drawBar(9,7); 
     drawBar(2,8); 
     drawBar(6,9); 
     drawBar(5,10);
     drawBar(7,11);
     drawBar(3,12);
    }
    </script>
    <body onload="drawLinesX(4500);drawLinesY(13)">
    <table align="center">
    <tr>
    <td align="center" class="title"><strong>数据图表</strong></td>
    </tr>
    <tr>
    <td >
    <div class="memo" style="width:700;line-height:23px">
    &nbsp;&nbsp;&nbsp;&nbsp;<strong>柱状图</strong>:柱状图是由矩形组成的,量体现在它的高度上。我们还是先画坐标,因为柱状图主要体现它的高度,所以一般只画横坐标线。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="drawBars()">显示柱状图</button><br><br>
    <v:group ID="group1" style="WIDTH:700px;HEIGHT:500px" coordsize="4900,3500">
    <v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
    <v:stroke StartArrow="classic"/>
    </v:line>
    <v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
    <v:stroke EndArrow="classic"/>
    </v:line>
    <v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white" strokecolor="black">
    <v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
    </v:rect>
            <v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8" coordsize="21600,21600" fillcolor="white">
                <v:textbox id="text1" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:10pt;v-text-anchor:bottom-center-baseline">0</v:textbox>
            </v:shape>
    </v:group><br>
    &nbsp;&nbsp;&nbsp;&nbsp;你可以点右键查看源代码。可以得到一些方法,不过我编写这些的时候,特别是数据和坐标转换还没有找到通用的规律。所以需要耐心去拼凑。你在应用VML做图表的时候,首先生成坐标,然后根据 x ,y 的范围,
    把横纵坐标轴化分一下,然后就可以根据化分的结果就可以得到 x,y 坐标和值的关系了。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;接下来将讲饼图(Pie)。
    <p align="right">第&nbsp;<a href="step31.html">1</a>&nbsp;<strong style="color:red">2</strong>&nbsp;<a href="step313.html">3</a>&nbsp;页</p>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
      

  2.   

    也就是VML了,去网上搜索一下相关资料吧
      

  3.   

    不知道你所谓的applet与jsp通讯的问题是什么?是从applet里传数据到jsp吗?还是从jsp接收数据?如果是后者,没问题,你就把applet嵌在jsp页面,象嵌在HTML里一样,用参数传入即可。
    如果是前者,又分两种情况,一是不实时的,每次修改数据后提交页面,这样没什么问题吧?另一种是实时的,你直接在applet中与jsp通讯,可以用urlconnect来交流,不过稍为麻烦一点:)
    其实,顶楼上说的不错,用servlet输出成图片其实比applet要方便的多,如果你没有什么需要实时交互的数据与图形,这是最好的选择了:)可以看一下我以前的一个webchart,在www.sharetop.com有下载的。
    它是一个组件,用于jsp/servlet or applet or application,支持三种统计图的生成。
      

  4.   

    To thisfellow(ThisFellow) :在服务器端存文件的方法似乎不可取,因为我希望图形是不断变化的。第二种如果有例程就最好。
    To weidegong(weidegong):上面的代码好像都是些javascript,但怎么JSP不能直接调用javascript写的funciton啊。
      

  5.   

    谢谢 sharetop(天生不笨) 。
    但那个网站似乎并没有提供下载的连接。
      

  6.   

    如果你现在还有,请发到[email protected],Thanks.