رسوم متحركة

تصف هذه الصفحة كيفية تحريك التعديلات التي تم إجراؤها على رسم بياني، بدلاً من تطبيقها فورًا.

المحتويات

1. نظرة عامة
2. التعديلات المتاحة
3. سلوك النقل
4. الأحداث
5. أمثلة

نظرة عامة

يمكن أن تتحرك مخططات Google بسلاسة بسلاسة من خلال إحدى طريقتين، إما عند بدء التشغيل عند رسم الرسم البياني لأول مرة، أو عند إعادة رسم مخطط بعد إجراء تغيير في البيانات أو الخيارات.

للتحريك عند بدء التشغيل:

1. عيّن بيانات المخطط والخيارات. تأكد من تعيين مدة الرسوم المتحركة ونوع التخفيف.
2. ضبط animation: {"startup": true} — يؤدي ضبط هذا الإعداد في خياراتك إلى بدء الرسم البياني بقيم السلسلة المرسومة في المرجع، وتحريكه إلى حالته النهائية.
3. يمكنك الاتصال بالرقم chart.draw() وتمرير بياناتك وخياراتك.

لتحريك النقل:

1. ابدأ برسم بياني معروض مسبقًا.
2. تعديل جدول البيانات أو الخيارات. وتتيح الأنواع المختلفة من الرسوم البيانية إمكانية إجراء تعديلات مختلفة. يمكنك مراجعة التعديلات المتاحة للاطّلاع على التعديلات المتوافقة مع أنواع الرسوم البيانية.
3. حدد سلوك النقل باستخدام خيار الصور المتحركة.
4. يمكنك استدعاء الدالة chart.draw() في الرسم البياني للانتقال إلى القيم الجديدة.

في ما يلي مثال بسيط يغيّر القيمة الفردية المعروضة في رسم بياني شريطي عند كل نقرة على زر:

   function init() {
    var options = {
      width: 400,
      height: 240,
      animation:{
        duration: 1000,
        easing: 'out',
      },
      vAxis: {minValue:0, maxValue:1000}
    };
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'N');
    data.addColumn('number', 'Value');
    data.addRow(['V', 200]);

    var chart = new google.visualization.ColumnChart(
        document.getElementById('visualization'));
    var button = document.getElementById('b1');

    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
          });
      chart.draw(data, options);
    }

    button.onclick = function() {
      var newValue = 1000 - data.getValue(0, 1);
      data.setValue(0, 1, newValue);
      drawChart();
    }
    drawChart();
  }

التعديلات المتاحة

يختلف دعم الأنواع المختلفة من الانتقالات من رسم بياني إلى آخر. في ما يلي الأنواع المختلفة من الانتقالات:

• التغييرات على قيم جدول البيانات فقط. عدد الصفوف والأعمدة متطابق، ويحتفظ العمودان بأنواعها وأدوارها الأصلية.
• إضافة أعمدة (سلسلة) أو إزالتها
• إضافة صفوف (فئات) أو إزالتها.
• تغييرات في خيارات الرسم البياني. في الوقت الحالي، تشمل الخيارات التي ستتحرك عند التغيير ما يلي:
  • نافذة العرض (vAxis.viewWindow.min، vAxis.viewWindow.max، hAxis.viewWindow.min، hAxis.viewWindow.max) - يُعدّ تغيير نافذة العرض مفيدًا لتحقيق تأثيرات "التكبير/التصغير" و"الانحراف" المستمرة (راجع الأمثلة أدناه)
  • قيم vAxis.ticks وhAxis.ticks
  • vAxis.gridlines.count وhAxis.gridlines.count
  • vAxis.direction وhAxis.direction
  • vAxis.baseline وhAxis.baseline
  • vAxis.logScale وhAxis.logScale
  • حجم الرسم البياني (height وwidth)
  • منطقة الرسم البياني (chartArea.height، chartArea.width، chartArea.top، chartArea.left)

نوع التعديل	أنواع الرسوم البيانية الصالحة
تغييرات القيمة	رسم بياني للنقاط المخططة، مخطط خطي، مخطط مساحي، مخطط بياني، مخطط فقاعي، رسم بياني عمودي، مخطط شموع، مخطط خطوات
إضافة/إزالة صفوف	رسم بياني للنقاط المخططة والمخطط الخطي ومخطط الرسم البياني وفقاعة تفسيرية ومخطط مجمّع (مع سلسلة خطية/منطقة فقط)
إضافة/إزالة أعمدة	الرسم البياني لـ ScatterChart، والمخطط الخطي، والمخطَّط المساحي، والمخطَّط الشريطي، وفقاعة تفسيرية، والمخطَّط العمودي، ومخطط الشموع، وSteppedAreaChart، وComboChart
تعديل خيارات الرسم البياني	الرسم البياني لـ ScatterChart، والمخطط الخطي، والمخطَّط المساحي، والمخطَّط الشريطي، وفقاعة تفسيرية، والمخطَّط العمودي، ومخطط الشموع، وSteppedAreaChart، وComboChart

