نمودار دایره ای

این تاپیک 17 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  سعید ،‏ 1 سال و 3 ماه پیش .

این تاپیک تاکنون 857 بازدید داشته است .

نویسنده پست
دوشنبه ، 31 آگوست 2015     10:13 ق.ظ #


سعید

Subscriber
161 پست35 تاپیک

سلام

چطوری می تونم با css ویا جاوا اسکریپت،این نمودار رو بسازم؟

http://cafe-beroz.ir/Capture.PNG?v=0

 

1  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
دوشنبه ، 31 آگوست 2015     10:42 ق.ظ #


reza____ebliser

Subscriber
568 پست67 تاپیک

سلام سعید جان

اگر سی اس اس بخوای این یک نمونه خیلی خوب و عالی هستش که میتونی ازش استفاده کنی

http://codepen.io/clintioo/pen/ouxGp

 

 

css و js بخوای نمونه زیاده

http://codepen.io/drewworthey/pen/dDHvu

http://codepen.io/rupok/pen/OPBxVB

http://codepen.io/robotballoon/pen/Mwaoxe

http://codepen.io/14islands/pen/pvLqNE

http://codepen.io/elchiconube/pen/xbxPKZ

http://codepen.io/githiro/pen/ICfFE

1  تشکر
دوشنبه ، 31 آگوست 2015     10:53 ق.ظ #


سعید

Subscriber
161 پست35 تاپیک

اونا یا حجمشون خیلی زیاده یا خوب نیستن

مثل اون عکس نیس؟

1  تشکر
دوشنبه ، 31 آگوست 2015     11:03 ق.ظ #


reza____ebliser

Subscriber
568 پست67 تاپیک

http://codepen.io/drewworthey/pen/dDHvu

 

حجمش 6 کیلوبایت هست

وقتی شما همه رو جذف کنی به غیر از اوی که میخوای حجمش میشه 2 کیلوبایت

 

واقعا زیاده ؟

1  تشکر
دوشنبه ، 31 آگوست 2015     11:07 ق.ظ #


reza____ebliser

Subscriber
568 پست67 تاپیک

اینا رو شما نگاه کن

پیوست ها:
You must be logged in to view attached files.
1  تشکر
دوشنبه ، 31 آگوست 2015     11:28 ق.ظ #


C E

Subscriber
1 پست0 تاپیک

سلام

ببخشید وسط بحثتون

من میخواهم فایل اخر صفحه که نوشته برای دانلود تم ها اینجا کلیل نید رو بردارم نمیشه

چرا

 

http://www.7learn.com/miscellaneous/add-tabber-menu-to-web-page?back=1

0  تشکر
دوشنبه ، 31 آگوست 2015     11:41 ق.ظ #


سعید

Subscriber
161 پست35 تاپیک

تو این کد:

<style>
body {background:#333;font-family: tahoma;}
#canvas {display:block;width:300px;margin:auto;}
</style>

<canvas id="canvas" width="300" height="300">

<script>
(function () {
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = canvas.width;
var H = canvas.height;
var difference = 0;
var degrees = 0;
var new_degrees;
var fgcolor = "#f27070";
var bgcolor = "#e6e6e6";
var text;
var animation_loop, redraw_loop;

function init() {
ctx.clearRect(0, 0, W, H);
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 15;
ctx.arc(W/2, H/2, 100, 0, 2 * Math.PI, false); // draws the arc
ctx.stroke();

var radians = degrees * Math.PI / 180;
var shiftToTop = Math.PI / 2; // start graph at top
ctx.beginPath();
ctx.strokeStyle = fgcolor;
ctx.lineWidth = 15;
ctx.arc(W/2, H/2, 100, 0 - shiftToTop, radians - shiftToTop, false);
ctx.stroke();

ctx.fillStyle = fgcolor;
ctx.font = '0px Helvetica LT Condensed';
text = Math.floor(degrees/360 * 100) + '%';
var text_width = ctx.measureText(text).width;
ctx.fillText(
text, W/2 - text_width/2, H/2 + 15
);
}

function draw() {
if(typeof animation_loop !== undefined) { clearInterval(animation_loop); }
new_degrees = Math.round(.2 * 360);
difference = new_degrees - degrees;
animation_loop = setInterval(animate_to, 1000/difference);
}

function animate_to() {
if (degrees < new_degrees) {
degrees += 1;
}
else {
degrees -= 1;
}

if (degrees === new_degrees) {
clearInterval(animation_loop);
}
init();
}

draw();
redraw_loop = setInterval(draw, 100); // draw a new chart every 2 seconds
}
}());
</script>

چیکار کنم که اون خط قرمز رنگ،حاشیه هاش گرد بشه و درجش رو بشه تو تگ canvas ،تنظیم کرد؟

0  تشکر
دوشنبه ، 31 آگوست 2015     11:50 ق.ظ # پاسخ تائید شده توسط سوال کننده


reza____ebliser

Subscriber
568 پست67 تاپیک

new_degrees = Math.round(1 * 360);

 

این یک دایره کامل هست

 

new_degrees = Math.round(0.5 * 360);

 

این نصف دایره

 

new_degrees = Math.round(0.2 * 360);

مقدار پیشفرض 20 درصد دایره هست

0  تشکر
دوشنبه ، 31 آگوست 2015     11:55 ق.ظ #


سعید

Subscriber
161 پست35 تاپیک

نه اونو می دونم

من میگم که تو تگ  canvas ،بشه درجش رو تنظیم کرد،مثلا:
<canvas id="canvas" width="400" height="400" time=".5">

اون time ،درجش رو کنترل کنه

می تونین کدش رو بسازین؟

0  تشکر
دوشنبه ، 31 آگوست 2015     12:22 ب.ظ #


سعید

Subscriber
161 پست35 تاپیک

ول کن

0  تشکر
پست 1 تا 10 (از مجموع 18 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .