جدول زمانی مشروح

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

بررسی اجمالی

نمودار خطی سری زمانی تعاملی با حاشیه نویسی اختیاری.

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

مثال 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

مهم: برای استفاده از این تجسم، باید ارتفاع و عرض عنصر ظرف را به صراحت در صفحه خود مشخص کنید. بنابراین، برای مثال: <div id="chart_div" style="width:400; height:250"></div> .

بارگذاری

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

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

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

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

فرمت داده

می توانید یک یا چند خط را در نمودار خود نمایش دهید. هر ردیف نشان دهنده یک موقعیت X در نمودار است - یعنی یک زمان خاص. هر خط با مجموعه ای از یک تا سه ستون توصیف می شود.

  • ستون اول از نوع date یا datetime است و مقدار X نقطه روی نمودار را مشخص می کند. اگر این ستون از نوع date (و نه datetime ) باشد، کوچکترین وضوح زمانی در محور X یک روز خواهد بود.
  • سپس هر خط داده با مجموعه ای از یک تا سه ستون اضافی به شرح زیر توصیف می شود:
    • مقدار Y - [ الزامی، شماره ] اولین ستون در هر مجموعه، مقدار خط را در زمان مربوطه از ستون اول توصیف می کند. برچسب ستون بر روی نمودار به عنوان عنوان آن خط نمایش داده می شود.
    • عنوان حاشیه نویسی - [ اختیاری، رشته ] اگر یک ستون رشته از ستون مقدار پیروی کند، و گزینه displayAnnotations درست باشد، این ستون دارای عنوان کوتاهی است که این نقطه را توصیف می کند. به عنوان مثال، اگر این خط نشان‌دهنده دمای برزیل باشد، و این یک عدد بسیار بالا باشد، عنوان می‌تواند «گرم‌ترین روز ثبت‌شده» باشد.
    • متن حاشیه نویسی - [ رشته اختیاری ] اگر ستون رشته دوم برای این سری وجود داشته باشد، مقدار سلول به عنوان متن توصیفی اضافی برای این نقطه استفاده می شود. برای استفاده از این ستون باید گزینه displayAnnotations را روی true تنظیم کنید. اگر allowHtml را روی true تنظیم کنید، می توانید از تگ های HTML استفاده کنید. اساسا هیچ محدودیتی برای اندازه وجود ندارد، اما توجه داشته باشید که ورودی های بیش از حد طولانی ممکن است قسمت نمایش را سرریز کنند. حتی اگر یک ستون عنوان حاشیه نویسی برای این نقطه داشته باشید، لازم نیست این ستون را داشته باشید. برچسب ستون توسط نمودار استفاده نمی شود. به عنوان مثال، اگر این گرم ترین روز ثبت شده بود، می توانید چیزی شبیه به "نزدیک ترین روز بعد 10 درجه خنک تر بود!".

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

نام تایپ کنید پیش فرض شرح
allowHtml بولی نادرست اگر روی true تنظیم شود، هر متن حاشیه نویسی که شامل تگ های HTML باشد به صورت HTML ارائه می شود.
اجازه بازنویسی بولی نادرست

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

  • allowRedraw باید درست باشد
  • displayAnnotations باید نادرست باشد (یعنی شما نمی توانید حاشیه نویسی را نشان دهید)
  • شما باید همان گزینه‌ها و مقادیر را ارسال کنید (به جز گزینه‌های allowRedraw و displayAnnotations) که در اولین فراخوانی برای draw() بود.
