使用Chartjs


1、這是個人的mark檔,逼迫自己以后寫這樣的博客,所以不是分享

2、chartjs是一個圖表控件集合,使用html5的canvas進行繪制。

注意:新手請先直接進入官網:http://www.chartjs.org/(一定是要這個,如果是其他的可能會入坑,因為版本問題)

 然后進入Documentation 

或者,運行以下代碼,調用的是cdn js.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>測試Pie餅狀圖型</title>   
     <script src="//cdn.bootcss.com/Chart.js/2.1.6/Chart.bundle.js"></script>
     <style>
     
    </style>
</head>
<body>

<!-- 展示canvas -->
 <div style="width: 500px;">
    <canvas id="myChart" style="width:400px; height:800px;"     ></canvas>
 </div>


<!--引入 chartjs-->



<script type="text/javascript">
 // 設置參數
 var data = {
    labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
};


    // Get the context of the canvas element we want to select
        var ctx = document.getElementById("myChart").getContext("2d");
        var myBarChart = new Chart(ctx, {
                                            type: 'pie',
                                            data: data,
                                            // options: options
                                    });
</script>
</body>
</html>
 
        

其顯示結果為:

 

這里我先是進入的  http://chartjs.cn [一個chartjs中文網]

可以看下他的調用代碼 :

     var myNewChart = new Chart(ctx).PolarArea(data);

 

在chorme里根本就調用不了這個方法,而且會報錯誤:可能是版本比較老的調用方式,

而官網的調用方式提供兩種:

 

 

 這里有關鍵字similar to the v1.0 syntax意思是1.0之前的語法和現在不一樣,

現在只支持new Chart(ctx,opt) 或者 new Chart.chartType(ctx,opt)(最好不用).

 

好了。

當然,如果是使用1.x的用戶可以去這里看文檔:
https://github.com/chartjs/Chart.js/blob/v1.1.1/docs/00-Getting-Started.md
但是,話說回來 ,都用2.x了還管什么1.x呢,當然,如果要維護前輩的代碼,還是要看下的
呵呵(輕快的~)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM