تجسم: نمودار پای (نسخه قدیمی)

منسوخ

این تجسم با نسخه جدید جایگزین شده است. لطفا به جای آن از آن استفاده کنید. برای مهاجرت آسان، لطفاً به صفحه یادداشت‌های انتشار مراجعه کنید.

  1. بررسی اجمالی
  2. مثال
  3. بارگذاری
  4. فرمت داده ها
  5. گزینه های پیکربندی
  6. مواد و روش ها
  7. مناسبت ها
  8. سیاست داده

بررسی اجمالی

نمودار دایره‌ای که در مرورگر با استفاده از SVG یا VML ارائه می‌شود. هنگام کلیک کردن روی برش ها نکاتی را نشان می دهد. هنگام کلیک کردن بر روی نوشته های افسانه، برش ها را متحرک می کند.

توسط: گوگل

مثال

خودتان آن را در زمین بازی تجسم کد کنید

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

بارگذاری

نام بسته google.load "piechart" است

  google.load("visualization", "1", {packages: ["piechart"]});

نام کلاس تجسم google.visualization.PieChart است

  var visualization = new google.visualization.PieChart(container);

فرمت داده ها

دو ستون. ستون اول باید یک رشته باشد و حاوی برچسب برش باشد. ستون دوم باید یک عدد باشد و حاوی مقدار برش باشد.

گزینه های پیکربندی

نام تایپ کنید پیش فرض شرح
رنگ پس زمینه رشته یا Object رنگ پیش فرض رنگ پس زمینه برای ناحیه اصلی نمودار. یکی از گزینه های زیر:
  • رشته ای با رنگی که توسط HTML پشتیبانی می شود، به عنوان مثال «قرمز» یا «#00cc00» یا
  • شرح یک شی با ویژگی های زیر:
    • stroke - یک رشته رنگی HTML که رنگ حاشیه نمودار را توصیف می کند.
    • fill - یک رشته رنگ HTML که رنگ پس زمینه نمودار را توصیف می کند.
    • strokeSize - عددی که ضخامت حاشیه نمودار را بر حسب پیکسل توصیف می کند. بدون حاشیه، می توان این را روی 0 تنظیم کرد.
      مثال : {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} .
رنگ لبه رشته یا Object رنگ پیش فرض حاشیه اطراف عناصر نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
رنگ ها آرایه ای از رشته ها یا اشیاء رنگ های پیش فرض

آرایه ای از رنگ ها، که در آن هر عنصر رنگ یک سری را مشخص می کند. برای هر سری باید یک عنصر آرایه را مشخص کنید.

  • اگر is3D=false ، این آرایه ای از رنگ های HTML است. مثال: رنگ‌ها:['#00FF00','narange']
  • اگر is3D=true ، این آرایه ای از رنگ های HTML یا اشیایی از این نوع است: {color: face_color , darker: shade_color } که در آن color رنگ چهره عنصر است و darker رنگ سایه است. با این حال، اگر یک رنگ HTML برای یک شی 3 بعدی مشخص کنید، چهره و سایه یک رنگ خواهند بود و جلوه 3 بعدی کاهش می یابد. مثال: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip بولی درست است، واقعی اگر روی درست تنظیم شود، وقتی کاربر روی یک تکه کلیک می کند، نکات ابزار نشان داده می شود.
focusBorderColor رشته یا Object رنگ پیش فرض حاشیه اطراف عناصر نمودار که در فوکوس هستند (با ماوس نشان داده شده است). مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
ارتفاع عدد ارتفاع کانتینر ارتفاع نمودار بر حسب پیکسل
سه بعدی است بولی نادرست اگر روی true تنظیم شود، یک نمودار سه بعدی نمایش می دهد.
افسانه رشته 'درست' موقعیت و نوع افسانه. می تواند یکی از موارد زیر باشد:
  • "راست" - در سمت راست نمودار.
  • "چپ" - در سمت چپ نمودار.
  • "بالا" - بالای نمودار.
  • "پایین" - زیر نمودار.
  • "برچسب" - برچسب های نزدیک به برش ها.
  • "هیچ" - هیچ افسانه ای نمایش داده نمی شود.
