تجسم: نمودار حرکت

1. بررسی اجمالی
2. مثال
3. بارگذاری
4. تنظیم حالت اولیه
5. فرمت داده
6. گزینه های پیکربندی
7. مواد و روش ها
8. مناسبت ها
9. سیاست داده
10. یادداشت

بررسی اجمالی

نموداری پویا برای کشف چندین شاخص در طول زمان. نمودار با استفاده از Flash در مرورگر ارائه می شود.

نکته برای برنامه‌نویسان : به دلیل تنظیمات امنیتی Flash، این (و همه تجسم‌های مبتنی بر Flash) ممکن است هنگام دسترسی از یک مکان فایل در مرورگر به درستی کار نکند (به عنوان مثال، file:///c:/webhost/myhost/myviz.html ) به جای URL سرور وب (به عنوان مثال، http://www.myhost.com/myviz.html). این معمولاً فقط یک مشکل آزمایشی است. همانطور که در وب سایت Adobe توضیح داده شده است، می توانید بر این مشکل غلبه کنید.

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> 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}); } <span class="notranslate"><input type='submit' value="خودتان آن را در JSFiddle کد کنید" class='button'/><input type='hidden' name='title' value='Motion Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> 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}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Motion Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <span class="notranslate"><input type='submit' value="خودتان آن را در JSFiddle کد کنید" class='button'/><input type='hidden' name='title' value='Motion Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> 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}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Motion Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> 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}); }

(توجه داشته باشید که کد زیر هنگام بارگیری به عنوان یک فایل محلی کار نمی کند، باید از یک وب سرور بارگیری شود.)

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

فرمت داده

• ستون اول باید از نوع «string» باشد و حاوی نام نهادها باشد (به عنوان مثال، «سیب»، «پرتقال»، «موز» در مثال بالا).
• ستون دوم باید حاوی مقادیر زمانی باشد. زمان را می توان در هر یک از قالب های زیر بیان کرد:
  • سال - نوع ستون: "تعداد". مثال: 2008.
  • ماه، روز و سال - نوع ستون: 'تاریخ'; مقادیر باید نمونه های Date جاوا اسکریپت باشند.
  • شماره هفته - نوع ستون: 'string'; مقادیر باید از الگوی YYYYWww استفاده کنند که مطابق با ISO 8601 است. مثال: '2008W03'.
  • ربع - نوع ستون: 'رشته'; مقادیر باید دارای الگوی YYYYQq باشند که مطابق با ISO 8601 است. مثال: '2008Q3'.
• ستون های بعدی می توانند از نوع «تعداد» یا «رشته» باشند. ستون های اعداد در منوهای کشویی برای محورهای X، Y، رنگ و اندازه نشان داده می شوند. ستون های رشته ای فقط در منوی کشویی رنگ ظاهر می شوند. مثال بالا را ببینید.

تنظیم حالت اولیه

می توانید تعیین کنید که نمودار حرکت با یک حالت خاص شروع شود: یعنی مجموعه ای از موجودیت های انتخاب شده و مشاهده سفارشی سازی ها. برای انجام این کار، ابتدا باید نمودار را ایجاد و نمایش دهید، سپس هر تغییر حالتی را که می خواهید نمودار نشان دهد (مقادیر را انتخاب کنید، تنظیمات را تغییر دهید و غیره) ایجاد کنید، سپس این تنظیمات را به عنوان یک رشته صادر کنید و در نهایت از این استفاده کنید. در کد خود رشته کنید و آن را به گزینه "state" اختصاص دهید. دو بخش بعدی نحوه صادرات و سپس استفاده از کد حالت را توضیح می دهد.

