每日一个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]}