每日一个js实例13--通过曲线反应json数据

<canvas id="ecg1" width="750" height="166" >浏览器暂不支持h5的canvas元素</canvas>

<script type="text/javascript">

    var arrLine=[];

    $.ajax({

        url : "../data/test.json",

        dataType:"json",

        async:false,//因为ajax是异步执行，所以当数据获取过程中，已经开始执行下面代码，这样下面的曲线数据无法获取，通过此设定为同步就可以获取数据

        success : function(data) {

             for(var i in data.wave_data){

                arrLine[i]=data.wave_data[i];

            }

            //ecgLine1(data.wave_data);

        }

    });

    //alert(arrLine.length);

    //alert(typeof arrLine);

function ecgLine1(){

    var canvasline = document.getElementById("ecg1");

    var ecg1 = canvasline.getContext("2d");

    ecg1.beginPath();

    for (var i = 0; i < arrLine.length; i++) {

        ecg1.lineTo(i,arrLine[i]);

    }

    ecg1.stroke();

    ecg1.closePath();

}

ecgLine1();

</script>

test.json:

{"wave_data":[-32,28,60,2,-46,44,-51,-25,-288,-114,163,-95,0,10]}