التصور: مخطط حركة

  1. Overview
  2. مثال
  3. جارٍ التحميل
  4. ضبط الحالة الأولية
  5. تنسيق البيانات
  6. خيارات الإعداد
  7. الطُرق
  8. الأحداث
  9. سياسة البيانات
  10. Notes

نظرة عامة

رسم بياني ديناميكي لاستكشاف العديد من المؤشرات بمرور الوقت يتم عرض الرسم البياني داخل المتصفح باستخدام Flash.

ملاحظة للمطوّرين: بسبب إعدادات أمان Flash، قد لا تعمل هذه العناصر (وجميع العروض المرئية المستنِدة إلى Flash) بشكل صحيح عند الوصول إليها من موقع ملف في المتصفّح (مثل file:///c:/webhost/myhost/myviz.html) بدلاً من عنوان URL لخادم الويب (مثل http://www.myhost.com/myviz.html). عادةً ما تكون هذه مشكلة متعلقة بالاختبار فقط. يمكنك التغلّب على هذه المشكلة كما هو موضّح على موقع Adobe الإلكتروني.

مثال

(ملاحظة: لن يعمل الرمز التالي عند تحميله كملف محلي، بل يجب تحميله من خادم ويب).

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

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

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

جارٍ التحميل

اسم حزمة "google.charts.load" هو "motionchart".

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

اسم فئة العرض المرئي هو google.visualization.MotionChart.

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

تنسيق البيانات

  • يجب أن يكون العمود الأول من النوع "سلسلة" ويتضمّن أسماء الكيانات (مثل "التفاح" أو "البرتقال" أو "الموز" في المثال أعلاه).
  • يجب أن يحتوي العمود الثاني على قيم الوقت. ويمكن التعبير عن الوقت بأي من التنسيقات التالية:
    • السنة: نوع العمود: 'number'. مثال: 2008.
    • الشهر واليوم والسنة: نوع العمود: 'date'، ويجب أن تكون القيم مثيلات Date في JavaScript.
    • رقم الأسبوع: نوع العمود: 'string'، ويجب أن تستخدم القيم النمط YYYYWww الذي يتوافق مع ISO 8601. مثال: '2008W03'.
    • ربع: نوع العمود: 'string'، ويجب أن يكون للقيم النمط YYYYQq الذي يتوافق مع ISO 8601. مثال: '2008Q3'.
  • يمكن أن تكون الأعمدة اللاحقة من نوع "الرقم" أو "السلسلة". ستظهر أعمدة الأرقام في القوائم المنسدلة للمحاور "س" و"ص" و"اللون" و"الحجم". لن تظهر أعمدة السلسلة إلا في القائمة المنسدلة "Color" (اللون). اطّلِع على المثال أعلاه.

ضبط الحالة الأولية

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

  1. افتح مخططًا عمليًا وعيِّن الإعدادات التي تريد تسجيلها. وتشمل الإعدادات التي يمكنك تحديدها مستويات التعتيم، والتكبير/التصغير، وتغيير السجل مقابل التحجيم الخطي.
  2. افتح لوحة الإعدادات عن طريق النقر على رمز مفتاح الربط أسفل يسار الرسم البياني.
  3. انقر على الرابط إعدادات متقدمة في أسفل يمين الصفحة لإضافة اللوحة إعدادات متقدّمة إلى المجموعة.
  4. وسِّع لوحة الإعدادات المتقدّمة وانسخ محتوى مربّع النص الحالة إلى الحافظة. (ملاحظة: بدلاً من استخدام القائمة الموضَّحة في الخطوات من 2 إلى 4، يمكنك إدراج زر على صفحتك يستدعي getState() ويعرض الحالة الحالية في مربّع رسائل).
  5. خصِّص سلسلة الحالة التي نسختها في الخطوة السابقة لمَعلمة خيارات "الحالة" في الرمز، كما هو موضّح هنا. عند تمرير الرسم البياني إلى طريقة draw()، سيتم إعداد الرسم البياني على الحالة المحدّدة عند بدء التشغيل.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
الطول الرقم 300 ارتفاع الرسم البياني بالبكسل
العرض الرقم 500 عرض الرسم البياني بالبكسل.
state سلسلة بدون حالة العرض الأولية للرسم البياني. هذا عنصر JSON متسلسل يصف مستوى التكبير والأبعاد المحدّدة والفقاعات التفسيرية/الكيانات المحدّدة وغيرها من أوصاف الحالات. راجِع ضبط الحالة الأولية للتعرّف على كيفية ضبطها.
showChartButtons boolean صحيح يؤدي اختيار "خطأ" إلى إخفاء الأزرار التي تتحكم في نوع الرسم البياني (الفقاعات التفسيرية / الخطوط / الأعمدة) في أعلى يسار الصفحة.
showHeader boolean صحيح يؤدي تحديد القيمة "false" إلى إخفاء تسمية عنوان الكيانات (المشتقة من تسمية العمود الأول في جدول البيانات).
showSelectListComponent boolean صحيح يؤدي الخيار "خطأ" إلى إخفاء قائمة الكيانات المرئية.
showSidePanel boolean صحيح يؤدي النقر على "خطأ" إلى إخفاء اللوحة اليمنى.
showXMetricPicker boolean صحيح يؤدي الخيار "خطأ" إلى إخفاء منتقي المقاييس في x.
showYMetricPicker boolean صحيح يؤدي تحديد القيمة "false" إلى إخفاء منتقي المقاييس في y.
showXScalePicker boolean صحيح يؤدي الخيار "خطأ" إلى إخفاء منتقي المقياس لـ x.
showYScalePicker boolean صحيح ويخفي الإعداد "خطأ" منتقي المقياس لـ ص.
showAdvancedPanel boolean صحيح يؤدي الخيار "خطأ" إلى إيقاف قسم الخيارات في لوحة الإعدادات.

الطُرق

الطريقة نوع القيمة التي يتم عرضها الوصف
draw(data, options) لا ينطبق ترسم الرسم البياني باستخدام الخيارات المتوفرة.
getState() سلسلة تعرض state الحالية لمخطط الحركة، والمتسلسلة إلى سلسلة JSON. لتعيين هذه الحالة إلى الرسم البياني، يمكنك تخصيص هذه السلسلة للخيار state في طريقة draw(). ويُستخدَم هذا غالبًا لتحديد حالة رسم بياني مخصّص عند بدء التشغيل، بدلاً من استخدام الحالة التلقائية.

الأحداث

الاسم الوصف أماكن إقامة
error يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني. رقم التعريف، رسالة
جاهز الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد أداة استماع لهذا الحدث قبل استدعاء طريقة الرسم، وعدم الاتصال بها إلا بعد تنشيط الحدث. لا ينطبق
تغيير الولاية تفاعل المستخدم مع الرسم البياني بطريقة ما. يمكنك الاتصال بالرقم getState() للاطّلاع على الحالة الحالية للرسم البياني. لا ينطبق

سياسة البيانات

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.

ملاحظات

بسبب إعدادات أمان Flash، قد لا يعمل هذا (وجميع العروض المرئية المستندة إلى Flash) بشكل صحيح عند الوصول إليه من موقع ملف في المتصفّح (مثل file:///c:/webhost/myhost/myviz.html) بدلاً من عنوان URL لخادم الويب (مثل http://www.myhost.com/myviz.html). وعادةً ما تكون هذه مشكلة في الاختبار فقط. يمكنك التغلب على هذه المشكلة كما هو موضّح في الموقع الإلكتروني لشركة موك ماي.