iChart--組件定制

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

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

導(dǎo)語(yǔ)

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

No1.一分鐘快速入門(mén)教程-Hello World

千里之行，始于足下。我們先從Hello World開(kāi)始。

首先引入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è)置開(kāi)始刻度為0
                end_scale:26,//設(shè)置結(jié)束刻度為26
                scale_space:2,//設(shè)置刻度間距
                listeners:{//配置事件
                    parseText:function(t,x,y){//設(shè)置解析值軸文本
                        return {text:t+" cm"}
                    }
                }
            }]
        }

運(yùn)行結(jié)果

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

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

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

再有：

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

字符串圖形

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

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

這里就是最終繪制的入口，可見(jiàn)源碼中僅僅可以繪制矩形，好單一的感覺(jué)。
修改后的這個(gè)的入口：

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"，程序會(huì)調(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，其次繪制傳入的文字，這樣我們的貨幣匯率表就很容易實(shí)現(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)類似，不再陳述。多看看一些效果圖吧：

GPU云服務(wù)器云服務(wù)器 iChart 組件和組件通信定制視頻定制域名

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82026.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

vvpale

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

CloudCone：$17.99/年KVM-1GB/50GB/1TB/洛杉磯MC機(jī)房

閱讀 1280·2021-10-14 09:50
vue中props的雙向綁定

閱讀 1580·2019-08-30 15:54
輕松實(shí)現(xiàn)固定比例的塊級(jí)容器

閱讀 1040·2019-08-30 11:22
實(shí)現(xiàn)點(diǎn)擊按鈕后CSS加載效果

閱讀 2934·2019-08-30 10:50
Web真相: CSS不是真正的編程 | Christian Heilmann

閱讀 1817·2019-08-29 18:39
CSS選擇器

閱讀 3067·2019-08-29 13:07
云適配開(kāi)放平臺(tái)內(nèi)測(cè)“挑刺有獎(jiǎng)” ：贏土豪金

閱讀 2090·2019-08-28 17:54
JavaScript學(xué)習(xí)筆記（運(yùn)算符）

閱讀 761·2019-08-26 17:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

iChart--組件定制

相關(guān)文章

iChart--地圖顯示人口統(tǒng)計(jì)

常用的數(shù)據(jù)可視化工具

# Web Components 全攬

UXCore：一個(gè)兼容主流瀏覽器的 React PC 組件庫(kù)

字節(jié)跳動(dòng)旗下 ArcoDesign 開(kāi)源啦

發(fā)表評(píng)論

0條評(píng)論

vvpale

男|高級(jí)講師

TA的文章

CloudCone：$17.99/年KVM-1GB/50GB/1TB/洛杉磯MC機(jī)房

vue中props的雙向綁定

輕松實(shí)現(xiàn)固定比例的塊級(jí)容器

實(shí)現(xiàn)點(diǎn)擊按鈕后CSS加載效果

Web真相: CSS不是真正的編程 | Christian Heilmann

CSS選擇器

云適配開(kāi)放平臺(tái)內(nèi)測(cè)“挑刺有獎(jiǎng)” ：贏土豪金

JavaScript學(xué)習(xí)筆記（運(yùn)算符）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

iChart--組件定制

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！