المخطط الزمني التوضيحي

  1. نظرة عامة
  2. مثال
  3. جارٍ التحميل
  4. تنسيق البيانات
  5. خيارات الإعداد
  6. الطُرق
  7. الأحداث
  8. سياسة البيانات
  9. 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 درجات".

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
سماح HTML منطقي خطأ وفي حال ضبطها على "صحيح"، سيتم عرض أي نص توضيحي يتضمّن علامات HTML بتنسيق HTML.
السماح بإعادة الرسم منطقي خطأ

يتيح أسلوب إعادة رسم أكثر فعالية للاستدعاءات الثانية واللاحقة لـ draw() في هذا التمثيل البصري. يؤدي ذلك إلى إعادة رسم منطقة المخطط فقط. لاستخدام هذا الخيار، يجب استيفاء المتطلبات التالية:

  • يجب أن يكون allowRedraw صحيحًا
  • يجب أن تكون التعليقات التوضيحية على الشبكة الإعلانية false (أي أنه لا يمكنك عرض التعليقات التوضيحية)
  • يجب عليك تمرير الخيارات والقيم نفسها (باستثناء السماح بإعادة الرسم والتعليقات التوضيحية الصورية) كما في الاستدعاء الأول إلى draw().
كل القيم سلسلة لا ينطبق لاحقة تُضاف إلى جميع القيم في المقاييس والتسمية التوضيحية.
عرض التعليقات التوضيحية number 25 عرض منطقة التعليقات التوضيحية (بالنسبة المئوية) خارج مساحة الرسم البياني بالكامل. يجب أن يكون رقمًا يتراوح بين 5 و80.
ألوان مصفوفة من السلاسل الألوان التلقائية الألوان التي يمكن استخدامها لخطوط وتصنيفات الرسم البياني. مصفوفة من السلاسل. كل عنصر عبارة عن سلسلة بتنسيق لون HTML صالح. على سبيل المثال: "أحمر" أو "#00cc00".
تنسيق التاريخ سلسلة يمكنك إما كتابة "MMMM dd, yyyy" أو "HH:mm MMMM dd, yyyy"، حسب نوع العمود الأول (التاريخ، أو التاريخ والوقت، على التوالي). التنسيق المستخدَم لعرض معلومات التاريخ في أعلى يسار الصفحة. ويكون تنسيق هذا الحقل كما هو محدّد في فئة java SimpleDateFormat.
التعليقات التوضيحية على الشبكة الإعلانية منطقي خطأ في حال ضبط هذه السياسة على "صحيح"، سيعرض الرسم البياني تعليقات توضيحية فوق القيم المختارة. عند ضبط هذا الخيار على "صحيح"، يمكن إضافة عمودَين اختياريَين لسلسلة التعليقات التوضيحية بعد كل عمود رقمي، أحدهما لعنوان التعليق التوضيحي والآخر لنص التعليق التوضيحي.
عرض التعليقات التوضيحية منطقي خطأ في حال الضبط على "true"، سيعرض الرسم البياني وحدة تحكم في الفلترة لفلترة التعليقات التوضيحية. استخدم هذا الخيار عندما يكون هناك العديد من التعليقات التوضيحية.
DisplayDateBarفاصل منطقي صواب يمكنك اختيار ما إذا كنت تريد عرض فاصل شريطي صغير ( | ) بين قيم السلسلة والتاريخ في وسيلة الإيضاح، حيث تشير القيمة true إلى نعم.
قيم الشبكة الإعلانية بالضبط منطقي خطأ لتحديد ما إذا كان سيتم عرض نسخة مختصرة من القيم المستديرة للقيم أعلى الرسم البياني لتوفير مساحة، تشير القيمة "خطأ" إلى إمكانية تنفيذ ذلك. على سبيل المثال، إذا تم تعيينها على "خطأ"، فقد يتم عرض القيمة 56123.45 على هذا النحو 56.12k.
شاشة عرض التسمية التوضيحية منطقي صواب يمكنك اختيار عرض النقاط بجانب القيم في نص التسمية التوضيحية، عندما تكون القيمة true هي "نعم".
قيم أسطورية العرض منطقي صواب يمكنك اختيار عرض القيم المميزة في وسيلة الإيضاح، حيث تشير القيمة "صحيح" إلى نعم.
تحديد نطاق العرض منطقي صواب

