近来对JS绘制图表很感兴趣,想知道是怎么实现的。
我稍微了解了一下,网上有很多插件,例如Flot是用canvas实现的,在IE中用VML。还有一种SVG语言也可以绘图。我想知道还有其他的实现方法吗?
我尝试了用div当作一个点来画,柱状图没问题,折线效果就不好,曲线更不知道怎么画。如果还有其他方法,请说一下大致方向,或者发一下相关链接。谢谢。

解决方案 »

  1.   

    VML画图方便,javascript画图兼容性好.
      

  2.   

    js画图,实际上的画出的是一个个点,宽和高都是1px的点,由点形成的线,这个点可以用div,也可以用img,设置好width和height都是1px就行了。
    如下例子:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
         <script type="text/javascript">
     /*js绘制表格斜线方法
    --注意,一定要以此作为页面的文档类型标准--
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    */
    function drawPointer(xPos, yPos, color) {
        //div模拟出一个点
        return "<div name='divline' style='position:absolute;left:" + xPos + ";top:" + yPos + ";clip:rect(0,1px,1px,0);width:1px;height:1px;background-color: " + color + ";overflow:hidden;'></div>";
        //也可采用img来实现一个像素的点
        //return "<img border='0' name='imgline' style='position: absolute; left: " + xPos + "; top: " + yPos + ";background-color: " + color + "' width=1 height=1>";
    }function drawLine(xStart, yStart, xEnd, yEnd, color) {
        var tmp;
        if (xStart >= xEnd) {
            tmp = xStart;
            xStart = xEnd;
            xEnd = tmp;
            tmp = yStart;
            yStart = yEnd;
            yEnd = tmp;
        }
        var strLines = "";
        for (var i = xStart; i <= xEnd; i++) {
            var x = i;
            var y = (yEnd - yStart) / (xEnd - xStart) * (x - xStart) + yStart;
            strLines += drawPointer(x, y, color);
        }    return strLines;
        //document.write(strLines);
        //document.body.innerHTML += strLines;
    }//获取该元素的具体坐标位置
    function getPos(obj) {
        var left = 0;
        var top = 0;    while (obj.offsetParent) {
            left += obj.offsetLeft;
            top += obj.offsetTop;
            obj = obj.offsetParent
        }
        //alert(left+"|"+top);
        return [left, top];
    }
    /*
        drawTableDiagonal方法参数说明
        tdname:单元格名字
        leftContent:左边放置的文字内容
        rightContent:右边放置的文字内容
        color:线条颜色(若没有该参数,则默认黑色)
        fontSize:字体大小(若没有该参数,则默认该页面上的字体大小)
    */function drawTableDiagonal(tdname,leftContent, rightContent, color,fontSize) {
        var currentTd = document.getElementById(tdname);
        if (currentTd != null) {
            if (color == "" || color==null) color = "black";
            if (fontSize == "" || fontSize==null) {
                strFontSize = "";
            } else {
                strFontSize = "font-size:" + fontSize;
            }
            //每次都要先清空内部所有,然后灌注相应内容
            currentTd.innerHTML = "";
            var tmpTable = "<table cellpadding='0' cellspacing='0' border='0' style=\"width:100%; height:100%\">";
            tmpTable += "<tr><td></td>";
            tmpTable += "<td style=\"text-align:right;" + strFontSize + "\">" + rightContent + "</td>";
            tmpTable += "</tr><tr>"
            tmpTable += "<td style=\"text-align:left;" + strFontSize + "\">" + leftContent + "</td>";
            tmpTable += "<td></td></tr></table>";
            currentTd.innerHTML += tmpTable;
            var objPos = getPos(currentTd);
            var strLines=drawLine(objPos[0], objPos[1], objPos[0] + currentTd.offsetWidth, objPos[1] + currentTd.offsetHeight, color); //'#000000'
            currentTd.innerHTML += strLines;
        }
        else {
            alert("需要绘制斜线的单元格不存在!");
        }
    }  </script>
        <style type="text/css">
            .style1
            {
                text-align: center;
            }
            .style2
            {
                font-size: large;
                font-weight: bold;
            }
        </style>
    </head>
        
       <script type="text/javascript" >
          function setTdDiagonal() {
              drawTableDiagonal('tableDiagonal', '行业类型', '所属区域', 'red', '12px');
              drawTableDiagonal('Td1', '许可证类型', '月份', 'black');
          }
        </script>
    <body onload="setTdDiagonal()" onresize="setTdDiagonal()">
        <form id="form1" runat="server">
        <div class="style1">
            <span class="style2">单元格绘制斜线demo
        </span>
        <br/><br/><br/><br/>
        </div>
        <table border="0" bgcolor="000000" cellspacing="1" style="width: 100%;">
            <tr bgcolor="FFFFFF">
                <td id="tableDiagonal">
                    </td>
                <td>
                    危险化学品经营企业</td>
                <td>
                    2</td>
                <td>
                    3</td>
                <td>
                    4</td>
                <td>
                    5</td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
        <br/>
         <table border="0" bgcolor="000000" cellspacing="1" style="width: 100%;">
            <tr bgcolor="FFFFFF">
                <td id="Td1">
                    </td>
                <td>
                    危险化学品经营企业</td>
                <td>
                    2</td>
                <td>
                    3</td>
                <td>
                    4</td>
                <td>
                    5</td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    </td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr bgcolor="FFFFFF">
                <td>
                    危险化学品经营企业</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
        
      
        </form>
    </body>
    </html>
      

  3.   

    回复 3楼:我画的效果比这个例子还好些,但是不能画曲线啊,很难看。斜线都不清晰了。还有JS动画,都是用canvas实现的吗?
      

  4.   

    http://squll.blogbus.com/logs/3932957.html
    http://www.nfan.org/bbs/061214132216828_files/061214132216875scriptswz_jsgraphics.zipwz_jagraphics.js 是一个js的画图插件类。js的能力是有限的,别让他去做他做起来费力的事情,做动画,你可以选择vml,flash,silverlight,flex等等。
      

  5.   


    http://www.scriptlover.com/controls/highcharts/index.htm可以帮到你