نمودار تقویم

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

بررسی اجمالی

توجه: جاوا اسکریپت ماه ها را با شروع صفر شمارش می کند: ژانویه 0، فوریه 1، و دسامبر 11 است. اگر نمودار تقویم شما یک ماه به نظر می رسد، به همین دلیل است.

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

نمودار تقویم ممکن است در نسخه‌های آتی نمودارهای Google تحت بازنگری‌های اساسی باشد.

نمودارهای تقویم در مرورگر با استفاده از SVG یا VML ارائه می شوند، هر کدام که برای مرورگر کاربر مناسب است. مانند همه نمودارهای Google، نمودارهای تقویم زمانی که کاربر روی داده ها قرار می گیرد، نکات ابزار را نمایش می دهد. و اعتبار در جایی که اعتبار وجود دارد: نمودار تقویم ما از تجسم تقویم D3 الهام گرفته شده است.

یک مثال ساده

فرض کنید می‌خواستیم نشان دهیم که چگونه حضور یک تیم ورزشی در طول فصل متفاوت است. با یک نمودار تقویم، می‌توانیم از روشنایی برای نشان دادن مقادیر استفاده کنیم و به مردم اجازه دهیم روندها را در یک نگاه ببینند:

می‌توانید برای دیدن مقادیر داده‌های زیربنایی، ماوس را روی هر روز حرکت دهید.

برای ایجاد نمودار تقویم، بسته calendar را بارگذاری کنید و سپس دو ستون، یکی برای تاریخ ها و دیگری برای مقادیر ایجاد کنید. (یک ستون سوم اختیاری برای استایل سفارشی شده در نسخه آتی Google Charts ارائه می شود.)

سپس مانند شکل زیر، ردیف‌های خود را با جفت‌های تاریخ-مقدار پر کنید.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

روزها

هر مربع در نمودار تقویم نشان دهنده یک روز است. در حال حاضر، رنگ سلول‌های داده را نمی‌توان سفارشی کرد، اگرچه در نسخه بعدی نمودار Google تغییر خواهد کرد.

اگر مقادیر داده ها همه مثبت باشند، رنگ ها از سفید تا آبی متغیر هستند و عمیق ترین آبی ها بالاترین مقادیر را نشان می دهند. اگر مقادیر داده منفی وجود داشته باشد، همانطور که در زیر نشان داده شده است، به رنگ نارنجی ظاهر می شوند.

کد این تقویم مشابه کد اول است، با این تفاوت که سطرها به شکل زیر هستند:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

می توانید اندازه روزها ("سلول ها") را با گزینه calendar.cellSize تغییر دهید:

در اینجا، ما calendar.cellSize را به 10 تغییر دادیم، روزها و بنابراین نمودار را به عنوان یک کل کوچک کردیم.

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

روزهای بدون مقادیر داده را می توان با گزینه noDataPattern سفارشی کرد:

در اینجا، color را روی آبی روشن و backgroundColor Color را روی سایه کمی تیره‌تر تنظیم می‌کنیم:

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

با calendar.cellColor می‌توانید رنگ حاشیه سلول، عرض حاشیه و کدورت را کنترل کنید:

باید مراقب باشید که رنگی را انتخاب کنید که از monthOutlineColor متمایز باشد، یا ماتی کم را انتخاب کنید. در اینجا گزینه های نمودار بالا آمده است:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

اگر روی یک روز در نمودار بالا تمرکز کنید، حاشیه با رنگ قرمز برجسته می شود. می‌توانید این رفتار را با گزینه‌های calendar.focusedCellColor کنترل کنید:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

هفته ها

به طور پیش فرض، روزهای هفته با حروف اول یکشنبه تا شنبه برچسب گذاری می شوند. شما نمی توانید ترتیب روزها را تغییر دهید، اما می توانید حروف مورد استفاده را با گزینه calendar.daysOfWeek تغییر دهید. همچنین، می‌توانید با calendar.dayOfWeekRightSpace ، لایه‌بندی بین روزهای هفته و نمودار را کنترل کنید، و می‌توانید سبک متن را با calendar.dayOfWeekLabel سفارشی کنید:

در اینجا، فونت برچسب‌های هفته را تغییر می‌دهیم، یک لایه 10 پیکسلی بین برچسب‌ها و داده‌های نمودار قرار می‌دهیم و هفته‌ها را از دوشنبه شروع می‌کنیم.

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

ماه ها

به طور پیش فرض، ماه ها با خطوط خاکستری تیره مشخص می شوند. می‌توانید از گزینه calendar.monthOutlineColor برای کنترل حاشیه‌ها، calendar.monthLabel برای سفارشی کردن فونت برچسب و calendar.underMonthSpace برای تنظیم لایه‌بندی برچسب استفاده کنید:

فونت برچسب را به رنگ قرمز تیره 12pt تایمز-رومن کج قرار دادیم، خطوط را روی همان رنگ قرار دادیم و یک لایه 16 پیکسلی قرار دادیم. طرح‌های ماه استفاده‌نشده روی رنگ کم‌رنگ‌تری با همان رنگ تنظیم می‌شوند.

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

