Canvas を js のプラグインにカプセル化する方法

今回は、jsCanvasをプラグインにカプセル化する方法を説明します。jsでCanvasをプラグインにカプセル化する際の注意事項を実際に見てみましょう。

以前、キャンバス上に統計グラフを描画するためのプラグインを書きたいと言いましたが、今それを書きました

最初に実装された機能について話しましょう:

1. X軸座標属性とY軸座標属性をカスタマイズすることで、比例した統計グラフを描画できます

2. 割引チャート、縦棒チャート、またはその両方を描画することを選択できます

3. 割引色、座標色、列色、キャンバス枠線色を自由に定義できます

もちろん枠線の有無も選択可能です。 4. 縦棒グラフと割引グラフのアニメーションを実装するかどうかを選択できます

実装プロセス

座標を描く - 矢印を描く - X軸とY軸をマークする - 縦棒グラフを描く - 割引グラフを描く

早速、コードを見てみましょう

(function(window,document){
 var ChartDraws = function(options){
  if(!(this instanceof ChartDraws))return new ChartDraws(options);
  this.options = $.extend({
   //报表所需的参数
   "containerId" : "",  //canvas所在容器id
   "canvasWidth" : 400,
   "canvasHeight" : 300,
   "paddingLeft" : 20,
   "paddingTop" : 20,
   "columnChartData" :[], //柱形图的数量和对应得名称以及百分比
   "yChartData" :[],   //y轴的数量及名称
   "axisColor" : "white",  //坐标轴颜色
   "columnChartColor" : "#EEE685", //柱形图颜色
   "isNeedAnimation" : true, //是否需要动画
   "isNeedLineChart" : true, //是否需要折线图
   "isNeedColumnChart" : true, //是否需要柱形图
   "lineChartColor" : "#90EE90", //折线图颜色，当isNeedLineChart=true时有效
   "isNeedBorder" : false,  //canvas是否需要外边框
   "borderColor" : "white"  //外边框颜色
  },options);
  if(this.options.canvasWidth2)
   {
    for(var i=1;i<point.length><p style="text-align: left;">
以下に、requestAnimationFrame ブラウザ互換性を実装する別のものがあります</p><pre class="brush:php;toolbar:false">(function(){
 var lastTime = 0;
 var prefixes = ['ms','webkit','o','moz']; //各浏览器前缀
 var requestAnimationFrame = window.requestAnimationFrame;
 var cancelAnimationFrame = window.cancelAnimationFrame;
 var prefix;
 //通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
 for( var i = 0; i <p style="text-align: left;">
添付された  </p><pre class="brush:php;toolbar:false">ChartDraws({
  "containerId" : "chart1",  //canvas所在容器id
  "canvasWidth" : 1000,
  "canvasHeight" : 250,
  "paddingLeft" : 50,
  "paddingTop" : 50,
  "columnChartData": [
   {NO:0,PT:0.2,Name:"Html/Css"},
   {NO:1,PT:0.4,Name:"Html5/Css3"},
   {NO:2,PT:0.4,Name:"JavaScript"},
   {NO:3,PT:0.5,Name:"JQuery"},
   {NO:4,PT:0.2,Name:"Angular.js"},
   {NO:5,PT:0.8,Name:"BootStrap"},
   {NO:6,PT:0.6,Name:"React.js"},
   {NO:7,PT:0.5,Name:"Java"}
  ],
  "yChartData" : [
   {NO:0,Name:"熟悉"},
   {NO:1,Name:"掌握"},
   {NO:2,Name:"精通"}
  ],
  "isNeedAnimation" : false,
  "isNeedBorder" : false,
  "isNeedLineChart":true,
  "axisColor" : "#8DEEEE"
 });
 ChartDraws({
  "containerId" : "chart2",  //canvas所在容器id
  "canvasWidth" : 1000,
  "canvasHeight" : 250,
  "paddingLeft" : 50,
  "paddingTop" : 50,
  "columnChartData": [
   {NO:0,PT:0.4,Name:"Html/Css"},
   {NO:1,PT:0.5,Name:"Html5/Css3"},
   {NO:2,PT:0.2,Name:"JavaScript"},
   {NO:3,PT:0.7,Name:"JQuery"},
   {NO:4,PT:0.2,Name:"Angular.js"},
   {NO:5,PT:0.3,Name:"BootStrap"},
   {NO:6,PT:0.8,Name:"React.js"},
   {NO:7,PT:0.2,Name:"Java"}
  ],
  "yChartData" : [
   {NO:0,Name:"熟悉"},
   {NO:1,Name:"掌握"},
   {NO:2,Name:"精通"}
  ],
  "isNeedAnimation" : false,
  "isNeedBorder" : false,
  "isNeedLineChart":false,
  "isNeedColumnChart" : true,
  "columnChartColor":"#9370DB"
 });
 ChartDraws({
  "containerId" : "chart3",  //canvas所在容器id
  "canvasWidth" : 1000,
  "canvasHeight" : 250,
  "paddingLeft" : 50,
  "paddingTop" : 50,
  "columnChartData": [
   {NO:0,PT:0.4,Name:"Html/Css"},
   {NO:1,PT:0.5,Name:"Html5/Css3"},
   {NO:2,PT:0.2,Name:"JavaScript"},
   {NO:3,PT:0.7,Name:"JQuery"},
   {NO:4,PT:0.2,Name:"Angular.js"},
   {NO:5,PT:0.3,Name:"BootStrap"},
   {NO:6,PT:0.8,Name:"React.js"},
   {NO:7,PT:0.2,Name:"Java"}
  ],
  "yChartData" : [
   {NO:0,Name:"熟悉"},
   {NO:1,Name:"掌握"},
   {NO:2,Name:"精通"}
  ],
  "isNeedAnimation" : false,
  "isNeedBorder" : true,
  "isNeedLineChart":true,
  "isNeedColumnChart" : false,
  "lineChartColor" : "#8DB6CD",
  "borderColor" : "#87CEFA"
 })

html コード

<p>
 </p><p></p>
 <p></p>
 <p></p>
 

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue proxyTable がインターフェイスのクロスドメインリクエストのデバッグを実装する方法

Node.js で mongodb データベースを操作する方法

以上がCanvas を js のプラグインにカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。