JavaScript 円グラフの例

JavaScript 円グラフの例

描画効果

実装コード

JavaScript

var キャンバス = document.getElementById("mycanvas");
var w = window.innerWidth;
var h = window.innerHeight;
キャンバスの高さ = 1000;
キャンバスの幅 = 1400;
var ctx = canvas.getContext('2d');

var ポップ可能 = true;

var スライス = [];

関数 shadeColor(色, パーセント) {
 var f = parseInt(color.slice(1), 16)、
  t = パーセント < 0 ? 0 : 255、
  p = パーセント < 0 ? パーセント * -1 : パーセント、
  R = f >> 16、
  G = f >> 8 & 0x00FF、
  B = f & 0x0000FF;
 戻り値 "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
}

関数 pieSlice(oX, oY, r, pos, len, col, data) {
 this.data = データ
 this.originX = oX;
 this.originY = oY;
 半径rを設定します。
 this.startingRadian = pos;
 長さ = len;
 this.color = col;
 this.highlightedColor = shadeColor(this.color, .6);
 this.highlighted = false;
 this.popped = false;
 this.animationFrame = 0;

 関数setColor(c) {
  色を反転します。
 }
}

pieSlice.prototype.displayData = function(){
 ctx.fillStyle = this.color;
 ctx.fillRect(this.originX - this.radius - 40, this.originY - this.radius - 35, 25, 25);
 ctx.fillStyle = "白";
 ctx.font = "15px Arial";
 ctx.fillText(this.data、this.originX - this.radius - 10、this.originY - this.radius - 18);
}

pieSlice.prototype.render = 関数() {
 if (!this.highlighted) {
  ctx.fillStyle = this.color;
  ctx.strokeStyle = this.color;
 } それ以外 {
  if (!this.popped && poppable) {
   表示データ
  }
  // ctx.fillStyle = this.color;
  ctx.fillStyle = this.highlightedColor;
  ctx.strokeStyle = this.color;
 }
 ctx.beginPath();
 var xOffset = Math.cos(this.length / 2 + this.startingRadian) * this.animationFrame;
 var yOffset = Math.sin(this.length / 2 + this.startingRadian) * this.animationFrame;
 ctx.moveTo(this.originX + xOffset、this.originY + yOffset);
 var x = this.originX + xOffset + this.radius * Math.cos(this.startingRadian);
 var y = this.originY + yOffset + this.radius * Math.sin(this.startingRadian);
 ctx.lineTo(x, y);
 ctx.arc(this.originX + xOffset、this.originY + yOffset、this.radius、this.startingRadian、this.startingRadian + this.length);
 if (this.popped) {
  var fill = ctx.fillStyle;
  表示データ
  ctx.fillStyle = 塗りつぶし;
  （this.animationFrame < 30）の場合{
   this.animationFrame += 2;
  }
 } それ以外 {
  （this.animationFrame > 0）の場合{
   this.animationFrame -= 2;
  }
 }
 ctx.closePath();
 //ctx.stroke();
 //if(this.highlighted) {
 ctx.fill();
 // }
}

pieSlice.prototype.update = 関数() {

}

関数 pieChart(s) {
 this.slices = s;
}
pieChart.prototype.render = 関数() {
 this.slices.forEach(関数(p) {
  p.render();
 });
};

pieChart.prototype.update = 関数() {
  this.slices.forEach(関数(p) {
   p.update();
  });

 }
 //パイワン
var pie = new pieSlice(700, 170, 125, 0, Math.PI / 4, "#FFD1DC", 12);
var slice2 = new pieSlice(700, 170, 125, Math.PI / 4, Math.PI / 4, "#08E8DE");
var slice3 = new pieSlice(700, 170, 125, Math.PI / 2, Math.PI / 4, "#6699CC");
var slice4 = new pieSlice(700, 170, 125, 3 * Math.PI / 4, Math.PI, "#ADD8E6");
var slice5 = new pieSlice(700, 170, 125, 7 * Math.PI / 4, Math.PI / 4, "#B19CD9");
var スライス1 = [円グラフ、スライス2、スライス3、スライス4、スライス5];

var pink = new pieSlice(220, 170, 125, 0, Math.PI / 3, "#FF4B4B");
var orange = new pieSlice(220, 170, 125, Math.PI / 3, Math.PI / 3, "#FF931B");
var yellow = new pieSlice(220, 170, 125, 2 * Math.PI / 3, Math.PI / 3, "#FFE21B");
var green = new pieSlice(220, 170, 125, 3 * Math.PI / 3, Math.PI / 3, "#90E64E");
var blue = new pieSlice(220, 170, 125, 4 * Math.PI / 3, Math.PI / 3, "#6097D9");
var purple = new pieSlice(220, 170, 125, 5 * Math.PI / 3, Math.PI / 3, "#8365DD");

