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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: 実用的な基本的な Linux sed コマンドのサンプルコード
>>: MySQL での mysqladmin 日常管理コマンドの概要 (必読)
推薦する
MySQL の単一テーブル クエリ操作例の詳細な説明 [構文、制約、グループ化、集計、フィルタリング、並べ替えなど]
この記事では、MySQL の単一テーブル クエリ操作について説明します。ご参考までに、詳細は以下の通...
Centos7でmysql5.7.19のデータ保存場所を移動する方法
シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...
jsはキャンバスに基づいて時計コンポーネントを実装します
圧縮アップロード画像、スクラッチカード、ポスター作成、チャートプラグインなど、フロントエンド開発にお...
Windows Apache 環境で SSL 証明書を展開して、Web サイトを https 対応にする方法
SSL 証明書の使用についてはここでは説明しません。SSL 証明書を導入する必要がある友人は、すでに...
MySQL 最適化のケーススタディ
1. 背景Youzan の各 OLTP データベース インスタンスには、実行時間が特定のしきい値を超...
フロントエンドでよく使われるjs関数メソッド
目次1. メール2. 携帯電話番号3. 電話番号4. URLアドレスですか? 5. 文字列ですか? ...
MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法
0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...
静的リソースファイルのアクセスログをフィルタリングするNginxの実装
乱雑なログ日常的に使用される Nginx は、静的リソース サーバーとリバース プロキシ サーバーの...
Vue.js ディレクティブのカスタム命令の詳細な説明
デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...
この記事では、MySQLのマスタースレーブ同期の原理を説明します。
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
Mysql5.7 以降での ONLY_FULL_GROUP_BY エラーの解決方法
最近、開発プロセス中に、プロジェクト開発環境に接続されている MySQL データベースは Aliba...
ログインと登録機能を実現するjs
この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...
Webpackを使用して複数ページのプログラムを構築するための実装手順
webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発で...
nginx の http リクエスト処理の各段階の詳細な分析
nginx の HTTP モジュールを作成する場合、リクエスト開始時のアクセス許可の有無、コンテンツ...
Vue スクロールダウンしてさらにデータを読み込む スクロールケースの詳細な説明
vue-無限スクロールインストール npm インストール vue-infinite-scroll -...