التمثيل البصري: رسم بياني متحرّك

  1. نظرة عامة
  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);

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

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

تعيين الحالة الأولية

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

  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);

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
الارتفاع number 300 ارتفاع المخطط بالبكسل.
width number 500 عرض المخطط بالبكسل.
ولاية سلسلة لا شيء حالة عرض أولية للرسم البياني. هذا كائن JSON متسلسل يصف مستوى التكبير/التصغير والأبعاد المختارة والفقاعات التفسيرية/الكيانات المحدَّدة ووصف الحالة الأخرى. اطّلِع على مقالة إعداد الحالة الأولية لمعرفة كيفية ضبطها.
إظهار الرسم البياني للأزرار منطقي صواب يؤدي الضغط على false إلى إخفاء الأزرار التي تتحكم في نوع المخطط (فقاعات تفسيرية / خطوط / أعمدة) أعلى اليسار.
عنوان العرض منطقي صواب يؤدي إخفاء القيمة إلى إخفاء تصنيف عنوان الكيانات (اشتقاقًا من تصنيف العمود الأول في جدول البيانات).
showSelectListComponent منطقي صواب يؤدي إخفاء القيمة إلى إخفاء قائمة الكيانات المرئية.
إظهار اللوحة الجانبية منطقي صواب يؤدي الضغط على false إلى إخفاء اللوحة اليمنى.
عرض منتقي المقاييس منطقي صواب تخفي false منتقي المقاييس لـ x.
منتقي المقياس YY منطقي صواب تخفي false منتقي المقاييس لـ y.
عرض XScale Picker منطقي صواب يؤدي إخفاء القيمة إلى إخفاء منتقي المقاييس لـ x.
عرض أداة اختيار المقياس منطقي صواب يؤدي إخفاء القيمة إلى إخفاء منتقي المقياس لـ y.
إظهار اللوحة المتقدمة منطقي صواب تؤدي القيمة "false" إلى تعطيل مقصورة الخيارات في لوحة الإعدادات.

الطرق

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

الأحداث

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

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

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

ملاحظات

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