سال ها

سال‌ها در نمودارهای تقویم همیشه در لبه سمت چپ نمودار هستند و می‌توانند با calendar.yearLabel و calendar.underYearSpace سفارشی شوند:

فونت سال را روی یک تایلیک پررنگ 32pt Times-Roman سبز تیره قرار می دهیم و ده پیکسل بین برچسب های سال و پایین نمودار اضافه می کنیم:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

بارگذاری

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

  google.charts.load("current", {packages: ["calendar"]});

نام کلاس تجسم google.visualization.Calendar است:

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

فرمت داده

ردیف: هر ردیف در جدول نشان دهنده یک تاریخ است.

ستون ها:

ستون 0 ستون 1 ... ستون N (اختیاری)
هدف: تاریخ ارزش های ... نقش های اختیاری
نوع داده: تاریخ، تاریخ، یا ساعت روز عدد ...
نقش: دامنه داده ها ...
نقش های ستون اختیاری:

هیچ یک

هیچ یک

 ...

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

نام
calendar.cellColor

گزینه calendar.cellColor به شما امکان می دهد مرز مربع های روز تقویم را سفارشی کنید:

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
نوع: شی
پیش‌فرض: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

اندازه مربع های روز تقویم:

var options = { calendar: { cellSize: 10 } };
نوع: عدد صحیح
پیش فرض: 16
calendar.dayOfWeekLabel

سبک قلم برچسب های هفته را در بالای نمودار کنترل می کند:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
نوع: شی
پیش‌فرض: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

فاصله بین لبه سمت راست برچسب های هفته و لبه چپ مربع های روز نمودار.

نوع: عدد صحیح
پیش فرض: 4
calendar.daysOfWeek

برچسب‌های تک حرفی برای استفاده از یکشنبه تا شنبه.

نوع: رشته
پیش‌فرض: 'SMTWTFS'
calendar.focusedCellColor

هنگامی که کاربر روی یک مربع روز تمرکز می کند (مثلاً با نگه داشتن ماوس)، نمودارهای تقویم مربع را برجسته می کنند.

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
نوع: شی
پیش‌فرض: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

سبک برای برچسب های ماه، به عنوان مثال:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
نوع: شی
پیش‌فرض: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

ماه‌های دارای مقادیر داده‌ها با استفاده از یک حاشیه در این سبک از سایرین مشخص می‌شوند.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(همچنین به calendar.unusedMonthOutlineColor مراجعه کنید.)
نوع: شی
پیش‌فرض: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

تعداد پیکسل‌های بین برچسب‌های پایین ماه و مربع‌های بالای روز:

var options = { calendar: { underMonthSpace: 12 } };
نوع: عدد صحیح
پیش فرض: 6
calendar.underYearSpace

تعداد پیکسل‌ها بین برچسب با بیشترین سال و پایین نمودار:

var options = { calendar: { underYearSpace: 2 } };
نوع: عدد صحیح
پیش فرض: 0
calendar.unusedMonthOutlineColor

ماه‌های بدون مقادیر داده با استفاده از یک حاشیه در این سبک از سایرین مشخص می‌شوند.

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(همچنین به calendar.monthOutlineColor مراجعه کنید.)
نوع: شی
پیش‌فرض: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

یک شی که نگاشت بین مقادیر ستون رنگ و رنگ ها یا مقیاس گرادیان را مشخص می کند. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
نوع: شی
پیش فرض: null
colorAxis.colors

رنگ هایی که به مقادیر در تجسم اختصاص داده می شوند. آرایه ای از رشته ها، که در آن هر عنصر یک رشته رنگی HTML است، به عنوان مثال: colorAxis: {colors:['red','#004411']} . شما باید حداقل دو مقدار داشته باشید. گرادیان شامل تمام مقادیر شما، به اضافه مقادیر واسطه محاسبه شده، با اولین رنگ به عنوان کوچکترین مقدار و آخرین رنگ به عنوان بالاترین می شود.

نوع: مجموعه ای از رشته های رنگی
پیش فرض: null
colorAxis.maxValue

در صورت وجود، حداکثر مقدار را برای داده های رنگ نمودار مشخص می کند. مقادیر داده های رنگی از این مقدار و بالاتر به عنوان آخرین رنگ در محدوده colorAxis.colors ارائه می شود.

نوع: شماره
پیش فرض: حداکثر مقدار ستون رنگ در داده های نمودار
colorAxis.minValue

در صورت وجود، حداقل مقدار را برای داده های رنگ نمودار مشخص می کند. مقادیر داده های رنگی از این مقدار و کمتر به عنوان اولین رنگ در محدوده colorAxis.colors ارائه می شود.

نوع: شماره
پیش فرض: حداقل مقدار ستون رنگ در داده های نمودار
colorAxis.values

