chart.js使用用法

定義畫布

<canvas id="myChart"></canvas> <!--必須是canvas ,給好Id-->

建立圖表

var ctx = document.getElementById('myChart').getContext('2d');//2d表示圖表是2d的

給定資料

var myBarChart = new Chart(ctx, {
    type: '',
    data: {},
    options: 
});

解釋：chart(引數一,引數二)

引數一：建立的圖表變數；引數二：資料集

資料集引數：

​ type:圖表型別 bar-柱狀圖，line-折線圖，radar-雷達圖。。。等等

​ data:資料結構

​ options:圖表樣式設定，預設為default

data 資料結構引數

​

{
    labels: ,//柱狀圖的每個列下面的名稱標識 比如：第一列：'電腦'（表示第一列是電腦的圖）
    datasets: [{
    label: ,//滑鼠指向某個柱時，柱上面顯示的標籤 比如：'出庫'（指著電腦列時會顯示這列表示 出庫）
      data: ,//柱子表示的資料 比如:50 也可以是陣列[50,60,7,8,109]
    backgroundColor: ,//柱子背景色
 

    borderColor: ,//柱子邊框色
    borderWidth://柱子框的粗細
    },{
    label: ,
    data: ,
    backgroundColor: ,
    borderColor: ,
    borderWidth
}]
}

上面的datasets:[{},{}]裡面一個花括號表示一列有一個柱子，兩個表示兩列有兩個柱子 一次類推（每個柱子資料和顏色和標籤就再花括號裡寫）

options:圖表樣式設定

​ 按需設定 詳細引數可在

chart.js官方文件

裡面檢視

動態新增/刪除/修改資料

我們的報表應該用不到刪除和修改，直接從資料庫拿資料再新增就行了

網上有add和update函式，但是和becool自己包含的char.min.js有文件衝突，凡是函式都用不了，可能要自己去定義，有興趣可以自己網上看

這裡推薦使用這個方法：

先把資料庫的資料放到一個數組/結果集（可以是結構體陣列）裡

然後Js拿到底層的結果集後在迴圈把這個結果集的想要的屬性分別放在不同的數組裡，這樣在上面的data引數裡就可以放置不同的資料陣列，這樣就可以實現一個列裡可以有多個柱子 也就是一個數組資料對應一個柱子

改進

按上述方法畫表後，如果不重新整理頁面，多次畫表（也就是查詢多次報表）後，每次的表都會存在這個頁面裡，

當滑鼠移動的時候就會發現canvas塊的位置會有多個柱狀圖在閃動

所以可以在每次畫表前先清除上次的圖表，然後重新建立：

  $('#myChart').remove(); // this is my <canvas> element
        $('#myChartParent').append('<canvas id="myChart" height="230"></canvas>');

可以看看我myChart.js的具體寫法 裡面的options就用得比較簡單

options的引數有很多，可以實現動畫效果，具體更多引數還是在上面的連結裡看吧

上面的都是柱狀圖的畫法，其他圖的引數有沒有變化還是看連結裡的官方文件吧 但大致都是一樣的

例子

html程式碼

<div class="bar-chart" style="width:500px !important;height:400px!important;float:left;posttion:relative">
        <h5 class="bar-title">XXX當前周訂單量一覽表</h5>
        <canvas id="orderChart" width="400" height="400"></canvas>
    </div>
    <div class="bar-chart" style="width:500px !important;height:400px!important;float:left;posttion:relative">
        <h5 class="bar-title">XXX訂單分類總量一覽表</h5>
        <canvas id="orderTypeChart" width="400" height="400"></canvas>
    </div>

js程式碼

$(function(){

        var an1 = JSON.parse($("#an1").val());
        var an2 = JSON.parse($("#an2").val());
        var datas1=[];var datas2=[];
        var labels=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

        for(var num=0;num<an1.length;num++){
            datas1.push(an1[num]);
        }
        for(var num=0;num<an2.length;num++){
            datas2.push(an2[num]);
        }
        var ctx =document.getElementById("orderChart").getContext("2d");
            data = {
                datasets: [{
                            label:"已服務訂單量",
                            data: datas1,
                            backgroundColor:"#FF6666"
                        },
                        {
                            label:"未服務訂單量",
                            data: datas2,
                            backgroundColor:"#C8C8C8"
                        }
                        ],
                labels: labels
                };
        var options = {
            responsive:true,
            maintainAspectRatio:false
        };
        //var orderChart =new Chart(ctx).Bar(data, options);
        var orderChart = new Chart(ctx,{
            type: 'bar',
            data: data,
            options:options
        });
        //所有訂單柱狀圖
        var anAll = JSON.parse($("#anAll").val());
        var dataAll=[];
        var labels2=["零申報","做賬及報稅","線下業務","公司賬務初始化"];
        for(var num=0;num<anAll.length;num++){
            dataAll.push(anAll[num]);
        }
        var ctx2 =document.getElementById("orderTypeChart").getContext("2d");
            data2 = {
                datasets: [{
                            label:"訂單發生總量",
                            data: dataAll,
                            backgroundColor:"#66FFFF"
                        }
                        ],
                labels: labels2
                };
        var options2 = {
            responsive:true,
            maintainAspectRatio:false
        };
        var orderTypeChart = new Chart(ctx2,{
            type: 'bar',
            data: data2,
            options:options2
        });

});