تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

المخطط الزمني الذي يتضمّن تعليقات توضيحية

Overview
مثال
جارٍ التحميل
تنسيق البيانات
خيارات الإعداد
الطُرق
الأحداث
سياسة البيانات
Notes

نظرة عامة

رسم بياني خطي تفاعلي لسلاسل زمنية مع تعليقات توضيحية اختيارية

بدلاً من ذلك، يستخدم المخطط الزمني الذي يتضمّن تعليقات توضيحية الرسومات البيانية للتعليقات التوضيحية تلقائيًا.

مثال

<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)، تكون أصغر درجة دقة زمنيًا على المحور "س" هي يوم واحد.
بعد ذلك، يتم وصف كل خط بيانات من خلال مجموعة من عمود إلى ثلاثة أعمدة إضافية كما هو موضّح هنا:
- قيمة Y - [مطلوبة، العدد] يصف العمود الأول في كل مجموعة قيمة السطر في الوقت المقابل من العمود الأول. يتم عرض تصنيف العمود على الرسم البياني كعنوان ذلك الخط.
- عنوان التعليق التوضيحي - [اختيارية، سلسلة] إذا كان عمود السلسلة يتبع عمود القيمة وكان الخيار displayAnnotations صحيحًا، يتضمّن هذا العمود عنوانًا قصيرًا يصف هذه النقطة. على سبيل المثال، إذا كان هذا الخط يمثّل درجة الحرارة في البرازيل، وكانت هذه النقطة عددًا كبيرًا جدًا، يمكن أن يكون العنوان "أكثر يوم مسجَّل".
- نص التعليق التوضيحي - [سلسلة اختيارية] في حال توفُّر عمود سلسلة ثانٍ لهذه السلسلة، سيتم استخدام قيمة الخلية كنص وصفي إضافي لهذه النقطة. ويجب ضبط الخيار displayAnnotations على "صحيح" لاستخدام هذا العمود. يمكنك استخدام علامات HTML في حال ضبط السمة allowHtml على true، إذ ليس هناك حدّ أقصى للحجم، ولكن يُرجى العلم أنّ الإدخالات الطويلة جدًا قد تتجاوز قسم العرض. ولا يُشترط إدراج هذا العمود حتى إذا كان لديك عمود لعنوان التعليق التوضيحي لهذه النقطة. لا يستخدم الرسم البياني تصنيف العمود. على سبيل المثال، إذا كان هذا اليوم أشد الأيام حرارة في نقطة التسجيل، يمكنك مثلاً قول "درجة حرارة اليوم الأقرب التالية كانت أكثر برودة بمقدار 10 درجات".

خيارات الضبط