var redd = new pieSlice(1180, 170, 125, 0, 2 * Math.PI / 3, "#B3989B");
var orangee = new pieSlice(1180, 170, 125, 2 * Math.PI / 3, 1 * Math.PI / 8, "#C1AEE0");
var bluee = new pieSlice(1180, 170, 125, 19 * Math.PI / 24, 4 * Math.PI / 24, "#928CE9");
var greenn = new pieSlice(1180, 170, 125, 23 * Math.PI/24, 3* Math.PI/8, "#676675");
var purplee = new pieSlice(1180, 170, 125, 4 * Math.PI/3, 3* Math.PI/8, "#947D59");
var ceci = new pieSlice(1180, 170, 125, 41 * Math.PI/24, 7*Math.PI/24, "#D994E0");

var slices3 = [redd, orangee, bluee, greenn, purplee, ceci];

var slices2 = [ピンク、オレンジ、黄色、緑、青、紫];
var pie1 = 新しい pieChart(slices1);
var pie2 = 新しい pieChart(slices2);
var pie3 = 新しい pieChart(slices3);
var update = 関数() {
 pie1.更新();
}
var レンダリング = 関数() {
 ctx.clearRect(0, 0, キャンバス.幅, キャンバス.高さ);
 pie1.レンダリング();
 pie2.レンダリング();
 pie3.レンダリング();
}

var ステップ = 関数() {
 アップデート（）;
 与える（）;
 アニメーション化(ステップ);
}

var animate = window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 関数(コールバック) {
  window.setTimeout(コールバック、1000 / 60);
 };

スライスをプッシュして適用します(スライス、スライス1)。
スライスをプッシュして適用します(スライス、スライス2)。
スライスをプッシュして適用します(スライス、スライス3)。

canvas.addEventListener("mousemove", 関数(e) {
 var x = e.clientX;
 var y = e.clientY;
 スライス.forEach(関数(スライス) {
  ctx.beginPath();
  var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  ctx.moveTo(スライス.originX + xOffset、スライス.originY + yOffset);
  var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian);
  var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian);
  ctx.lineTo(xx, yy);
  ctx.arc(slice.originX + xOffset、slice.originY + yOffset、slice.radius、slice.startingRadian、slice.startingRadian + slice.length);
  ctx.isPointInPath(x, y) の場合 {
   スライスのハイライト = true;
   スライスの表示データ();
  } それ以外 {
   スライスのハイライト = false;
  }
  ctx.closePath();

 });
});

canvas.addEventListener("クリック", function(e) {
 var x = e.clientX;
 var y = e.clientY;
 スライス.forEach(関数(スライス) {
  ctx.beginPath();
  var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  ctx.moveTo(スライス.originX + xOffset、スライス.originY + yOffset);
  var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian);
  var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian);
  ctx.lineTo(xx, yy);
  ctx.arc(slice.originX + xOffset、slice.originY + yOffset、slice.radius、slice.startingRadian、slice.startingRadian + slice.length);
  ctx.isPointInPath(x, y) の場合 {
   if (スライスがポップされる) {
    スライスがポップされる = false;
    ポップ可能 = true;
   } それ以外 {
    if(ポップ可能){
      スライスをポップすると true になります。
     ポップ可能 = false;
    }
   }
   スライスのハイライト = false;
  }
  ctx.closePath();

 });
});

//ループを開始
アニメーション化(ステップ);

html

<キャンバスid="mycanvas"></キャンバス>

上記は、JavaScript で円グラフを描画する例の詳細です。JavaScript で円グラフを描画する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • extjsグラフィック描画の円グラフ実装方法の分析
  • Baidu ECharts プラグインを使用して JavaScript で円グラフを描画する例
  • 円グラフを動的に描画する JS+canvas メソッドの例
  • データベースからデータを読み取り、3D 円グラフに統合して JSP で表示します。
  • Javascript Highcharts 円グラフで数量とパーセンテージを表示するサンプルコード
  • html+js+highcharts で円グラフを描く簡単な例
  • js を使用して円グラフを描く
  • javascript ベクター チャート ライブラリ - gRaphael 数行のコードで、美しい棒グラフ、円グラフ、ドット チャート、曲線グラフを作成できます。
  • JSPを使用して円グラフを簡単に生成する

<<:  実用的な基本的な Linux sed コマンドのサンプルコード

>>:  MySQL での mysqladmin 日常管理コマンドの概要 (必読)

推薦する

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

純粋な CSS ヘッダーの実装コードを修正

純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...

React 星評価コンポーネントの実装

要件は、製品の評価データを渡すことであり、ページには対応する星の数が表示されます。 1. 異なる評価...

Linuxでシンボリックリンクを削除（削除）するコマンド

Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...

Ubuntu 16.04/18.04 に Pycharm と Ipython をインストールするチュートリアル

Ubuntu 18.04の場合1. sudo apt install python 。コマンドライン...

MySQLパラダイムの使用に関する詳細な説明

1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...

TypeScript インターフェース定義ケースチュートリアル

インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...

Nginx 仮想ホスト (IP ベース) を構成する 3 つの方法の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

DeepinでPyenvをインストールする手順

序文これまでは、/bin/ ディレクトリのソフトリンクを変更して Python のバージョンを切り替...

IntelliJ IDEA で Java を使用して MySQL データベースに接続する方法の詳細な説明

1. MySQLデータベースをダウンロードし、インストールして設定するダウンロードアドレス: htt...

MySql はデータを正常に挿入しますが、[Err] 1055 エラーが報告されます。解決策

1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...