پسوند allValues رشته هیچ یک پسوندی که باید به تمام مقادیر موجود در مقیاس و افسانه اضافه شود.
حاشیه نویسی عرض عدد 25 عرض (در درصد) ناحیه حاشیه نویسی، خارج از کل منطقه نمودار. باید عددی در محدوده 5-80 باشد.
رنگ ها آرایه رشته ها رنگ های پیش فرض رنگ هایی که برای خطوط نمودار و برچسب ها استفاده می شود. آرایه ای از رشته ها. هر عنصر یک رشته در قالب رنگی معتبر HTML است. به عنوان مثال "قرمز" یا "#00cc00".
فرمت تاریخ رشته بسته به نوع ستون اول (به ترتیب تاریخ یا زمان تاریخ) یا "MMMM dd، yyyy" یا "HH:mm MMMM dd, yyyy" فرمت مورد استفاده برای نمایش اطلاعات تاریخ در گوشه سمت راست بالا. فرمت این فیلد طبق کلاس java SimpleDateFormat مشخص شده است.
نمایش حاشیه نویسی بولی نادرست اگر روی درست تنظیم شود، نمودار حاشیه نویسی را در بالای مقادیر انتخاب شده نشان می دهد. وقتی این گزینه روی true تنظیم شود، بعد از هر ستون عددی، دو ستون رشته حاشیه نویسی اختیاری می توان اضافه کرد، یکی برای عنوان حاشیه نویسی و دیگری برای متن حاشیه نویسی.
displayAnnotationsFilter بولی نادرست اگر روی درست تنظیم شود، نمودار یک کنترل فیلتر برای فیلتر کردن حاشیه نویسی ها نمایش می دهد. هنگامی که حاشیه نویسی های زیادی وجود دارد از این گزینه استفاده کنید.
displayDateBarSeparator بولی درست است، واقعی آیا برای نمایش یک جداکننده نوار کوچک ( | ) بین مقادیر سری و تاریخ در افسانه، که در آن true به معنای بله است.
displayExactValues بولی نادرست آیا برای صرفه جویی در فضا، یک نسخه کوتاه شده و گرد از مقادیر در بالای نمودار نمایش داده شود. false نشان می دهد که ممکن است. برای مثال، اگر روی false تنظیم شود، 56123.45 ممکن است به صورت 56.12k نمایش داده شود.
displayLegendDots بولی درست است، واقعی آیا برای نمایش نقاط در کنار مقادیر در متن افسانه، در جایی که true به معنای بله است.
displayLegendValues بولی درست است، واقعی آیا برای نمایش مقادیر برجسته شده در افسانه، در جایی که true به معنای بله است.
displayRangeSelector بولی درست است، واقعی

آیا برای نشان دادن منطقه انتخاب محدوده بزرگنمایی (ناحیه در پایین نمودار)، که در آن false به معنای خیر است.

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

نمایش دکمه های زوم بولی درست است، واقعی آیا پیوندهای بزرگنمایی ("1d 5d 1m" و غیره) نشان داده شود، جایی که false به معنای خیر است.
پر کردن عدد 0 عددی از 0 تا 100 (شامل) که آلفای پر را در زیر هر خط در نمودار خطی مشخص می کند. 100 به معنی 100٪ پر شدن مات است، 0 به معنای عدم پر شدن است. رنگ پر شده همان رنگ خط بالای آن است.
برجسته نقطه رشته "نزدیک ترین"

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

  • "نزدیکترین" - نزدیکترین مقادیر در امتداد محور X به ماوس.
  • "آخرین" - مجموعه بعدی مقادیر در سمت چپ ماوس.
افسانه موقعیت رشته 'sameRow' آیا باید افسانه رنگی را در همان ردیف با دکمه‌های بزرگ‌نمایی و تاریخ ('sameRow') قرار دهید یا روی یک ردیف جدید ('newRow').
حداکثر عدد خودکار حداکثر مقدار برای نشان دادن در محور Y. اگر حداکثر نقطه داده از این مقدار بیشتر شود، این تنظیم نادیده گرفته می‌شود و نمودار طوری تنظیم می‌شود که علامت تیک اصلی بعدی را بالاتر از حداکثر نقطه داده نشان دهد. این بر حداکثر محور Y که توسط scaleType تعیین می شود اولویت دارد.
دقیقه عدد خودکار حداقل مقداری که باید در محور Y نشان داده شود. اگر حداقل نقطه داده کمتر از این مقدار باشد، این تنظیم نادیده گرفته می‌شود و نمودار طوری تنظیم می‌شود که علامت تیک اصلی بعدی را زیر حداقل نقطه داده نشان دهد. این بر حداقل محور Y که توسط scaleType تعیین می شود اولویت دارد.
تعداد فرمت ها رشته یا نقشه عدد: جفت رشته خودکار

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