الاسم	النوع	القيمة التلقائية	الوصف
allowHtml	boolean	false	في حال ضبط هذه السياسة على "صحيح"، سيتم عرض أي نص تعليق توضيحي يتضمّن علامات HTML بتنسيق HTML.
allowRedraw	boolean	false	تُفعِّل أسلوب إعادة رسم أكثر كفاءة للاستدعاء الثاني واللاحق إلى `draw()` على هذا التمثيل المرئي. فهي تعيد رسم منطقة الرسم البياني فقط. لاستخدام هذا الخيار، عليك استيفاء المتطلبات التالية: يجب أن تكون السمة متاحة لإعادة الرسم على القيمة "true" يجب أن تكون قيمة العرض التوضيحية "خطأ" (أي أنّه لا يمكنك عرض تعليقات توضيحية) عليك ضبط الخيارات والقيم نفسها (باستثناء allowRe draw وDisplayشد ) نفسها كما في أوّل طلب لـ `draw()`.
allValuesSuffix	سلسلة	لا ينطبق	لاحقة ستتم إضافتها إلى جميع القيم في المقاييس ووسيلة الإيضاح.
annotationsWidth	الرقم	25	عرض منطقة التعليقات التوضيحية (بالنسبة المئوية) خارج منطقة الرسم البياني بالكامل يجب أن يكون رقمًا يتراوح بين 5 و80.
الألوان	مصفوفة من السلاسل	الألوان التلقائية	الألوان المراد استخدامها لخطوط وتسميات الرسم البياني. مصفوفة من السلاسل. ويكون كل عنصر عبارة عن سلسلة بتنسيق لون HTML صالح. على سبيل المثال، "أحمر" أو " #00cc00".
dateFormat	سلسلة	تكون بالتنسيق "dd MMMM yyyy" أو "HH:mm MMMM dd, yyyy"، بناءً على نوع العمود الأول (التاريخ أو التاريخ والوقت، على التوالي).	تمثّل هذه السمة التنسيق المستخدَم لعرض معلومات التاريخ في أعلى يسار الصفحة. يتم تحديد تنسيق هذا الحقل من خلال فئة java SimpleDateFormat.
displayAnnotations	boolean	false	في حال ضبط هذه السياسة على "صحيح"، سيعرض الرسم البياني تعليقات توضيحية أعلى القيم المحدّدة. عند ضبط هذا الخيار على "صحيح"، بعد كل عمود رقمي، يمكن إضافة عمودَين اختياريَين لسلسلة التعليقات التوضيحية، أحدهما لعنوان التعليق التوضيحي والآخر لنص التعليق التوضيحي.
displayAnnotationsFilter	boolean	false	في حال ضبط هذه السياسة على "صحيح"، سيعرض الرسم البياني أداة تحكم في الفلاتر لفلترة التعليقات التوضيحية. ويمكنك استخدام هذا الخيار في حال توفُّر عدد كبير من التعليقات التوضيحية.
displayDateBarSeparator	boolean	صحيح	لتحديد ما إذا كان سيتم عرض فاصل شريط صغير ( \| ) بين قيم السلسلة والتاريخ في وسيلة الإيضاح، حيث تعني القيمة "نعم" نعم.
displayExactValues	boolean	false	لتحديد ما إذا كان سيتم عرض نسخة مختصرة ومستديرة من القيم في أعلى الرسم البياني لتوفير مساحة، وتشير القيمة "خطأ" إلى احتمال ذلك. على سبيل المثال، في حال الضبط على "خطأ"، قد يتم عرض القيمة 56123.45 على أنّها 56.12 ألف.
displayLegendDots	boolean	صحيح	ما إذا كان سيتم عرض النقاط بجانب القيم في نص وسيلة الإيضاح، حيث تعني القيمة "نعم" نعم.
displayLegendValues	boolean	صحيح	ما إذا كان سيتم عرض القيم المميزة في وسيلة الإيضاح، حيث تعني القيمة "صحيح" نعم.
displayRangeSelector	boolean	صحيح	تحديد ما إذا كان سيتم عرض منطقة اختيار نطاق التكبير/التصغير (المنطقة في أسفل الرسم البياني)، حيث تعني القيمة "لا" "لا" المخطط في أداة اختيار التكبير/التصغير هو إصدار مقياس سجل من السلسلة الأخيرة في الرسم البياني، وقد تم تعديله ليلائم ارتفاع أداة اختيار التكبير/التصغير.
displayZoomButtons	boolean	صحيح	تحديد ما إذا كان سيتم عرض روابط التكبير/التصغير ("1d 5d 1m" وهكذا)، بينما تعني القيمة "خطأ" لا.
fill	الرقم	0	رقم من 0 إلى 100 (شامل) يحدّد ألفا التعبئة أسفل كل سطر في الرسم البياني الخطي. تعني القيمة 100 تعبئة تعتيم بنسبة 100%، وتعني 0 عدم تعبئة على الإطلاق. لون التعبئة هو نفس لون السطر الموجود فوقه.
highlightDot	سلسلة	"أقرب"	النقطة في السلسلة المطلوب تمييزها والقيم المقابلة المراد عرضها في وسيلة الإيضاح. اختَر إحدى القيم التالية: "أقرب" - القيم الأقرب على طول المحور "س" إلى الماوس. "الأخير" - المجموعة التالية من القيم التي تظهر يسار الماوس.
legendPosition	سلسلة	"sameRow"	تحديد ما إذا كان سيتم وضع وسيلة الإيضاح الملونة في الصف نفسه مع أزرار التكبير/التصغير والتاريخ ('sameRow') أو على صف جديد ('newRow').
الحد الأقصى	الرقم	تلقائية	الحد الأقصى للقيمة التي يتم عرضها على المحور "ص" إذا تجاوز الحد الأقصى لنقطة البيانات هذه القيمة، سيتم تجاهل هذا الإعداد، وسيتم ضبط الرسم البياني لعرض علامة التجزئة الرئيسية التالية فوق نقطة البيانات القصوى. وسيكون له الأولوية على الحد الأقصى للمحور "ص" الذي تحدّده السمة `scaleType`.
دقيقة	الرقم	تلقائية	أدنى قيمة يمكن عرضها على المحور "ص". إذا كان الحد الأدنى لنقطة البيانات أقل من هذه القيمة، سيتم تجاهل هذا الإعداد، وسيتم ضبط الرسم البياني لعرض علامة التجزئة الرئيسية التالية أسفل نقطة البيانات الدنيا. وسيكون له الأولوية على الحد الأدنى للمحور "ص" الذي تحدّده السمة `scaleType`.
numberFormats	سلسلة، أو خريطة لأزواج الأرقام:السلاسل	تلقائية	تحدّد هذه السمة أنماط تنسيق الأرقام التي سيتم استخدامها لتنسيق القيم في أعلى الرسم البياني. يجب أن تكون الأنماط بالتنسيق كما هو محدّد في فئة java DecimalFormat. إذا لم يتم تحديده، يتم استخدام نمط التنسيق التلقائي. إذا تم تحديد نمط سلسلة واحد، فسيتم استخدامه لجميع القيم. إذا تم تحديد خريطة، تكون المفاتيح هي فهارس (قائمة على صفر) للسلاسل، وتكون القيم هي الأنماط التي سيتم استخدامها لتنسيق السلسلة المحدّدة. ليس مطلوبًا منك تضمين تنسيق لكل سلسلة في الرسم البياني، لأنّ أي سلسلة غير محدّدة ستستخدم التنسيق التلقائي. وفي حال تحديد هذا الخيار، سيتم تجاهل الخيار `displayExactValues`.
scaleColumns	مصفوفة أرقام	تلقائي	لتحديد القيم التي سيتم عرضها على علامات التجزئة للمحور ص في الرسم البياني. والإعداد التلقائي هو أن يكون لديك مقياس واحد في الجانب الأيمن، وهذا ينطبق على كلتا السلسلتين، ولكن يمكنك تغيير جوانب الرسم البياني بما يتناسب مع قيم مختلفة لسلسلة. يأخذ هذا الخيار مصفوفة من صفر إلى ثلاثة أرقام تحدد الفهرس (المستنِد إلى صفر) للسلسلة لاستخدامها كقيمة المقياس. ويعتمد مكان ظهور هذه القيم على عدد القيم التي تدرجها في الصفيف: إذا حددت صفيفًا فارغًا، لن يعرض الرسم البياني قيم Y بجانب علامات التجزئة. إذا حدَّدت قيمة واحدة، سيتم عرض مقياس السلسلة المُشار إليه على الجانب الأيسر من الرسم البياني فقط. إذا حددت قيمتين، ستتم إضافة مقياس للسلسلة الثانية إلى يسار الرسم البياني. إذا حددت ثلاث قيم، ستتم إضافة مقياس للسلسلة الثالثة إلى منتصف الرسم البياني. وسيتم تجاهل أي قيم بعد القيمة الثالثة في الصفيف. عند عرض أكثر من مقياس واحد، يُنصح بضبط الخيار `scaleType` على "allfixed" أو "allmaximized".
scaleType	سلسلة	"تم الإصلاح"	لتعيين الحد الأقصى والأدنى للقيم المعروضة على المحور "ص". وتتوفّر الخيارات التالية: "maximized" - سيمتد المحور ص إلى الصغرى إلى الحد الأقصى لقيم السلسلة. إذا كان لديك أكثر من سلسلة واحدة، استخدِم الحقل allmaximized. 'fixed' [default] - يختلف المحور ص حسب قيم البيانات: إذا كانت جميع القيم أكبر من أو تساوي 0، يمتد المحور "ص" من صفر إلى الحد الأقصى لقيمة البيانات. إذا كانت جميع القيم <=0، سيمتد المحور ص من صفر إلى قيمة البيانات الدنيا. إذا كانت القيمتان موجبة وسالبة، سيتراوح المحور "ص" من الحد الأقصى للسلسلة إلى الحد الأدنى في السلسلة. بالنسبة إلى السلاسل المتعددة، يمكنك استخدام "allfixed". "allmaximized": مثل "maximized"، ولكن يُستخدم عند عرض مقاييس متعددة. سيتم تكبير كلا الرسمَين البيانيين ضمن المقياس نفسه، ما يعني أنّه ستتم الإشارة إلى أحدهما بشكل مضلل على المحور "ص"، ولكن التمرير فوق كل سلسلة سيعرض قيمته الحقيقية. "allfixed": مماثلة لـ "fixed"، ولكن يتم استخدامها عند عرض مقاييس متعددة. يضبط هذا الإعداد كل مقياس للسلسلة التي ينطبق عليها (استخدِم هذا الإعداد مع السمة `scaleColumns`). إذا حدّدت الحدّ الأدنى و/أو الحدّ الأقصى للخيارات، ستكون لها الأولوية على القيم الدنيا والقصوى التي يحدّدها نوع المقياس.
السُمك	الرقم	0	رقم من 0 إلى 10 (شامل) يحدّد سُمك الخطوط، حيث يكون 0 هو الأقل سمكًا.
wmode	سلسلة	"نافذة"	تمثّل هذه السمة مَعلمة وضع النوافذ (wmode) لرسم بياني فلاش. والقيم المتاحة هي: "غير شفاف" أو "نافذة" أو "شفاف".
zoomEndTime	التاريخ	لا ينطبق	لضبط تاريخ/وقت الانتهاء لنطاق التكبير/التصغير المحدّد.
zoomStartTime	التاريخ	لا ينطبق	لضبط تاريخ/وقت البدء لنطاق التكبير/التصغير المحدّد.

