Hình ảnh: Biểu đồ chuyển động

  1. Tổng quan
  2. Ví dụ
  3. Đang tải
  4. Đặt trạng thái ban đầu
  5. Định dạng dữ liệu
  6. Các lựa chọn về cấu hình
  7. Phương thức
  8. Sự kiện
  9. Chính sách dữ liệu
  10. Ghi chú

Tổng quan

Một biểu đồ động để khám phá một vài chỉ báo theo thời gian. Biểu đồ này được hiển thị trong trình duyệt bằng cách sử dụng Flash.

Lưu ý dành cho nhà phát triển: Do các chế độ cài đặt bảo mật Flash, nên (và mọi hình ảnh trực quan dựa trên Flash) có thể không hoạt động chính xác khi được truy cập từ một vị trí tệp trong trình duyệt (ví dụ: file:///c:/webhost/myhost/myviz.html) thay vì từ một URL máy chủ web (ví dụ: http://www.myhost.com/myviz.html). Đây thường chỉ là vấn đề kiểm thử. Bạn có thể khắc phục vấn đề này theo mô tả trên trang web của Adobe.

Ví dụ:

(Lưu ý rằng mã sau sẽ không hoạt động khi được tải dưới dạng tệp cục bộ; mã phải được tải từ máy chủ web.)

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

Đang tải

Tên gói google.charts.load là "motionchart".

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

Tên lớp của hình ảnh trực quan là google.visualization.MotionChart.

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

Định dạng dữ liệu

  • Cột đầu tiên phải thuộc loại "chuỗi" và chứa tên thực thể (ví dụ: "Táo", "Cam", "Chuối" trong ví dụ trên).
  • Cột thứ hai phải chứa các giá trị thời gian. Thời gian có thể được biểu thị dưới bất kỳ định dạng nào sau đây:
    • Năm – Loại cột: "số". Ví dụ: 2008.
    • Tháng, ngày và năm – Loại cột: 'date'; các giá trị phải là các bản sao JavaScript Date.
    • Số tuần – Loại cột: "string"; các giá trị phải dùng mẫu YYYYWW, phù hợp với tiêu chuẩn ISO 8601. Ví dụ: "2008W03".
    • Quý – Loại cột: "chuỗi"; các giá trị phải có mẫu YYYYQq, tuân theo ISO 8601. Ví dụ: "2008Q3".
  • Các cột tiếp theo có thể thuộc loại "số" hoặc "chuỗi". Các cột số sẽ xuất hiện trong trình đơn thả xuống cho các trục X, Y, Màu và Kích thước. Các chuỗi chuỗi sẽ chỉ xuất hiện trong trình đơn thả xuống dành cho Màu sắc. Hãy xem ví dụ ở trên.

Đặt trạng thái ban đầu

Bạn có thể chỉ định biểu đồ chuyển động bắt đầu bằng một trạng thái cụ thể: tức là một tập hợp các thực thể đã chọn và tuỳ chỉnh thành phần hiển thị. Để làm điều này, trước tiên bạn cần phải tạo và hiển thị biểu đồ, sau đó thực hiện bất kỳ thay đổi trạng thái nào mà bạn muốn biểu đồ hiển thị (chọn giá trị, thay đổi chế độ cài đặt, v.v.), sau đó xuất những chế độ cài đặt này dưới dạng một chuỗi và cuối cùng sử dụng chuỗi này trong mã của bạn, chỉ định chuỗi đó cho tuỳ chọn "trạng thái". Hai phần tiếp theo mô tả cách xuất, sau đó sử dụng mã trạng thái.

  1. Mở một biểu đồ đang hoạt động và đặt cài đặt mà bạn muốn chụp. Các chế độ cài đặt bạn có thể chỉ định bao gồm mức độ mờ, thu phóng và ghi nhật ký so với tỷ lệ tuyến tính.
  2. Mở bảng Cài đặt bằng cách nhấp vào biểu tượng cờ lê ở góc dưới bên phải của biểu đồ.
  3. Nhấp vào đường liên kết Advanced (Nâng cao) ở góc dưới bên trái để thêm bảng điều khiển Advanced (Nâng cao) vào tập hợp set.
  4. Mở rộng bảng điều khiển Advanced (Nâng cao) rồi sao chép nội dung của hộp văn bản State (Trạng thái) vào bảng nhớ tạm. (Lưu ý: thay vì sử dụng trình đơn như mô tả trong bước 2 – 4, bạn có thể chèn một nút trên trang để gọi getState() và hiển thị trạng thái hiện tại trong hộp thông báo.)
  5. Chỉ định chuỗi trạng thái mà bạn đã sao chép ở bước trước vào thông số tùy chọn "trạng thái" trong mã của mình, như minh họa dưới đây. Khi được truyền vào phương thức draw(), biểu đồ sẽ được khởi tạo sang trạng thái được chỉ định khi khởi động.
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);