1. نمودار کاری را باز کنید و تنظیماتی را که می‌خواهید ثبت کنید، تنظیم کنید. تنظیماتی که می‌توانید تعیین کنید شامل سطوح کدورت، بزرگ‌نمایی، و ثبت در مقابل مقیاس‌بندی خطی است.
2. با کلیک روی نماد آچار در گوشه سمت راست پایین نمودار، پانل تنظیمات را باز کنید.
3. روی پیوند Advanced در گوشه سمت چپ پایین کلیک کنید تا پنل Advanced به مجموعه اضافه شود.
4. پانل Advanced را باز کنید و محتویات کادر متن State را در کلیپ بورد خود کپی کنید. (توجه: به جای استفاده از منو که در مراحل 2-4 توضیح داده شده است، می توانید دکمه ای را در صفحه خود وارد کنید که getState() را فراخوانی می کند و وضعیت فعلی را در یک جعبه پیام نمایش می دهد.)
5. همانطور که در اینجا نشان داده شده است، رشته حالتی را که در مرحله قبل کپی کردید به پارامتر گزینه های "state" در کد خود اختصاص دهید. هنگامی که به متد 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	عرض نمودار بر حسب پیکسل
حالت	رشته	هیچ یک	یک حالت نمایش اولیه برای نمودار. این یک شی JSON سریالی است که سطح بزرگنمایی، ابعاد انتخاب شده، حباب ها/موجودات انتخاب شده و سایر توضیحات حالت را توصیف می کند. برای یادگیری نحوه تنظیم این حالت، به تنظیمات حالت اولیه مراجعه کنید.
دکمه های نمایش نمودار	بولی	درست است، واقعی	false دکمه های کنترل کننده نوع نمودار (حباب ها / خطوط / ستون ها) را در گوشه سمت راست بالا پنهان می کند.
نمایش سربرگ	بولی	درست است، واقعی	false برچسب عنوان موجودیت ها را پنهان می کند (برگرفته از برچسب ستون اول در جدول داده ها).
showSelectListComponent	بولی	درست است، واقعی	false لیست موجودیت های قابل مشاهده را پنهان می کند.
showSidePanel	بولی	درست است، واقعی	false پنل سمت راست را پنهان می کند.
showXMetricPicker	بولی	درست است، واقعی	false انتخابگر متریک x را پنهان می کند.
showYMetricPicker	بولی	درست است، واقعی	false انتخابگر متریک y را پنهان می کند.
showXScalePicker	بولی	درست است، واقعی	false انتخابگر مقیاس برای x را پنهان می کند.
showYScalePicker	بولی	درست است، واقعی	false انتخابگر مقیاس y را پنهان می کند.
نمایش AdvancedPanel	بولی	درست است، واقعی	false قسمت گزینه ها را در پانل تنظیمات غیرفعال می کند.

مواد و روش ها

روش	نوع برگشت	شرح
draw(data, options)	هیچ یک	نمودار را با گزینه های ارائه شده رسم می کند.
getState()	رشته	وضعیت فعلی موشنچارت را که به صورت سریال به رشته JSON تبدیل شده است، برمی گرداند. برای اختصاص این حالت به نمودار، این رشته را به گزینه state در متد draw() اختصاص دهید. این اغلب برای تعیین وضعیت نمودار سفارشی در هنگام راه اندازی به جای استفاده از حالت پیش فرض استفاده می شود.

مناسبت ها

نام	شرح	خواص
error	هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود.	شناسه، پیام
آماده	نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی روش قرعه‌کشی، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید.	هیچ یک
تغییر حالت	کاربر به نوعی با نمودار تعامل داشته است. برای اطلاع از وضعیت فعلی نمودار getState() فراخوانی کنید.	هیچ یک

سیاست داده

همه کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.

یادداشت

به دلیل تنظیمات امنیتی Flash، این (و همه تجسم‌های مبتنی بر Flash) ممکن است هنگام دسترسی از یک مکان فایل در مرورگر (مثلاً file:///c:/webhost/myhost/myviz.html) به‌درستی کار نکند. یک URL سرور وب (به عنوان مثال، http://www.myhost.com/myviz.html). این معمولاً فقط یک مشکل آزمایشی است. همانطور که در وب سایت Macromedia توضیح داده شده است، می توانید بر این مشکل غلبه کنید.