VML 实现 图表(柱形图、折线图)

   

//事例

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="Content-Language" content="zh-cn">

    <script src="VMLChart.js" type="text/javascript"></script>

    <script src="column.js" type="text/javascript"></script>

    <script src="brokenLine.js" type="text/javascript"></script>

    <script type="text/javascript">
        //计算字符串长度
        function strlen(str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                if (str.charCodeAt(i) > 255 || str.charCodeAt(i < 0)) len += 2; else len++;
            }
            return len;
        }
        function strLEN(str) {
            var i, sum = 0;
            for (i = 0; i < str.length; i++) {
                if ((str.charCodeAt(i) >= 0) && (str.charCodeAt(i) <= 255))
                    sum = sum + 1;
                else
                    sum = sum + 2;
            }
            return sum;
        }

        var _stsetInterval = window.setInterval;
        window.setInterval = function(fRef, mDelay) {
            if (typeof fRef == 'function') {
                var argu = Array.prototype.slice.call(arguments, 2); //截取除前两位的所有参数
                var f = (function() { fRef.apply(null, argu); }); //传入除前两位的所有参数
                return _stsetInterval(f, mDelay);
            }
            return _stsetInterval(fRef, mDelay);
        }
        var _stsetTimeout = window.setTimeout;
        window.setTimeout = function(fRef, mDelay) {
            if (typeof fRef == 'function') {
                var argu = Array.prototype.slice.call(arguments, 2);
                var f = (function() { fRef.apply(null, argu); });
                return _stsetTimeout(f, mDelay);
            }
            return _stsetTimeout(fRef, mDelay);
        }
    </script>

    <style>
        v/:*
        {
            behavior: url(#default#VML);
        }
    </style>
    <!--柱形图-->

    <script type="text/javascript">
        function drawOut() {
            var values = [{ 'num': '1', 'name': '大地的荒凉123', 'value': '16', 'color': 'red' }, { 'num': '2', 'name': '参天啊123', 'value': '5', 'color': 'green' }, { 'num': '3', 'name': 'MyGod', 'value': '18', 'color': 'yellow' }, { 'num': '4', 'name': 'Happy', 'value': '17', 'color': 'blue' }, { 'num': '5', 'name': 'Kitty', 'value': '14', 'color': '#DC143C' }, { 'num': '6', 'name': '温州', 'value': '4', 'color': '#9932CC' }, { 'num': '7', 'name': '杭州', 'value': '23', 'color': '#BDB76B' }, { 'num': '8', 'value': '12', 'color': 'black'}];
            var minx = 300;
            var miny = 200;
            var divWidth = 500;
            var divHeight = 300;
            win_min_xResize = 300;
            win_min_yResize = 200;
            win_min_xMove = 300 - 10; //减去宽度
            win_min_yMove = 200 - 20;

            $('divDiagramColumn').style.width = divWidth;
            $('divDiagramColumn').style.height = divHeight;
            $('divBrokenLinear').style.width = divWidth;
            $('divBrokenLinear').style.height = divHeight;
            var resizeColumn = $('divDiagramColumn').getElementsByTagName('div').item(0);
            var resizeLinear = $('divBrokenLinear').getElementsByTagName('div').item(0);
            resizeColumn.style.left = divWidth - parseInt(resizeColumn.style.width);
            resizeColumn.style.top = divHeight - parseInt(resizeColumn.style.height);
            resizeLinear.style.left = divWidth - parseInt(resizeLinear.style.width);
            resizeLinear.style.top = divHeight - parseInt(resizeLinear.style.height);

            _drawColumn(values, divWidth, divHeight, 'together');
            _drawLinear(values, divWidth, divHeight);
            resizeWindow_EventAfter.reDrawColumn = function(obj) {
                $('Frame_divDiagramColumn').parentNode.removeChild($('Frame_divDiagramColumn'));
                _drawColumn(values, obj.parentNode.style.width, obj.parentNode.style.height, false);
            }
            resizeWindow_EventAfter.reDrawLinear = function(obj) {
                $('Frame_divBrokenLinear').parentNode.removeChild($('Frame_divBrokenLinear'));
                _drawLinear(values, obj.parentNode.style.width, obj.parentNode.style.height);
            }
        }
        function _drawColumn(values, width, height, isD) {
            SetDefault(ChartType.Column, values, 'divDiagramColumn', false);
            Frame_divDiagramColumn.width = width;
            Frame_divDiagramColumn.height = height;
            Column_Frame_divDiagramColumn.isTextVertical = true;
            Column_Frame_divDiagramColumn.width = 10;
            Column_Frame_divDiagramColumn.isDynamic = isD;
            ShowDefault(ChartType.Column, values, 'divDiagramColumn', Frame_divDiagramColumn, Column_Frame_divDiagramColumn);
        }
        function _drawLinear(values, width, height) {
            SetDefault(ChartType.Linear, values, 'divBrokenLinear', false);
            Frame_divBrokenLinear.width = width;
            Frame_divBrokenLinear.height = height;
            ShowDefault(ChartType.Linear, values, 'divBrokenLinear', Frame_divBrokenLinear, Linear_Frame_divBrokenLinear);
        }
    </script>

</head>
<body οnlοad="drawOut()">
    <v:oval style="position: absolute; left: 200; top: 50; width: 100; height: 80" fillcolor='green'>
        <div style="writing-mode=tb-rl;">
            这里是透明的</div>
    </v:oval>
    <div id="divDiagramColumn" style="position: absolute; left: 50; top: 20; border-width: 1px;
        filter: alpha(opacity=70);">
        <div style="position: absolute; width: 10px; height: 20px; background-color: Red;
            cursor: move;" οnmοusedοwn="multiStartDragWindow(this,this.parentNode)" οnmοuseup="multiStopDragWindow(this)"
            οnmοusemοve="multiDragWindow(this,true,this.parentNode)">
        </div>
    </div>
    <div id="divBrokenLinear" style="position: absolute; left: 650; top: 20; border-width: 1px;
        filter: alpha(opacity=70);">
        <div style="position: absolute; width: 10px; height: 20px; background-color: Red;
            cursor: se-resize;" οnmοusedοwn="startResizeWindow(this);multiStartDragWindow(this);"
            οnmοusemοve="resizeWindow(this);multiDragWindow(this);" οnmοuseup="stopResizeWindow(this,'reDrawLinear');multiStopDragWindow(this);">
        </div>
    </div>
</body>
</html>

 

效果如下:

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值