در صورت وجود، نحوه ارتباط مقادیر با رنگ ها را کنترل می کند. هر مقدار با رنگ مربوطه در آرایه colorAxis.colors است. این مقادیر برای داده های رنگ نمودار اعمال می شود. رنگ آمیزی با توجه به گرادیان مقادیر مشخص شده در اینجا انجام می شود. عدم تعیین مقدار برای این گزینه معادل تعیین [minValue, maxValue] است.

نوع: آرایه اعداد
پیش فرض: null
forceIFrame

نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.)

نوع: بولی
پیش فرض: نادرست
ارتفاع

ارتفاع نمودار، بر حسب پیکسل.

نوع: شماره
پیش فرض: ارتفاع عنصر حاوی
noDataPattern

نمودارهای تقویم از یک الگوی مورب راه راه استفاده می کنند تا نشان دهند که هیچ داده ای برای یک روز خاص وجود ندارد. از noDataPattern.backgroundColor و noDataPattern.color برای لغو پیش‌فرض‌های مقیاس خاکستری استفاده کنید، به عنوان مثال:

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
نوع: شی
پیش فرض: null
tooltip.isHtml

برای استفاده از راهنمای ابزار SVG رندر شده (به جای رندر HTML) روی false تنظیم کنید. برای جزئیات بیشتر به سفارشی کردن محتوای راهنمای ابزار مراجعه کنید.

توجه: سفارشی‌سازی محتوای راهنمای ابزار HTML از طریق نقش داده ستون راهنمای ابزار توسط نمودار دایره‌ای و تجسم نمودار حباب پشتیبانی نمی‌شود .

نوع: بولی
پیش فرض: درست است
عرض

عرض نمودار، بر حسب پیکسل.

نوع: شماره
پیش فرض: عرض عنصر حاوی

مواد و روش ها

روش
draw(data, options)

نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد ready می پذیرد. Extended description

نوع بازگشت: ندارد
getBoundingBox(id)

یک شی شامل سمت چپ، بالا، عرض و ارتفاع id عنصر نمودار را برمی‌گرداند. قالب id هنوز مستند نشده است (آنها مقادیر بازگشتی کنترل کننده رویداد هستند)، اما در اینجا چند نمونه وجود دارد:

var cli = chart.getChartLayoutInterface();

ارتفاع منطقه نمودار
cli.getBoundingBox('chartarea').height
عرض میله سوم در سری اول نمودار میله ای یا ستونی
cli.getBoundingBox('bar#0#2').width
جعبه مرزی گوه پنجم نمودار دایره ای
cli.getBoundingBox('slice#4')
کادر مرزی داده های نمودار یک نمودار عمودی (مثلاً ستونی):
cli.getBoundingBox('vAxis#0#gridline')
کادر مرزی داده های نمودار یک نمودار افقی (مثلاً میله ای):
cli.getBoundingBox('hAxis#0#gridline')

مقادیر نسبت به ظرف نمودار هستند. بعد از ترسیم نمودار این را صدا بزنید.

نوع بازگشت: شی
getSelection()

آرایه ای از موجودیت های نمودار انتخاب شده را برمی گرداند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. یک نوار مربوط به یک سلول در جدول داده، یک ورودی افسانه به یک ستون (شاخص ردیف خالی است)، و یک دسته به یک ردیف (شاخص ستون تهی است). برای این نمودار، در هر لحظه می توان تنها یک موجودیت را انتخاب کرد. Extended description

نوع بازگشت: آرایه ای از عناصر انتخابی
setSelection()

موجودیت های نمودار مشخص شده را انتخاب می کند. هر انتخاب قبلی را لغو می کند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. یک نوار مربوط به یک سلول در جدول داده، یک ورودی افسانه به یک ستون (شاخص ردیف خالی است)، و یک دسته به یک ردیف (شاخص ستون تهی است). برای این نمودار، تنها یک موجودیت را می توان در یک زمان انتخاب کرد. Extended description

نوع بازگشت: ندارد
clearChart()

نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند.

نوع بازگشت: ندارد

مناسبت ها

نام
error

هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود.

ویژگی ها: شناسه، پیام
onmouseover

هنگامی که کاربر روی یک موجودیت بصری حرکت می‌کند فعال می‌شود. شاخص ردیف و مقدار تاریخ موجودیت را به عقب پس می دهد. اگر هیچ عنصر جدول داده ای برای موجودیت وجود نداشته باشد، مقدار بازگردانده شده برای شاخص ردیف undefined است.

خواص: ردیف، تاریخ
onmouseout

زمانی که کاربر از یک موجود بصری دور می‌شود، فعال می‌شود. شاخص ردیف و مقدار تاریخ موجودیت را به عقب پس می دهد. اگر هیچ عنصر جدول داده ای برای موجودیت وجود نداشته باشد، مقدار بازگردانده شده برای شاخص ردیف undefined است.

ردیف خواص ، تاریخ
ready

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

خواص: هیچ
select

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

خواص: هیچ

سیاست داده

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