يمكنك اختيار إظهار منطقة اختيار نطاق التكبير أو التصغير (المنطقة أسفل الرسم البياني)، حيث تشير القيمة "false" إلى "لا".

المخطط في أداة اختيار التكبير/التصغير هو إصدار مقياس خشبي من السلسلة الأخيرة في الرسم البياني، تم تعديله ليناسب ارتفاع محدّد التكبير أو التصغير.
أزرار تكبير/تصغير العرض منطقي صواب ما إذا كان سيتم إظهار روابط التكبير أو التصغير ("1d 5d 1m وما إلى ذلك")، حيث تعني القيمة false "لا".
fill number 0 رقم من 0 إلى 100 (شامل) يحدد ألفا التعبئة أسفل كل سطر في الرسم البياني الخطي. 100 تعني 100% من التعبئة غير الشفافة، بينما 0 تعني عدم التعبئة على الإطلاق. لون التعبئة هو نفس لون الخط أعلاه.
تمييز نقاط سلسلة "أقرب"

النقاط التي يجب تمييزها في السلسلة والقيم المطابقة المطلوب عرضها في وسيلة الإيضاح. اختَر إحدى القيم التالية:

  • "أقرب" - القيم الأقرب بامتداد المحور "س" إلى الماوس.
  • 'last' - المجموعة التالية من القيم إلى يسار الماوس.
موضع التسمية التوضيحية سلسلة "sameRow" لتحديد ما إذا كنت تريد وضع وسيلة الإيضاح الملونة في الصف نفسه باستخدام أزرار التكبير والتصغير والتاريخ ("sameRow") أو في صف جديد ("newRow").
الحد الأقصى number تلقائي الحد الأقصى للقيمة المراد عرضها على المحور "ص". إذا كان الحد الأقصى لنقطة بيانات يتجاوز هذه القيمة، سيتم تجاهل هذا الإعداد، وسيتم تعديل الرسم البياني بحيث يعرض علامة الاختيار الرئيسية التالية أعلى قيمة نقطة البيانات. ستكون الأولوية على الحد الأقصى للمحور "ص" الذي تحدّده السمة scaleType.
دقيقة number تلقائي الحد الأدنى للقيمة المطلوب عرضها على المحور "ص". إذا كان الحد الأدنى لنقطة البيانات أقل من هذه القيمة، سيتم تجاهل هذا الإعداد، وسيتم تعديل الرسم البياني لعرض علامة الاختيار الرئيسية التالية أسفل الحد الأدنى من نقطة البيانات. ستكون الأولوية على الحدّ الأدنى للمحور "ص" الذي تحدّده السمة scaleType.
تنسيق الأرقام سلسلة، أو خريطة من رقم:أزواج من السلاسل تلقائي

تحدد أنماط تنسيق الأرقام التي سيتم استخدامها لتنسيق القيم في أعلى الرسم البياني.

يجب أن تكون الأنماط بالتنسيق المحدّد في فئة JavaScript DecimalFormat.

  • وإذا لم يتم تحديده، يتم استخدام نمط التنسيق التلقائي.
  • إذا تم تحديد نمط سلسلة واحد، فسيتم استخدامه لجميع القيم.
  • إذا تم تحديد خريطة، تكون المفاتيح عبارة عن فهارس للسلسلة (قائمة على صفر)، والقيم هي الأنماط التي يجب استخدامها لتنسيق السلسلة المحدَّدة.
    لست ملزمًا بتضمين تنسيق لكل سلسلة في الرسم البياني، لأنّ أي سلسلة غير محدّدة ستستخدم التنسيق التلقائي.

إذا تم تحديد هذا الخيار، سيتم تجاهل الخيار displayExactValues.
مقياس الأعمدة مصفوفة الأرقام تلقائي

لتحديد القيم المطلوب عرضها في علامات مؤشر المحور "ص" في الرسم البياني. الإعداد التلقائي هو استخدام مقياس واحد على الجانب الأيسر، وينطبق ذلك على كلا السلسلتين، ولكن يمكنك استخدام مقياسَين مختلفَين لقيم السلسلة المختلفة.