الگوها باید در قالبی باشند که توسط کلاس java DecimalFormat مشخص شده است.

  • اگر مشخص نشده باشد، از الگوی قالب پیش فرض استفاده می شود.
  • اگر یک الگوی رشته مشخص شده باشد، برای همه مقادیر استفاده می شود.
  • اگر نقشه مشخص شده باشد، کلیدها شاخص‌های سری (مبتنی بر صفر) هستند و مقادیر الگوهایی هستند که برای قالب‌بندی سری مشخص‌شده استفاده می‌شوند.
    لازم نیست برای هر سری در نمودار یک قالب قرار دهید. هر سری نامشخص از فرمت پیش فرض استفاده خواهد کرد.

اگر این گزینه مشخص شده باشد، گزینه displayExactValues ​​نادیده گرفته می شود.

scaleColumns آرایه اعداد خودکار

مشخص می کند که کدام مقادیر روی علامت های تیک محور Y در نمودار نشان داده شود. پیش فرض این است که یک مقیاس واحد در سمت راست داشته باشید که برای هر دو سری اعمال می شود. اما می توانید اضلاع مختلف نمودار را با مقادیر سری های مختلف مقیاس بندی کنید.

این گزینه آرایه ای از صفر تا سه عدد را می گیرد که شاخص (مبتنی بر صفر) سری را برای استفاده به عنوان مقدار مقیاس مشخص می کند. جایی که این مقادیر نشان داده می شوند به تعداد مقادیری که در آرایه خود وارد می کنید بستگی دارد:

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

هنگام نمایش بیش از یک مقیاس، توصیه می شود که گزینه scaleType را روی "allfixed" یا "allmaximized" تنظیم کنید.

scaleType رشته 'درست شد'

حداکثر و حداقل مقادیر نشان داده شده در محور Y را تنظیم می کند. گزینه های ذیل در دسترس هستند:

  • 'maximized' - محور Y حداقل تا حداکثر مقادیر سری را در بر می گیرد. اگر بیش از یک سری دارید، از allmaximized استفاده کنید.
  • 'fixed' [ پیش‌فرض ] - بسته به مقادیر داده‌ها، محور Y متفاوت است:
    • اگر همه مقادیر >=0 باشند، محور Y از صفر تا حداکثر مقدار داده را در بر می گیرد.
    • اگر همه مقادیر <=0 باشند، محور Y از صفر تا حداقل مقدار داده خواهد شد.
    • اگر مقادیر هم مثبت و هم منفی باشند، محور Y از حداکثر سری تا حداقل سری متغیر است.

      برای چند سری، از «allfixed» استفاده کنید.
  • "allmaximized" - همان "حداکثر" است، اما زمانی که چند مقیاس نمایش داده می شود استفاده می شود. هر دو نمودار در یک مقیاس به حداکثر می رسند، به این معنی که یکی در برابر محور Y به اشتباه نمایش داده می شود، اما با نگه داشتن ماوس روی هر سری، مقدار واقعی آن نمایش داده می شود.
  • 'allfixed' - مانند 'fixed'، اما هنگامی که مقیاس های متعدد نمایش داده می شود استفاده می شود. این تنظیم، هر مقیاس را با سری‌هایی که برای آن اعمال می‌شود، تنظیم می‌کند (از آن در ارتباط با scaleColumns استفاده کنید).

اگر گزینه های حداقل و/یا حداکثر را مشخص کنید، آنها بر حداقل و حداکثر مقادیر تعیین شده توسط نوع مقیاس شما اولویت خواهند داشت.

