Chart.jsチュートリアルを使用して、折れ線グラフの例を描きます

最初のステップはchartを準備します.jsとexcanvas.js(ieブラウザ互換用)ダウンロードアドレス:https://github.com/nnnick/Chart.js参照ドキュメントのアドレス:http://www.bootcss.com/p/chart.js/docs/
簡単な紹介:Chart.jsは、単純でオブジェクト向けで、設計者と開発者のために用意されたグラフ描画ツールライブラリです.6種類のグラフタイプ:曲線図、柱状図、クモの巣図、極地領域図、餅図、環状図
第2ステップhtmlページで2つのjs,excanvasを参照する.jsはie 7,ie 8の互換性の問題を解決することができます

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

canvasを用意する

<div style="width: 50%">
    <canvas id="myChart" width="400" height="450">canvas>
div>

3つ目はcanvasを作成した後、グラフ上の各パラメータを設定するために作成する必要があります.

<script>
// data     
var arr2=new Array();  arr2[0]="30";arr2[1]="52";arr2[2]="45";arr2[3]="78";
arr2[4]="27";arr2[5]="88";arr2[6]="65";

//          
var lineChartData = {  
//  X   
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "transparent",     //   ，  transparent  
        strokeColor : "rgba(220,220,220,1)",  //    ，   "#ffffff"
        pointColor : "rgba(220,220,220,1)",   //      
        pointStrokeColor : "#fff",            //       
        data : [65,59,32,29,46,55,40]      //  Y  
    },

    {
        fillColor : "transparent",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : []    //data    ，    for  ，  arr2    
    }
  ]
}

   for(var i = 0; i < arr2.length;i++)
   { 
    lineChartData.datasets[1].data.push(arr2[i]);//   arr2     data
   }

//          
var defaults = {    
    scaleStartValue :null,     // Y      
    scaleLineColor : "rgba(0,0,0,.1)",    // Y/X    
    scaleLineWidth : 1,        // X,Y    
    scaleShowLabels : true,    //         ,  Y           
    scaleLabel : "", // Y     ,     
    scaleFontFamily : "'Arial'",  //     
    scaleFontSize : 20,        //      
    scaleFontStyle : "normal",  //       
    scaleFontColor : "#666",    //       
    scaleShowGridLines : true,   //         
    scaleGridLineColor : "rgba(0,0,0,.05)",   //     
    scaleGridLineWidth : 2,      //       
    bezierCurve : false,         //          ?  :           
    pointDot : true,             //         
    pointDotRadius : 8,          //        
    pointDotStrokeWidth : 1,     //        ,  :         
    datasetStroke : true,        //      
    datasetStrokeWidth : 2,      //      ,  :   
    datasetFill : false,         //         
    animation : true,            //         
    animationSteps : 60,          //         
    animationEasing : "easeOutQuart",    //         
    onAnimationComplete : null    //              
    }

    window.onload = function(){
        var ctx = document.getElementById("myChart").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData,defaults); 
    }

script>

指定されたcanvas上でChartオブジェクトをインスタンス化した後、Chart.jsはretina画面を自動的にスケールします.折れ線図を作成するプロセスは終わります.他のタイプの図を作成するには、公式サイトの中国語ドキュメントを参照することをお勧めします.次の図はプレゼンテーションの効果です