يأخذ هذا الخيار صفيفًا من صفر إلى ثلاثة أرقام يحدّد فهرس السلسلة (صفر) الذي سيتم استخدامه كقيمة للمقياس. ويعتمد مكان عرض هذه القيم على عدد القيم التي تدرجها في المصفوفة:

  • إذا حدّدت مصفوفة فارغة، لن يعرض الرسم البياني القيم "Y" بجانب علامات الاختيار.
  • إذا حددت قيمة واحدة، سيتم عرض مقياس السلسلة المشار إليها على الجانب الأيسر من المخطط فقط.
  • إذا حدّدت قيمتين، ستتم إضافة مقياس للسلسلة الثانية إلى يسار الرسم البياني.
  • إذا حدّدت ثلاث قيم، ستتم إضافة مقياس للسلسلة الثالثة إلى منتصف الرسم البياني.
  • وسيتم تجاهل أي قيم بعد الثالث في المصفوفة.

عند عرض أكثر من مقياس، من المستحسن ضبط الخيار scaleType على "allfixed" أو "allmaximized".

نوع المقياس سلسلة "تم الإصلاح"

لتعيين الحد الأقصى والحد الأدنى للقيم المعروضة في المحور "ص". تتوفر الخيارات التالية:

  • "maximized" - سيمتد المحور "ص" إلى الحد الأدنى وصولاً إلى القيم القصوى للسلسلة. إذا كان لديك أكثر من مسلسل واحد، استخدِم allmaxims.
  • 'fixed' [default] - يختلف المحور Y بناءً على قيم قيم البيانات:
    • إذا كانت جميع القيم >=0، فسيمتد المحور Y من صفر إلى أقصى قيمة للبيانات.
    • إذا كانت جميع القيم هي ==0، فسيمتد المحور "ص" من صفر إلى الحد الأدنى لقيمة البيانات.
    • إذا كانت القيم موجبة وسالبة، سيتراوح المحور "ص" من الحد الأقصى للسلسلة إلى الحد الأدنى للسلسلة.

      بالنسبة إلى سلاسل البيانات المتعددة، استخدِم "allfixed".
  • "allmaximized" - مثل "maximized"، ولكن يتم استخدامها عند عرض مقاييس متعددة. وسيتم تكبير حجم كلا الرسمين البيانيَين في مقياس واحد، ما يعني أنّه سيتمّ عرض وصف مضلّل للمحور "ص" في حين أنّ تمرير مؤشر الماوس فوق كل سلسلة يعرض القيمة الحقيقية.
  • "allfixed" - مثل "fixed"، ولكن يتم استخدامه عند عرض مقاييس متعددة. يعمل هذا الإعداد على تعديل كل مقياس حسب السلسلة التي ينطبق عليها (استخدم هذا الإعداد مع scaleColumns).

إذا حدّدت خيارات الحد الأدنى و/أو الأقصى، ستحظى بالأولوية على القيم الدنيا والقصوى التي يحدّدها نوع المقياس.
السُمك number 0 رقم من 0 إلى 10 (شامل) يحدد سُمك الخطوط، حيث 0 هو الأكثر سمكًا.
Wmode سلسلة "window" (نافذة) معلمة وضع النافذة (wmode) لمخطط Flash. القيم المتاحة هي: "مبهمة" أو "نافذة" أو "شفافة".
وقت الانتهاء/التكبير التاريخ لا ينطبق لتعيين تاريخ/وقت الانتهاء لنطاق التكبير أو التصغير المحدد.
وقت بدء التكبير/التصغير التاريخ لا ينطبق لتعيين تاريخ/وقت البدء لنطاق التكبير أو التصغير المحدد.

الطرق

الطريقة نوع القيمة التي يتم عرضها الوصف
draw(data, options) لا ينطبق لرسم المخطط. يمكنك تسريع وقت الاستجابة للاستدعاءات الثانية واللاحقة إلى draw() باستخدام الخاصية allowRedraw.
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). وعادةً ما تكون هذه مشكلة تجريبية فقط. ويمكنك حلّ هذه المشكلة كما هو موضّح في موقع Macromedia الإلكتروني.