تجسم: نمودار دایره ای (تصویر)

مهم: بخش نمودارهای تصویری ابزار نمودار Google از 20 آوریل 2012 رسماً منسوخ شده است . طبق خط مشی منسوخ شدن ما به کار خود ادامه خواهد داد.

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

بررسی اجمالی

نمودار دایره ای که با استفاده از Google Charts API به صورت تصویر ارائه می شود.

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagepiechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.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.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagepiechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.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.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagepiechart"]});
      google.charts.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.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

بارگذاری

نام بسته google.charts.load "imagepiechart" است:

  google.charts.load('current', {packages: ['imagepiechart']});

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

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

فرمت داده

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

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

می‌توانید گزینه‌های زیر را به‌عنوان بخشی از شی گزینه‌های ارسال شده به متد draw() تصویرسازی مشخص کنید.

نام تایپ کنید پیش فرض شرح
رنگ پس زمینه رشته "#FFFFFF" (سفید) رنگ پس‌زمینه نمودار در قالب رنگ Chart API .
رنگ رشته خودکار یک رنگ پایه را برای استفاده برای همه سری ها مشخص می کند. هر سری یک درجه بندی از رنگ مشخص شده خواهد بود. رنگ ها در قالب رنگ Chart API مشخص می شوند. اگر colors مشخص شده باشد نادیده گرفته می شود.
رنگ ها آرایه <رشته> خودکار از این برای اختصاص رنگ های خاص به هر سری داده استفاده کنید. رنگ ها در قالب رنگ Chart API مشخص می شوند. رنگ i برای ستون داده i استفاده می‌شود، اگر تعداد ستون‌های داده بیشتر از رنگ‌ها باشد، تا ابتدا بسته می‌شود. اگر تنوع یک رنگ برای همه سری ها قابل قبول است، به جای آن از گزینه color استفاده کنید.
enableEvents بولی نادرست باعث می شود نمودارها رویدادهای ایجاد شده توسط کاربر مانند کلیک یا ماوس را روی آن پرتاب کنند. فقط برای انواع نمودار خاص پشتیبانی می شود. رویدادهای زیر را ببینید.
ارتفاع عدد ارتفاع کانتینر ارتفاع نمودار بر حسب پیکسل
سه بعدی است بولی نادرست اگر روی true تنظیم شود، یک نمودار سه بعدی نمایش می دهد.
برچسب ها رشته 'هیچ یک'

چه برچسبی، در صورت وجود، برای هر برش نشان داده شود. از بین مقادیر زیر انتخاب کنید:

  • "هیچ" - بدون برچسب.
  • 'value' - از مقدار برش به عنوان برچسب استفاده کنید.
  • 'name' - از نام برش (نام ستون) استفاده کنید.
افسانه رشته 'درست' محل افسانه در نمودار. یکی از مقادیر زیر را انتخاب کنید: «بالا»، «پایین»، «چپ»، «راست»، «هیچکدام».
عنوان رشته بدون عنوان متن برای نمایش در بالای نمودار.
عرض عدد عرض کانتینر عرض نمودار بر حسب پیکسل

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نمودار را رسم می کند.

مناسبت ها

می توانید برای شنیدن رویدادهای شرح داده شده در صفحه نمودار تصویر عمومی ثبت نام کنید.

سیاست داده

لطفاً به خط مشی ورود به سیستم نمودار API مراجعه کنید.