legendBackgroundColor رشته یا Object رنگ پیش فرض رنگ پس زمینه برای ناحیه افسانه نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
legendFontSize عدد خودکار اندازه فونت افسانه، بر حسب پیکسل.
legendTextColor رشته یا Object رنگ پیش فرض رنگ متن افسانه مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
pieJoinAngle عدد 0 هر برش کمتر از این زاویه در یک برش عمومی با برچسب "سایر" ترکیب می شود.
pieMinimalAngle عدد 0

هر برشی کوچکتر از این زاویه در نمودار دایره ای رسم نمی شود (اگرچه همچنان یک ورودی افسانه ای دریافت می کند). برش های باقی مانده منبسط می شوند تا پای به نسبت ثابت پر شود. توجه: این می تواند مقادیر ظاهری را مخدوش کند، به خصوص زمانی که این عدد بزرگ باشد، زیرا مقداری از پای حذف می شود.

برای محاسبه اندازه برش ها، ابتدا زوایای کوچکتر از pieJoinAngle به برش «دیگر» متصل می شوند و سپس تمام برش های بزرگتر از pieMinimalAngle رسم می شوند.

عنوان رشته بدون عنوان متن برای نمایش در بالای نمودار.
عنوان رنگ رشته یا Object رنگ پیش فرض رنگ برای عنوان نمودار. مقادیر ممکن مانند مقادیر گزینه پیکربندی backgroundColor هستند.
titleFontSize عدد خودکار اندازه قلم برای عنوان نمودار، بر حسب پیکسل.

tooltipFontSize		 عدد 11 اندازه فونت متن راهنمای ابزار. اگر نکته ابزار برای نگهداری متن در فونت مشخص شده خیلی کوچک باشد، ممکن است کاهش یابد.
tooltipHeight
 عدد 60 ارتفاع راهنمای ابزار، بر حسب پیکسل. ارتفاع نوک ابزار ثابت است. هرگز رشد نمی کند یا کوچک می شود تا متناسب با طول یا اندازه قلم متن باشد. اما هر چیزی بیشتر از 1/3 ارتفاع نمودار برش داده می شود.
tooltipWidth عدد 120 عرض راهنمای ابزار، بر حسب پیکسل. عرض راهنمای ابزار ثابت است. هرگز رشد نمی کند یا کوچک می شود تا متناسب با طول یا اندازه قلم متن باشد. اما هر چیزی بیشتر از عرض نمودار برش داده می شود.
عرض عدد عرض کانتینر عرض نمودار بر حسب پیکسل

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نمودار را رسم می کند.
getSelection() آرایه ای از عناصر انتخاب پیاده سازی استاندارد getSelection() . عناصر انتخاب شده عناصر ردیف و سلول هستند. چندین ردیف و/یا یک سلول را می توان در یک زمان توسط کاربر انتخاب کرد.
setSelection() هیچ یک پیاده سازی setSelection() استاندارد، اما از انتخاب چند ردیف و/یا یک سلول پشتیبانی می کند. هر ورودی انتخابی را به عنوان یک ردیف یا سلول انتخاب می کند.

مناسبت ها

نام شرح خواص
onmouseover هنگامی که کاربر ماوس را روی یک برش می‌گذارد و از فهرست‌های سطر و ستون سلول مربوطه عبور می‌کند، فعال می‌شود. سطر ستون
onmouseout هنگامی که کاربر از یک برش فاصله می‌گیرد و از فهرست‌های سطر و ستون سلول مربوطه عبور می‌کند، فعال می‌شود. سطر ستون
ready نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی روش draw ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید. هیچ یک
select

هنگامی که کاربر بر روی یک برش یا افسانه کلیک می کند فعال می شود. هنگامی که یک برش انتخاب می شود، سلول مربوطه در جدول داده انتخاب می شود. هنگامی که یک افسانه انتخاب می شود، ستون مربوطه در جدول داده ها انتخاب می شود. برای اطلاع از آنچه انتخاب شده است، getSelection() را فراخوانی کنید.

توجه: با کلیک بر روی یک تکه، بین انتخاب و عدم انتخاب یک سلول جابه جا نمی شود. با کلیک بر روی یک برش همیشه آن را انتخاب می کنید. از سوی دیگر، با کلیک کردن روی یک ورودی افسانه، بین انتخاب و لغو انتخاب ردیف جابه‌جا می‌شود.

 هیچ یک

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.