الطُرق

الطريقة	نوع القيمة التي يتم عرضها	الوصف
`draw(data, options)`	لا ينطبق	لرسم الرسم البياني. يمكنك تسريع وقت الاستجابة للاستدعاءَين الثاني والأحدث إلى `draw()` باستخدام سمةallowRe draw.
`getSelection()`	مصفوفة عناصر الاختيار	تنفيذ `getSelection()` عادي. العناصر المحدّدة هي عناصر الخلية. يمكن للمستخدم اختيار خلية واحدة فقط في كل مرة.
`getVisibleChartRange()`	كائن ذو السمتَين `start` و`end`	تعرض هذه الدالة عنصرًا يضم السمتَين `start` و`end`، ويمثّل كل منهما كائن `Date`، ويمثّل الوقت الحالي المحدّد.
`hideDataColumns(columnIndexes)`	لا ينطبق	يؤدي هذا الإجراء إلى إخفاء سلسلة البيانات المحدّدة من الرسم البياني. يتم قبول مَعلمة واحدة يمكن أن تكون رقمًا أو مصفوفة أرقام، حيث يشير 0 إلى سلسلة البيانات الأولى، وهكذا.
`setVisibleChartRange(start, end)`	لا ينطبق	لضبط النطاق المرئي (تكبير/تصغير) على النطاق المحدّد. يتم قبول مَعلمتَين من النوع `Date` تمثّلان المرة الأولى والأخيرة للنطاق المرئي المحدّد المطلوب. اضبط start على null لتضمين كل شيء من أقرب تاريخ إلى end، اضبط end على null لتضمين كل شيء من start إلى التاريخ الأخير.
`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). يُرجى العِلم أنّ هذه المشكلة تتعلّق عادةً بالاختبار فقط. يمكنك التغلب على هذه المشكلة على النحو الموضّح في الموقع الإلكتروني لشركة موك مايدا.