HTML5のキャンバスチャートの例

数日前、私はチャートライブラリを使用しました。次に、Canvasを使用してチャートライブラリを実装します。

1. テキスト描画
2. xyシャフトの描画;
3. データグループ図面。
4. データアニメーションの実現;
5. マウスイベントの治療。

まず、使用法を参照し、いくつかのEchartsの使用を参照し、最初にHTMLタグに渡してチャートを表示してから、initを呼び出してから同時にデータを渡します。

 var con = document.getElementbyid（ 'container'）; '、「2月」、「3月」、「4月」、「5月」、「6月」、「7月」、「8月」、「10月」、「10月」、「10月」、「12月」}、 yaxis：{// y -axis name： 'the of Water'、formatter： '{value} ml'}、series：[// Group Data {name： 'Eastern spipitation'：data：[62,20,17 、45,100,56,19,38,50,120,56,130]}、{name： 'Western spipitation'、data：[52,10,17,60,39,48,70、30,56,8]}、{name ：「南部降水」、データ：[12,10,17,27,39,50,38,100、30、56,90]}、{color： 'hsla（270,80％、60％、1）、'、name ：「北部降水量」、データ：[12,30,17,7,39,49,38、60,56,10]}]}）;

チャートベースクラスでは、後でケーキチャートと折りたたみ図を書く必要があるため、パブリックパートが引き出されます。 canvas.style.widthは、canvas.widthとは異なることに注意してください。ここに書くことは、最初に拡張し、次にそれを減らして、キャンバスがテキストを描くときにぼやける問題を解決することです。

クラスチャート{Constructor（container）{this.container = canvas.createement（ 'canvas'）; this.padding = 50; this.canvas.width = this.height = this.h.width = this.w/2 + 'px'; h/2 + 'px';}}

列を初期化し、object.Assign（this、opt）をES6に呼び出します。これは、JQの拡張メソッドに相当して、属性を現在のインスタンスにコピーします。同時に、TIP属性も構築されました。これはHTMLラベルであり、後でデータ情報を表示します。次に、グラフィックを描き、マウスイベントをバインドします。

