利用h5,chart.js監測手機三軸加速度，用以研究計步算法等

用window.DeviceMotionEvent來判斷手機瀏覽器是否支持訪問硬件資源，window.addEventListener('devicemotion',deviceMotionHandler,false);經過上一句代碼來對該事件進行監聽，第一個參數是事件類型，第二個參數是一個function對事件的處理，在function總經過varacceleration = eventData.accelerationIncludingGravity; 得到加速器對象，x =acceleration.x;y = acceleration.y;z =acceleration.z; 分別獲取傳感器三個份量的參數，這樣就完成了參數的獲取。​

接下來，咱們開始將數據弄到圖表上：

首先，咱們定義幾個變量：

var oriValuesX = []; //存放x軸數據

var oriValuesY = []; //存放y軸數據

var oriValuesZ = []; //存放z軸數據

var oriValuesSqrt = []; //存放xyz平方相加再開根的數據

var timeX = []; //存放圖表x軸的時間，單位：毫秒

var x = y = z = 0; //用以獲取xyz軸當前的數據

var startTime = new Date().getTime(); //最初的開始時間，單位：毫秒

var string = ''; //定義一個字符串用來顯示數據

隨後，開始調用加速度傳感器：

if (window.DeviceMotionEvent) {

   window.addEventListener('devicemotion', functiondeviceMotionHandler(eventData){

       var currTime = new Date().getTime(); //當前時間

       var diffTime = currTime - startTime;//當前時間減最初時間，獲得當前時間差

       timeX.push(diffTime); //將當前時間差存放

       var acceleration =eventData.accelerationIncludingGravity; //得到加速器對象

       x = acceleration.x; //獲取x軸當前加速度

       y =acceleration.y; //獲取y軸當前加速度

       z =acceleration.z; //獲取z軸當前加速度

       oriValuesX.push(x); //將x軸當前加速度存放

      oriValuesY.push(y); //將y軸當前加速度存放

      oriValuesZ.push(z); //將z軸當前加速度存放

       oriValuesSqrt.push(Math.sqrt(x * x + y * y + z *z)); //將當前xyz加速度平方相加再開根存放

       if(timeX.length == 200){ //控制個數

           line();//調用line函數，生成圖表用的

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

              string = string +(timeX[i]+":"+oriValuesSqrt[i]+"
"); //'當前時間：數據' 的形式顯示在前臺，方便查看數據

           }

          $('.data').html(string);

       }

    }, false);

}

再而後就是調用chart.js​，不會用的能夠參考上一篇博文：//blog.sina.com.cn/s/blog_ad7cad400102xn38.html

混合4個折線，不一樣顏色：

var line = function(){

       var ctx =document.getElementById_x_x_x_x_x_x("myChart");

       var myChart = new Chart(ctx, {

           type:'line',

           data:{

              labels: timeX,

              datasets: [

                 {

                     label:"x",

                     fill:false,

                    lineTension: 0.1,

                    backgroundColor: "rgba(75,192,192,0.4)",

                    borderColor: "rgba(75,192,192,1)",

                    borderCapStyle: 'butt',

                    borderDash: [],

                    borderDashOffset: 0.0,

                    borderJoinStyle: 'miter',

                    pointBorderColor: "rgba(75,192,192,1)",

                    pointBackgroundColor: "#fff",

                    pointBorderWidth: 1,

                    pointHoverRadius: 5,

                    pointHoverBackgroundColor: "rgba(75,192,192,1)",

                    pointHoverBorderColor: "rgba(220,220,220,1)",

                    pointHoverBorderWidth: 2,

                    pointRadius: 1,

                    pointHitRadius: 10,

                     data:oriValuesX,

                     spanGaps:false,

                 },

                 {

                     label:"y",

                     fill:false,

                    lineTension: 0.1,

                    backgroundColor: "rgba(255, 99, 132, 0.2)",

                    borderColor: "rgba(255, 99, 132, 1)",

                    borderCapStyle: 'butt',

                    borderDash: [],

                    borderDashOffset: 0.0,

                    borderJoinStyle: 'miter',

                    pointBorderColor: "rgba(255, 99, 132, 1)",

                    pointBackgroundColor: "#fff",

                    pointBorderWidth: 1,

                    pointHoverRadius: 5,

                    pointHoverBackgroundColor: "rgba(255, 99, 132, 1)",

                    pointHoverBorderColor: "rgba(220,220,220,1)",

                    pointHoverBorderWidth: 2,

                    pointRadius: 1,

                    pointHitRadius: 10,

                     data:oriValuesY,

                     spanGaps:false,

                 },

                 {

                     label:"z",

                     fill:false,

                    lineTension: 0.1,

                    backgroundColor: "rgba(153, 102, 255, 0.2)",

                    borderColor: "rgba(153, 102, 255, 1)",

                    borderCapStyle: 'butt',

                    borderDash: [],

                    borderDashOffset: 0.0,

                    borderJoinStyle: 'miter',

                    pointBorderColor: "rgba(153, 102, 255, 1)",

                    pointBackgroundColor: "#fff",

                    pointBorderWidth: 1,

                    pointHoverRadius: 5,

                    pointHoverBackgroundColor: "rgba(153, 102, 255, 1)",

                    pointHoverBorderColor: "rgba(220,220,220,1)",

                    pointHoverBorderWidth: 2,

                    pointRadius: 1,

                    pointHitRadius: 10,

                     data:oriValuesZ,

                     spanGaps:false,

                 },

                 {

                     label:"sqrt",

                     fill:false,

                    lineTension: 0.1,

                    backgroundColor: "rgba(54, 162, 235, 0.2)",

                    borderColor: "rgba(54, 162, 235, 1)",

                    borderCapStyle: 'butt',

                    borderDash: [],

                    borderDashOffset: 0.0,

                    borderJoinStyle: 'miter',

                    pointBorderColor: "rgba(54, 162, 235, 1)",

                    pointBackgroundColor: "#fff",

                    pointBorderWidth: 1,

                    pointHoverRadius: 5,

                    pointHoverBackgroundColor: "rgba(54, 162, 235, 1)",

                    pointHoverBorderColor: "rgba(220,220,220,1)",

                    pointHoverBorderWidth: 2,

                    pointRadius: 1,

                    pointHitRadius: 10,

                     data:oriValuesSqrt,

                     spanGaps:false,

                 }

              ]

           },

           options:{

              scales: {

                 yAxes: [{

                     ticks:{

                        beginAtZero: true

                     }

                 }]

              }

           }

       });

    };

最後再在此script前面加上:

<canvas id="myChart" width="400" height="400"></canvas>
<div class="data"></div>

大功告成，但這個必須在手機上運行纔有數據，由於現今的電腦瀏覽器不能模擬加速度

附上效果圖：