Mysql To Charts（四）--draw ichartjs

Mysql To Charts（四）--draw ichartjs

需要將數據在網頁端繪制成曲線圖標的形式，在網上找到了ichartjs開源圖形組件

ichartjs 是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標簽繪制各式圖形

下面的內容主要學習參考於ichartjs官網的相關文檔和源碼：
http://www.ichartjs.com/

構建項目環境

由於ichartjs是一個js庫，所以只要將ichart.js加入頁面中的head中就完成了ichartjs的運行環境，代碼如下：

<script type="text/javascript" src="ichart.1.2.min.js"></script>

ichartjs提供的圖像

面積圖：

var chart = new iChart.Area2D({});

2D條形圖：

new iChart.Bar2D({});

2D柱狀圖：

new iChart.Column2D({});

3D柱狀圖：

new iChart.Column3D({});

折線圖：

var chart = new iChart.LineBasic2D({});

2D餅圖：

new iChart.Pie2D({});

2D環形圖：

var chart = new iChart.Donut2D({});

3D餅圖：

var chart = new iChart.Pie3D({});

組合圖：

現需實現的是3個參數的曲線圖，故參考ichartjs開源組件中的折線圖->網站最近5天流量趨勢A 中的源碼

根據需求，修改後：

data模塊代碼

 var newBugsNumberArr=[],closedBugsNumberArr=[],remainBugsNumberArr=[];
 var data = [
        {
            name : '新增bug數',
            value:newBugsNumberArr,
            color:'#0d8ecf',
            line_width:2
        },
        {
            name : '關閉bug數',
            value:closedBugsNumberArr,
            color:'#ef7707',
            line_width:2
        },
        {
            name : '遺留bug數',
            value:remainBugsNumberArr,
            color:'#ec4646',
            line_width:2
        }
    ];

其中
name：該曲線的參數名稱
value：數組，該曲線各個節點的值
color：該曲線的顏色
line_width：該曲線的寬度

曲線的畫圖部分的代碼如下：

    var labels = weeks;
    var line = new iChart.LineBasic2D({
        render : 'canvasDiv',
        data: data,
        align:'center',
        title : '2016年' + projectName + '項目bug統計',
        footnote : '數據來源：Jira平台',
        width : 1800,
        height : 710,
        tip:{
            enable:true,
            shadow:true
        },
        legend : {
            enable : true,
            row:1,//設置在一行上顯示，與column配合使用
            column : 'max',
            valign:'top',
            sign:'bar',
            background_color:null,//設置透明背景
            //offsetx:-80,//設置x軸偏移，滿足位置需要
            border : true
        },
        crosshair:{
            enable:true,
            line_color:'#62bce9'
        },
        sub_option : {
            label:false,
            point_hollow : false
        },
        coordinate:{
            width:1700,
            height:600,
            axis:{
                color:'#9f9f9f',
                width:[0,0,2,2]
            },
            grids:{
                vertical:{
                    way:'share_alike',
                    value:5
                }
            },
            scale:[{
                position:'left',
                start_scale:0,
                end_scale:100,
                scale_space:10,
                scale_size:2,
                scale_color:'#9f9f9f'
            },{
                position:'bottom',
                labels:labels
            }]
        }
    });

現介紹幾個常用的參數：
1. align
繪主圖區在圖表中的水平對齊位置。(默認為’center’)
2. background_color
組件中背景顏色(填充色)的值。(默認為’FEFEFE’)
3. color
組件中字體顏色的值。(默認為’black’)
4. coordinate
坐標系的配置項
5. crosshair
十字線的配置(默認的enable為false)
6. data
必需屬性,圖表的數據源
7. footnote
腳注的配置項，若給出字符串，則用默認配置進行渲染標題
8. height
圖表的高度，單位px
9. width
圖表的寬度，單位px
10. label
折線圖x坐標軸下方的標簽文本的配置項
11. labels
刻度水平軸的文本標簽集合
12. legend
圖例的配置項
13. point_space
折線點之間的間距，如果為Null則將坐標系有效寬度平分
14. render
圖表渲染的HTML DOM的id。(默認為”)
15. shadow
此組件是否啟用陰影效果。啟用陰影在移動客戶端上可能會引起渲染速度變慢。(默認為false)
16. title
標題的配置項，若給出字符串，則用默認配置進行渲染標題
17. subtitle
副標題的配置項，若給出字符串，則用默認配置進行渲染標題

常用的事件：
1. click
點擊時觸發
2. draw
完成繪圖之後觸發
3. mousemove
鼠標移動時觸發

具體可見：
http://www.ichartjs.com/docs/zh/html/ichart_linebasic2d.html

在曲線圖的繪圖設定完成後，需進行繪圖渲染

line.draw();

將ichartjs的畫圖封裝成一個函數

var drawLineBasic2D = function(projectName, weeks, newBugsNumberArr, closedBugsNumberArr, remainBugsNumberArr){
                   .
                   .
                   .

}

將項目名稱、刻度水平軸的文本標簽數組、數據data數組做為參數傳入函數中

在處理傳入的數據中

var loadReport = function(projectName) {
    $.get('/NextPage/report/data',{projectName: projectName},function(data){
        if(data.statusCode === 500) {
            alert('Wrong Wrong Wrong,please check!!!');
        } else {
            var newBugsNumberArr = [],
                closedBugsNumberArr = [],
                remainBugsNumberArr = [],
                weeks = [],
                length = data.length;
            for(var i = 0; i < length; i++){
                newBugsNumberArr.push(data[i]['newBugsNumber']);
                closedBugsNumberArr.push(data[i]['closedBugsNumber']);
                remainBugsNumberArr.push(data[i]['remainBugsNumber']);
                weeks.push(data[i]['week']);
            }
            drawLineBasic2D(projectName, weeks, newBugsNumberArr, closedBugsNumberArr, remainBugsNumberArr)
        }
    });
};

其中，’/NextPage/report/data’ 在index.js文件中定義

/**
 * 請求數據庫數據
 */
router.get('/NextPage/report/data', function (req, res, next) {
    jiraMysqlQuery.checkProjectBugNumber(req.param('projectName'), function(error, data) {
        if(error) {
            res.send({stateCode: 500});
        }else {
            res.send(data);
        }
    });
});

回調函數，返回變量data讓function(data){} 調用
loadReport函數中的如：
closedBugsNumberArr.push(data[i][‘closedBugsNumber’] 為在Mysql To Charts（三）中讀取到的數據庫的數組的值

loadReport.js文件中

var loadReport = function(projectName) {};

拋出projectName的變量，給其他文件調用