سلوك النقل

الاسم
.GIF	مدة الصورة المتحركة بالمللي ثانية. لمعرفة التفاصيل، يُرجى الاطّلاع على مستندات الصور المتحركة. النوع: الرقم القيمة التلقائية: 0
رسم متحرك.	دالة الإرخاء المطبَّقة على الحركة. تتوفّر الخيارات التالية: "خطي" - سرعة ثابتة 'in' - Easy in - البدء ببطء والسرعة. 'out' - راحة - البدء بسرعة وإبطاء. 'inAndOut' - إرخاء للداخل والخارج - البدء ببطء، تسريع، تقليل البطء. النوع: سلسلة افتراضي: "خطي"
تشغيل الصور المتحركة.	لتحديد ما إذا كان الرسم المتحرك سيتحرك في الرسم الأولي. إذا كانت القيمة true، سيبدأ الرسم البياني من المرجع ويتحرك إلى حالته الأخيرة. النوع: منطقي افتراضي

الأحداث

عند رسم رسم بياني، يتم تنشيط حدث "جاهز" عندما يكون الرسم البياني جاهزًا لاستدعاءات الطرق الخارجية. سيشق الرسم البياني حدث animationfinish عند اكتمال عملية النقل.

الاسم
animationfinish	يتم الإطلاق عند اكتمال الرسوم المتحركة للنقل. الخصائص: بلا

أمثلة

تغييرات القيمة

   // Some raw data (not necessarily accurate)
    var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 165, 938, 522, 998, 450, 114.6],
                    ['2005/06', 135, 1120, 599, 1268, 288, 382],
                    ['2006/07', 157, 1167, 587, 807, 397, 623],
                    ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                    ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
    var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 122, 638, 722, 998, 450, 614.6],
                    ['2005/06', 100, 1120, 899, 1268, 288, 682],
                    ['2006/07', 183, 167, 487, 207, 397, 623],
                    ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                    ['2008/09', 123, 491, 829, 826, 366, 569.6]];

    // Create and populate the data tables.
    var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData1);
    data[1] = google.visualization.arrayToDataTable(rowData2);

    var options = {
      width: 400,
      height: 240,
      vAxis: {title: "Cups"},
      hAxis: {title: "Month"},
      seriesType: "bars",
      series: {5: {type: "line"}},
      animation:{
        duration: 1000,
        easing: 'out'
      },
    };
    var current = 0;
    // Create and draw the visualization.
    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
          });
      options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

      chart.draw(data[current], options);
    }
    drawChart();

    button.onclick = function() {
      current = 1 - current;
      drawChart();
    }

إضافة صفوف وإزالتها

    var options = {
      width: 400,
      height: 240,
      vAxis: {minValue:0, maxValue:100},
      animation: {
        duration: 1000,
        easing: 'in'
      }
    };

    var chart = new google.visualization.LineChart(
        document.getElementById('visualization'));
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    data.addRow(['100', 123]);
    data.addRow(['700', 17]);
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
          });
      chart.draw(data, options);
    }

    button.onclick = function() {
      if (data.getNumberOfRows() > 5) {
        data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
      }
      // Generating a random x, y pair and inserting it so rows are sorted.
      var x = Math.floor(Math.random() * 1000);
      var y = Math.floor(Math.random() * 100);
      var where = 0;
      while (where < data.getNumberOfRows() && parseInt(data.getValue(where, 0)) < x) {
        where++;
      }
      data.insertRows(where, [[x.toString(), y]]);
      drawChart();
    }
    drawChart();

