نمودار حاشیه نویسی

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

بررسی اجمالی

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

هشدار سردرگمی: در حال حاضر، نمودار حاشیه نویسی گوگل از حاشیه نویسی هایی که سایر نمودارهای گوگل (در حال حاضر ناحیه، نوار، ستون، ترکیب، خط و پراکندگی) پشتیبانی می کنند، متمایز است. در این نمودارها، حاشیه نویسی ها در یک ستون جداول داده جداگانه مشخص می شوند و به صورت بیت های کوتاهی از متن نمایش داده می شوند که کاربران می توانند برای دیدن متن کامل حاشیه نویسی روی آن ها حرکت کنند. در مقابل، نمودار حاشیه نویسی، حاشیه نویسی های کامل را در سمت راست نمایش می دهد، همانطور که در زیر نشان داده شده است.

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id='chart_div' style='width: 900px; height: 600px;'></div> google.charts.load('current', {'packages':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id='chart_div' style='width: 900px; height: 600px;'></div> google.charts.load('current', {'packages':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 600px;'></div>
  </body>
</html>

بارگذاری

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

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

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

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

فرمت داده

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

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

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

نام
allowHtml

اگر روی true تنظیم شود، هر متن حاشیه نویسی که شامل تگ های HTML باشد به صورت HTML ارائه می شود.

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

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

نوع: رشته
پیش فرض: هیچ
حاشیه نویسی عرض

عرض (در درصد) ناحیه حاشیه نویسی، خارج از کل منطقه نمودار. باید عددی در محدوده 5-80 باشد.

نوع: شماره
پیش فرض: 25
رنگ ها

رنگ هایی که برای خطوط نمودار و برچسب ها استفاده می شود. آرایه ای از رشته ها. هر عنصر یک رشته در قالب رنگی معتبر HTML است. به عنوان مثال "قرمز" یا "#00cc00".

نوع: آرایه از رشته ها
پیش فرض: رنگ های پیش فرض
فرمت تاریخ

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

نوع: رشته
پیش‌فرض: بسته به نوع ستون اول (به ترتیب تاریخ یا زمان تاریخ) یا «MMMM dd، yyyy» یا «HH:mm MMMM dd, yyyy»
نمایش حاشیه نویسی

اگر روی false تنظیم شود، نمودار جدول حاشیه نویسی را پنهان می کند و حاشیه نویسی و annotationText قابل مشاهده نخواهد بود (در صورتی که هیچ حاشیه نویسی در داده های شما وجود نداشته باشد، جدا از این گزینه، جدول حاشیه نویسی نیز نمایش داده نمی شود). وقتی این گزینه روی true تنظیم شود، بعد از هر ستون عددی، دو ستون رشته حاشیه نویسی اختیاری می توان اضافه کرد، یکی برای عنوان حاشیه نویسی و دیگری برای متن حاشیه نویسی.

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

اگر روی درست تنظیم شود، نمودار یک کنترل فیلتر برای فیلتر کردن حاشیه نویسی ها نمایش می دهد. هنگامی که حاشیه نویسی های زیادی وجود دارد از این گزینه استفاده کنید.

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

آیا برای نمایش یک جداکننده نوار کوچک ( | ) بین مقادیر سری و تاریخ در افسانه، که در آن true به معنای بله است.

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

آیا برای صرفه جویی در فضا، یک نسخه کوتاه شده و گرد از مقادیر در بالای نمودار نمایش داده شود. false نشان می دهد که ممکن است. برای مثال، اگر روی false تنظیم شود، 56123.45 ممکن است به صورت 56.12k نمایش داده شود.

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

آیا برای نمایش نقاط در کنار مقادیر در متن افسانه، در جایی که true به معنای بله است.

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

آیا برای نمایش مقادیر برجسته شده در افسانه، در جایی که true به معنای بله است.

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

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

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

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

اینکه آیا دکمه‌های بزرگ‌نمایی ("1d 5d 1m" و غیره) نشان داده شود، جایی که false به معنای خیر است.

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

عددی از 0 تا 100 (شامل) که آلفای پر را در زیر هر خط در نمودار خطی مشخص می کند. 100 به معنای 100٪ مات و 0 به معنای عدم پر شدن است. رنگ پر شده همان رنگ خط بالای آن است.

نوع: شماره
پیش فرض: 0
افسانه موقعیت

آیا باید افسانه رنگی را در همان ردیف با دکمه‌های بزرگ‌نمایی و تاریخ ('sameRow') قرار دهید یا روی یک ردیف جدید ('newRow').

نوع: رشته
پیش فرض: 'sameRow'
حداکثر

حداکثر مقدار برای نشان دادن در محور Y. اگر حداکثر نقطه داده از این مقدار بیشتر شود، این تنظیم نادیده گرفته می‌شود و نمودار طوری تنظیم می‌شود که علامت تیک اصلی بعدی را بالاتر از حداکثر نقطه داده نشان دهد. این بر حداکثر محور Y که توسط scaleType تعیین می شود اولویت دارد.

این شبیه به maxValue در نمودارهای اصلی است.

نوع: شماره
پیش فرض: خودکار
دقیقه

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

این شبیه به minValue در نمودارهای اصلی است.

نوع: شماره
پیش فرض: خودکار
تعداد فرمت ها

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

الگوها باید در قالبی باشند که توسط کلاس 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 استفاده کنید).

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

نوع: رشته
پیش فرض: "تثبیت"
جدول

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

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
نوع: شی
پیش فرض: null
table.sort صعودی

اگر روی true تنظیم شود، ترتیب جدول حاشیه نویسی را معکوس می کند و آنها را به ترتیب صعودی نمایش می دهد.

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

نمایه ستون جدول حاشیه نویسی که حاشیه نویسی برای آن مرتب می شود. شاخص باید برای ستون برچسب حاشیه نویسی 0 یا برای ستون متن حاشیه نویسی 1 باشد.

نوع: شماره
پیش فرض: 0
ضخامت

عددی از 0 تا 10 (شامل) که ضخامت خطوط را مشخص می کند، جایی که 0 نازک ترین است.

نوع: شماره
پیش فرض: 0
zoomEndTime

تاریخ/زمان پایان محدوده بزرگنمایی انتخاب شده را تنظیم می کند.

نوع: تاریخ
پیش فرض: هیچ
zoomStartTime

تاریخ/زمان شروع محدوده بزرگنمایی انتخاب شده را تنظیم می کند.

نوع: تاریخ
پیش فرض: هیچ

مواد و روش ها

روش
clearChart()

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

نوع بازگشت: ندارد
draw(data, options, state)

نمودار را رسم می کند.

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

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

نوع بازگشت: دسته به یک عنصر DOM
getSelection()

پیاده سازی استاندارد getSelection() . عناصر انتخاب شده عناصر سلولی هستند. تنها یک سلول می تواند در هر زمان توسط کاربر انتخاب شود.

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

یک شی را با ویژگی‌های start و end برمی‌گرداند که هر یک از آنها شیء Date هستند و انتخاب زمان فعلی را نشان می‌دهند.

نوع بازگشت: یک شی با ویژگی های start و end
hideDataColumns( columnIndexes )

سری داده های مشخص شده را از نمودار پنهان می کند. یک پارامتر را می پذیرد که می تواند یک عدد یا آرایه ای از اعداد باشد که در آن 0 به اولین سری داده ها اشاره دارد و غیره.

نوع بازگشت: ندارد
setVisibleChartRange( start , end )

محدوده قابل مشاهده (زوم) را روی محدوده مشخص شده تنظیم می کند. دو پارامتر از نوع Date را می پذیرد که اولین و آخرین بار محدوده قابل مشاهده انتخاب شده مورد نظر را نشان می دهد. شروع را روی تهی تنظیم کنید تا همه چیز از اولین تاریخ تا پایان را شامل شود. پایان را به null تنظیم کنید تا همه چیز از ابتدا تا آخرین تاریخ را شامل شود.

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

سری داده های مشخص شده را پس از پنهان شدن با استفاده از روش hideDataColumns از نمودار نشان می دهد. یک پارامتر را می پذیرد که می تواند یک عدد یا آرایه ای از اعداد باشد که در آن 0 به اولین سری داده ها اشاره دارد و غیره.

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

مناسبت ها

نام
rangechange

هنگامی که کاربر نوار لغزنده محدوده را تغییر می دهد فعال می شود. نقاط پایانی محدوده جدید به event ['start'] و event ['end'] در دسترس خواهند بود:

google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);

function rangechange_handler(e) {
  console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
خواص: شروع، پایان
ready

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

خواص: هیچ
select

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

خواص: هیچ

سیاست داده

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