iChart--組件定制

vvpale 發(fā)布于2019-08-20 15:08 / 2494人閱讀

摘要：使用純語言利用的標(biāo)簽繪制各式圖形。致力于為您的應(yīng)用提供簡單直觀可交互的體驗級圖表組件。目前支持餅圖環(huán)形圖折線圖面積圖柱形圖條形圖。是基于協(xié)議的開源項目。陰影圖形效果圖其他形狀的圖標(biāo)類似，不再陳述。

導(dǎo)語

ichartjs是一款基于HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標(biāo)簽繪制各式圖形。 ichartjs致力于為您的應(yīng)用提供簡單、直觀、可交互的體驗級圖表組件。是WEB/APP圖表展示方面的解決方案。如果你正在開發(fā)HTML5的應(yīng)用，ichartjs正好適合您。 ichartjs目前支持餅圖、環(huán)形圖、折線圖、面積圖、柱形圖、條形圖。ichartjs是基于Apache License 2.0協(xié)議的開源項目。

No1.一分鐘快速入門教程-Hello World

千里之行，始于足下。我們先從Hello World開始。

首先引入js文件

代碼片段

//定義數(shù)據(jù)
$(function(){   
            var chart = new iChart.Column2D({
            render : "canvasDiv",//渲染的Dom目標(biāo),canvasDiv為Dom的ID
            data: data,//綁定數(shù)據(jù)
            title : "Hello World"s Height In Alphabet",//設(shè)置標(biāo)題
            width : 800,//設(shè)置寬度，默認(rèn)單位為px
            height : 400,//設(shè)置高度，默認(rèn)單位為px
            shadow:true,//激活陰影
            shadow_color:"#c7c7c7",//設(shè)置陰影顏色
            coordinate:{//配置自定義坐標(biāo)軸
            scale:[{//配置自定義值軸
                position:"left",//配置左值軸 
                start_scale:0,//設(shè)置開始刻度為0
                end_scale:26,//設(shè)置結(jié)束刻度為26
                scale_space:2,//設(shè)置刻度間距
                listeners:{//配置事件
                    parseText:function(t,x,y){//設(shè)置解析值軸文本
                        return {text:t+" cm"}
                    }
                }
            }]
        }

運行結(jié)果

至此，簡單的入門已經(jīng)完成，但是不能僅限于此，拓展下思路，如果柱狀圖不僅僅是單色填充，而是各式各樣的圖形，或者具有漸變效果的填充，該如何實現(xiàn)呢？

No2.定制屬于自己的柱狀圖

首先看看我想實現(xiàn)的效果

再有：

查閱了ichart官方的demo和文檔，未看到這方面的效果，只能自己動手，豐衣足食了。

字符串圖形

首先實現(xiàn)一個相對簡單的，繪制各種字符串。由于ichart底層是基于canvas的，所以只要拿到畫筆，想畫什么畫什么，想畫哪里畫哪里。
首先運行上面的HelloWorld，單步調(diào)試，找到最終繪制的入口。

doDraw:function(_){
    if(_.get("actived")){
        _.drawRectangle();
    }
},

這里就是最終繪制的入口，可見源碼中僅僅可以繪制矩形，好單一的感覺。
修改后的這個的入口：

doDraw:function(_){
    if(_.get("actived")){
      var _ = this._();
      var type = _.options.type;
      if(type === "slash"){
        _.drawSlash();
      }else if(type === "innerRect"){
        _.drawInnerRect();
      }else if(type === "wire"){
        _.drawWire();
      }else if(type === "star"){
        _.drawStar();
      }else if(type === "exclamation"){
        _.drawExclamation();
      }else if(type ==="innerRectAndLine"){
        _.drawInnerRectAndLine();
      }else if(type === "judge"){
        _.drawJudge();  
      }else{
        _.drawRectangle();
      }
    }
  },

默認(rèn)依然繪制矩形，但是根據(jù)傳入的類別，可以繪制圖形的圖形，如type==="exclamation"，程序會調(diào)用_.drawExclamation();方法，我們看看drawExclamation()方法的定義：

drawExclamation: function() {                                                  
   var _ = this._();
   var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get("border"), f_color=_.get("f_color"), shadow=_.get("shadow");
   _.T.box(
    _.get(_.X),
    _.get(_.Y),
    _.get(_.W),
    _.get(_.H),
    _.get("border"),
    _.get("f_color"),
    _.get("shadow"));
   var character = _.options.character && _.options.character.value;
   _.T.textStyle(_.L, "middle", $.getFont(_.get("fontweight"), _.get("fontsize"), _.get("font")));
   _.T.fillText(character, x + w/2 - _.T.measureText(character)/2, y+h/2, _.get("textwidth"), border.color);
 },

代碼中顯示，首先繪制矩形Box，其次繪制傳入的文字，這樣我們的貨幣匯率表就很容易實現(xiàn)了。

陰影圖形

drawSlash: function(){
    var _ = this._();
    var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get("border"), f_color=_.get("f_color"), shadow=_.get("shadow");
    _.T.box(
      _.get(_.X),
      _.get(_.Y),
      _.get(_.W),
      _.get(_.H),
      _.get("border"),
      _.get("f_color"),
      _.get("shadow"));
    var difcount = 9;
    var a = h/w, dx = parseInt(w/difcount), dy = dx * a;
    for(var i = x + dx;i<= x+w; i+=dx){
      var x0 = i - border.width,y0 = y + border.width;
      var x1 = x + border.width, y1 = y + dy * (i-x)/dx - border.width;
      _.T.line(x0,y0,x1,y1, border.width, border.color, false);
      if(i !== x){
        var x0 = i - border.width,y0 = y + h - border.width;
        var x1 = x + w - border.width, y1 = y + dy * (i-x)/dx - border.width;
        _.T.line(x0,y0,x1,y1, border.width, border.color, false);
      }
    }
  },

效果圖：

其他形狀的圖標(biāo)類似，不再陳述。多看看一些效果圖吧：