クラスバーは、constructor（container）{conterer）; ）this.container.style.tip.createlement（ 'div'）; 000; （）; this.bindevent（）;} draw（）{// draw} showinfo（）{// display information} animate（）{// execute animation} showdata（）{//表示データ}

xyシャフトを描きます

最初にタイトルを描画し、XY軸に従い、次に複雑な計算を含むパケットデータシリーズを渡し、XY軸のスケールを描画し、グループラベルを描画し、最後にデータを描画します。グループデータはデータ項目にあり、これはx軸のxaxis.dataに対応します。各アイテムは、名前と色をカスタマイズできます。ラベルリスト情報もここに記録されています。これは、後続のマウスがクリックしてポイントで使用されているかどうかを判断するためです。

キャンバスの主な知識ポイント：

1. グループラベルはARCTOメソッドを使用して、丸みを帯びた効果を描画できるようにします。
2. 図面テキストでは、測定テキストメソッドを使用します。これは、テキストの幅を測定するために使用できるため、次の描画位置を調整して位置の競合を回避できます。
3. 翻訳変位法は、複雑な位置操作を回避できます。

 draw（）{var this = this、ctx = this.ctx、canvas = this.canvas、w = this.w、h = this.h、padding = this.padding、paddingtop = this.paddingtop、xl = 0 0 xss = 0、xdis = w-padding*2、// x軸ユニット、各ユニットの長さ、x軸yl = 0、ys = 0、ydis = h-padding*2-paddingtop; // y軸ユニット数、各ユニットの長さ、y軸の総長さctx.fillstyle = 'hsla（0,0％、20％、1）'; 、0％、1） '; W、h） && this.yaxis.name）{ctx.filltext（this.yaxis.name、padding+paddingtop-30）;} // x-axis ctx.save（）; h -padding）; moveto（0,0）; .data.data .length）{xs =（w-2*padding）/xl; （x、0）; ctx.save（）; +paddingtop-h）; ; i <this.series.length）{this.series [i]; ; '、70％、60％、1）';} name.name || 40）that.legend.push（{hide：item.hide || false：item.name、color：item.color、x：padding+that.w/4+i*90+tw、y：y ：y：y：y：y：paddingtop+40、h：30、r：5}）; = color; 、26）; = call（item。data.slice（0、xl））;} curr = curl = curlice（0、xl））; }}}};翻訳（パディング、h-padding）; -10、-math.floor（ys *i）; HSLA（0,0％、80％、1） '; stroke（）; textalign = 'right'; '{value}：dim：dim; ）;}}

アニメーションとマウスのスライド後にデータ項目を表示する必要があるため、アニメーションキューAnimatearrに入れます。ここでは、グループデータを展開し、以前の2つのネストされた配列をレイヤーに変換し、名前、x座標、y座標、幅、速度、色などの各データ項目の属性を計算する必要があります。データ組織が完了すると、アニメーションが実行されます。

 showdata（xl、xs、max）{//データvar that = this、ctx = this.ctx、this = this = this.padding*2-this.paddingtop、this.series.filter（s = > s.hide）.length、sp = math.max（math.pow（10-sl、2）/3-4,5）、w =（xs-sp*（sl+1））/sl、h、 H、H、H、H、H、H、H、H、X、Index = 0。 var i = 0、len = this.leng;コントロール; data.slice（0、xl）=> {h = d/max*ydis*j*j+w*index+sp*（index+ 1）that.animatearr.push（{index：i、name：name、num：d、x：math.round（x）、y：1、w：math .round（w）、h：math。 floor（h+2）、vy：math.max（300、math.floor（h*2））/100、color：item.color}）;}）;

アニメーションについては何も言うことはありません。自己実行された閉鎖機能があります。アニメーションの原則は、Y軸の速度値を順番に蓄積することです。ただし、キューが実行されたときにそれを停止することを忘れないでください。そのため、キューが実行されるたびに審査されるIsStopロゴがあります。

 animate（）{var this、ctx = this.ctx、isStop = true;（isStop = true; itee m = that.animaterr [i]; if（ite.y-item.h> = 0.1）{item.y = item.h;} itetmアイテム。

イベント1：マウスの位置がグループラベルにあるかどうかを確認しますこれはデータ項目であり、列の形状を再ドローし、透明度を設定し、区別する必要もあります。また、コンテンツを表示する必要があります。表示部品をshowinfoメソッドにカプセル化します。

イベント2：Mousedownの場合、マウスのグループラベルをクリックし、対応するグループデータシリーズに非表示プロパティを設定します。レンダリング図面とアニメーションの実行。

 bindevent（）{var this、canvas = this.canvas、ctx = this.ctx; ; var box.getBoundingClientRect（） len; ite.save（）; 2倍になった場合、（ctx.ispointinpath（pos.x*2、pos.y*2）{canvas.style.cursor = 'pointer'; break;} canvas.style.cursor = 'default';} if（islegend）; i <len; it = that.animatearr [i]; padding-item.h、item.w、item.h）; +item.x、that.h-that.padding-h、item.h）透明性の透明性（for; ctx.fill（）; canvas.style.cursor = 'pointer'; that.showinfo（pos、it、it） 、項目）。 reastore（）;}、false）; canvas.addeventlistener（ 'mousedown'、function（e）{e.preventdefault（）;; var pos = {x：e.clientx-box.left、y：e.clienty -top}; .w、item.h、item.r）; Hide =！ .yaxis.formation.terplace（ '{value}'、obj.num; <p> '+obj.name+'：+txt+'</p>'; tip.style.left =（pos.x+（box.left-left）+'px'; style.top =（pos.y+（box.top-conop）+10）+'px';

ここで完了するのは、実際には、応答サポート、モバイルサポート、マルチ軸サポート、ディスプレイコンテンツ効果、折りたたみ機能のサポートなど、さらに最適化される場所がたくさんあります。

上記は、この記事のすべての内容です。