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 日常管理コマンドの概要 (必読)
推薦する
クロスブラウザの問題に対する 5 つの解決策 (要約)
簡単なレビュー: ブラウザの互換性の問題は、しばしば頭痛の種となります。ここでは、これらの問題を回避...
Vue Element フロントエンドアプリケーション開発: Vuex での API ストアビューの使用
目次概要1. フロントエンドとバックエンドの分離とWeb APIの優先ルート設計2. Axiosネッ...
Vueアイコンセレクターのサンプルコード
出典: http://www.ruoyi.vip/ 'vue' から Vue をイン...
Vue ログインページ用の動的パーティクル背景プラグインの実装
目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...
動的なデジタル時計を実装するJavaScript
この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...
Vueコンポーネント間のデータ共有の詳細な説明
目次1. プロジェクト開発において、コンポーネント間の最も一般的な関係は次の 2 つのタイプに分けら...
HTMLテーブルではテーブルの外側の境界線のみが表示されます
質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...
Linux環境で環境変数を設定する方法
JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...
Vueはユーザーログイン切り替えを実装します
この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...
ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
jQuery は呼吸カルーセルを実装します
この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...
WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する
エラーを報告するApache\Nginx サービスは正常に起動しましたが、MySQL は起動に失敗し...
MySQLチュートリアルではストアドプロシージャを徹底的に理解します
目次1. ストアドプロシージャに関連する概念2. ストアドプロシージャの使用1) ストアドプロシージ...
MySQLでTEXT/BLOB型を使用する際の注意点を詳しく説明します
1. TEXTとBLOBの違いTEXT ファミリと BLOB ファミリの唯一の違いは、BLOB 型は...
React 国際化 react-i18next の詳細な説明
導入react-i18next は、 i18nextをベースにした強力な国際化フレームワークです。 ...