إضافة أعمدة وإزالتها

    var options = {
      width: 400,
      height: 240,
      vAxis: {minValue:0, maxValue:1000},
      animation: {
        duration: 1000,
        easing: 'out'
      }
    };

    var chart = new google.visualization.ColumnChart(
        document.getElementById('visualization'));
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'A');
    data.addColumn('number', 'B');
    data.addRow(['A', 123, 40]);
    data.addRow(['B', 17, 20]);
    var addButton = document.getElementById('b1');
    var removeButton = document.getElementById('b2');
    function drawChart() {
      // Disabling the buttons while the chart is drawing.
      addButton.disabled = true;
      removeButton.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            // Enabling only relevant buttons.
            addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length;
            removeButton.disabled = (data.getNumberOfColumns() - 1) < 2;
          });
      chart.draw(data, options);
    }
    function shuffleAndDrawChart() {
      for (var i = 0; i < data.getNumberOfRows(); ++i) {
        for (var j = 1; j < data.getNumberOfColumns(); ++j) {
          var num = Math.floor(Math.random() * 1000);
          data.setValue(i, j, num);
        }
      }
      drawChart();
    }
    addButton.onclick = function() {
      data.addColumn('number', chars[data.getNumberOfColumns() - 1]);
      shuffleAndDrawChart();
    }
    removeButton.onclick = function() {
      data.removeColumn(data.getNumberOfColumns() - 1);
      shuffleAndDrawChart();
    }
    drawChart();

تغيير نافذة العرض

    var options = {
      width: 400,
      height: 240,
      animation: {
        duration: 1000,
        easing: 'in'
      },
      hAxis: {viewWindow: {min:0, max:5}}
    };

    var chart = new google.visualization.SteppedAreaChart(
        document.getElementById('visualization'));
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    var MAX = 10;
    for (var i = 0; i < MAX; ++i) {
      data.addRow([i.toString(), Math.floor(Math.random() * 100)]);
    }
    var prevButton = document.getElementById('b1');
    var nextButton = document.getElementById('b2');
    var changeZoomButton = document.getElementById('b3');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      prevButton.disabled = true;
      nextButton.disabled = true;
      changeZoomButton.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            prevButton.disabled = options.hAxis.viewWindow.min <= 0;
            nextButton.disabled = options.hAxis.viewWindow.max >= MAX;
            changeZoomButton.disabled = false;
          });
      chart.draw(data, options);
    }

    prevButton.onclick = function() {
      options.hAxis.viewWindow.min -= 1;
      options.hAxis.viewWindow.max -= 1;
      drawChart();
    }
    nextButton.onclick = function() {
      options.hAxis.viewWindow.min += 1;
      options.hAxis.viewWindow.max += 1;
      drawChart();
    }
    var zoomed = false;
    changeZoomButton.onclick = function() {
      if (zoomed) {
        options.hAxis.viewWindow.min = 0;
        options.hAxis.viewWindow.max = 5;
      } else {
        options.hAxis.viewWindow.min = 0;
        options.hAxis.viewWindow.max = MAX;
      }
      zoomed = !zoomed;
      drawChart();
    }
    drawChart();

تغيير حجم الرسم البياني

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

    function drawChart () {

      function genData () {
        var array = [];

        for (var i = 0; i < 10; i++) {
          var x = i,
              y = Math.floor(Math.random() * 50),
              z = Math.floor(Math.random() * 25);
          array.push([x, y, z]);
        }
        return array;
      }

      function doubleIt() {
        options.chartArea.height = '100%';
        options.chartArea.width = '100%';
      }

      function halveIt() {
        options.chartArea.height = '50%';
        options.chartArea.width = '50%';
      }

      function goTo50() {
        options.chartArea.left = '50%';
        options.chartArea.top = '50%';
      }

      function goTo10() {
        options.chartArea.left = '10%';
        options.chartArea.top = '10%';
      }

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');

      data.addRows(genData());

      var options = {
        height: 500,
        chartArea: {
          height: '50%',
          width: '50%',
          top: '10%',
          left: '10%'
        },
        colors: ['#ee8100', '#9575cd'],
        animation: {
          duration: 1500,
          easing: 'linear',
          startup: true
        },
        vAxis: {
          ticks: [10, 20, 30, 40, 50, 60],
          gridlines: {color: '#ccc'}
        },
        hAxis: {
          ticks: [0, 4, 8, 12],
          gridlines: {color: '#ccc'}
        },
        legend: {position: 'none'},
        enableInteractivity: false
      };

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


      chart.draw(data, options);

      var btns = document.querySelector('#btns');
      btns.onclick = function (e) {
        switch(e.target.id) {
            case "size":
              options.chartArea.height === '50%' ? doubleIt() : halveIt();
              break;
            case "slide":
              options.chartArea.left === '10%' ? goTo50() : goTo10();
        }

        chart.draw(data, options);
      }

    }