Các lựa chọn về cấu hình

Tên Loại Mặc định Mô tả
độ cao number 300 Chiều cao của biểu đồ tính bằng pixel.
chiều rộng number 500 Chiều rộng biểu đồ tính bằng pixel.
tiểu bang chuỗi none Trạng thái hiển thị ban đầu cho biểu đồ. Đây là một đối tượng JSON được chuyển đổi tuần tự, mô tả mức thu phóng, kích thước đã chọn, bong bóng/thực thể đã chọn và các nội dung mô tả trạng thái khác. Hãy xem phần Thiết lập trạng thái ban đầu để tìm hiểu cách thiết lập.
nútShowChartButton boolean đúng false ẩn các nút kiểm soát loại biểu đồ (bong bóng / đường / cột) ở góc trên cùng bên phải.
hiển thị tiêu đề boolean đúng false ẩn nhãn tiêu đề của các thực thể (lấy từ nhãn của cột đầu tiên trong bảng dữ liệu).
showSelectListComponent boolean đúng false ẩn danh sách các thực thể hiển thị.
showSidePanel boolean đúng false ẩn bảng điều khiển bên phải.
showXMetricPicker boolean đúng false ẩn bộ chọn chỉ số cho x.
showYMetricPicker boolean đúng false ẩn bộ chọn chỉ số cho y.
showXScalePicker boolean đúng false ẩn bộ chọn tỷ lệ cho x.
showYScalePicker boolean đúng false ẩn bộ chọn tỷ lệ cho y.
showAdvancedPanel boolean đúng false sẽ vô hiệu hoá ngăn tuỳ chọn trong bảng cài đặt.

Phương thức

Phương thức Loại dữ liệu trả về Mô tả
draw(data, options) không có Vẽ biểu đồ có các tuỳ chọn được cung cấp.
getState() chuỗi Trả về trạng thái hiện tại của biểu đồ chuyển động, được chuyển đổi tuần tự thành một chuỗi JSON. Để gán trạng thái này cho biểu đồ, hãy gán chuỗi này vào tuỳ chọn state trong phương thức draw(). Trạng thái này thường dùng để chỉ định trạng thái biểu đồ tuỳ chỉnh khi khởi động, thay vì sử dụng trạng thái mặc định.

Sự kiện

Tên Mô tả Thuộc tính
error Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. mã nhận dạng, tin nhắn
sẵn sàng Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức vẽ và gọi các phương thức đó chỉ sau khi sự kiện được kích hoạt. Không
thay đổi trạng thái Người dùng đã tương tác với biểu đồ theo cách nào đó. Hãy gọi getState() để tìm hiểu trạng thái hiện tại của biểu đồ. Không

Chính sách dữ liệu

Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.

Lưu ý

Do các chế độ cài đặt bảo mật Flash, nội dung này (và mọi hình ảnh trực quan dựa trên Flash) có thể không hoạt động chính xác khi được truy cập từ một vị trí tệp trong trình duyệt (ví dụ: file:///c:/webhost/myhost/myviz.html) thay vì từ một URL máy chủ web (ví dụ: http://www.myhost.com/myviz.html). Đây thường chỉ là vấn đề về việc kiểm thử. Bạn có thể khắc phục vấn đề này như được mô tả trên trang web của Macromedia.