ضخامت عدد 0 عددی از 0 تا 10 (شامل) که ضخامت خطوط را مشخص می کند، جایی که 0 نازک ترین است.
wmode رشته "پنجره" پارامتر حالت پنجره (wmode) برای نمودار فلش. مقادیر موجود عبارتند از: "مادر"، "پنجره" یا "شفاف".
zoomEndTime تاریخ هیچ یک تاریخ/زمان پایان محدوده بزرگنمایی انتخاب شده را تنظیم می کند.
zoomStartTime تاریخ هیچ یک تاریخ/زمان شروع محدوده بزرگنمایی انتخاب شده را تنظیم می کند.

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نمودار را رسم می کند. با استفاده از ویژگی allowRedraw می‌توانید زمان پاسخ‌دهی را برای فراخوانی دوم و بعدی به draw() افزایش دهید.
getSelection() آرایه ای از عناصر انتخاب پیاده سازی استاندارد getSelection() . عناصر انتخاب شده عناصر سلولی هستند. تنها یک سلول می تواند در هر زمان توسط کاربر انتخاب شود.
getVisibleChartRange() یک شی با ویژگی های start و end یک شی را با ویژگی‌های start و end برمی‌گرداند که هر یک از آنها شیء Date هستند و انتخاب زمان فعلی را نشان می‌دهند.
hideDataColumns( columnIndexes ) هیچ یک سری داده های مشخص شده را از نمودار پنهان می کند. یک پارامتر را می پذیرد که می تواند یک عدد یا آرایه ای از اعداد باشد که در آن 0 به اولین سری داده ها اشاره دارد و غیره.
setVisibleChartRange( start , end ) هیچ یک محدوده قابل مشاهده (زوم) را روی محدوده مشخص شده تنظیم می کند. دو پارامتر از نوع Date را می پذیرد که اولین و آخرین بار محدوده قابل مشاهده انتخاب شده مورد نظر را نشان می دهد. شروع را روی تهی تنظیم کنید تا همه چیز از اولین تاریخ تا پایان را شامل شود. پایان را به null تنظیم کنید تا همه چیز از ابتدا تا آخرین تاریخ را شامل شود.
showDataColumns( columnIndexes ) هیچ یک سری داده های مشخص شده را پس از پنهان شدن با استفاده از روش hideDataColumns از نمودار نشان می دهد. یک پارامتر را می پذیرد که می تواند یک عدد یا آرایه ای از اعداد باشد که در آن 0 به اولین سری داده ها اشاره دارد و غیره.

مناسبت ها

نام شرح خواص
تغییر محدوده محدوده بزرگنمایی تغییر کرد. پس از اینکه کاربر محدوده زمانی قابل مشاهده را تغییر داد، فعال شد، اما نه پس از تماس با متد setVisibleChartRange .
توجه: توصیه می شود از ویژگی های رویداد استفاده نکنید، بلکه آنها را با فراخوانی متد getVisibleChartRange دریافت کنید.
  • start : تاریخ زمان شروع محدوده بزرگنمایی.
  • end : تاریخ زمان پایان محدوده بزرگنمایی.
آماده نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی روش draw ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید. هیچ یک
انتخاب کنید هنگامی که کاربر روی یک پرچم حاشیه نویسی (نشانگر) کلیک می کند، سلول مربوطه در جدول داده ها انتخاب می شود. سپس تجسم این رویداد را فعال می کند. هیچ یک

توجه : به دلیل محدودیت‌های خاص، اگر به صفحه مرورگر خود به‌عنوان فایل (مثلاً "file://") به جای سرور (مثلاً "http://www") دسترسی داشته باشید، ممکن است رویدادها پرتاب نشوند. .

سیاست داده

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

یادداشت

به دلیل تنظیمات امنیتی Flash، این (و همه تجسم‌های مبتنی بر Flash) ممکن است هنگام دسترسی از یک مکان فایل در مرورگر (مثلاً file:///c:/webhost/myhost/myviz.html) به‌درستی کار نکند. یک URL سرور وب (به عنوان مثال، http://www.myhost.com/myviz.html). این معمولاً فقط یک مشکل آزمایشی است. همانطور که در وب سایت Macromedia توضیح داده شده است، می توانید بر این مشکل غلبه کنید.