Hiển thị: 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 cấu hình
  7. Phương thức
  8. Sự kiện
  9. Chính sách về dữ liệu
  10. Lưu ý

Tổng quan

Biểu đồ động cho thấy một số chỉ báo theo thời gian. Biểu đồ được hiển thị trong trình duyệt bằng Flash.

Lưu ý dành cho nhà phát triển: Do chế độ cài đặt bảo mật Flash, chế độ cài đặt này (và mọi hình ảnh trực quan dựa trên Flash) có thể không hoạt động đúng cách 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ừ URL của 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 sự cố này theo cách mô tả trên trang web của Adobe.

Ví dụ

(Lưu ý rằng mã sau đây 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 "string" 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 giá trị thời gian. Bạn có thể biểu thị thời gian ở 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: 'ngày'; giá trị phải là thực thể Date JavaScript.
    • Số tuần – Loại cột: 'string'; các giá trị phải sử dụng mẫu YYYYWww, tuân thủ ISO 8601. Ví dụ: "2008W03".
    • Quý – Loại cột: 'string'; các giá trị phải có mẫu YYYYQq, tuân thủ ISO 8601. Ví dụ: "2008Q3".
  • Các cột tiếp theo có thể thuộc loại "number" hoặc "string". Các cột số sẽ xuất hiện trong trình đơn thả xuống đối với các trục X, Y, Màu sắc và Kích thước. Các cột chuỗi sẽ chỉ xuất hiện trong trình đơn thả xuống của mục Color (Màu). Hãy xem ví dụ ở trên.

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

Bạn có thể chỉ định rằng 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à các chế độ tuỳ chỉnh chế độ xem. Để thực hiện việc này, trước tiên bạn cần tạo và hiển thị biểu đồ, sau đó thực hiện mọi thay đổi về trạng thái 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 các chế độ cài đặt này dưới dạng chuỗi và cuối cùng sử dụng chuỗi này trong mã của bạn, gán mã cho tuỳ chọn "trạng thái". Hai phần tiếp theo mô tả cách xuất và sử dụng mã trạng thái.

  1. Mở một biểu đồ đang hoạt động và đặt các chế độ 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 các mức độ mờ, thu phóng, nhật ký so với chia 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.
  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 các bước 2 đến 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 cho tham số tuỳ chọn "state" (trạng thái) trong mã của bạn, như minh hoạ dưới đây. Khi được truyền vào phương thức draw(), biểu đồ sẽ được khởi chạy tới trạng thái đã 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 cấu hình

Tên Loại Mặc định Nội dung 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 của biểu đồ tính bằng pixel.
state string none Trạng thái hiển thị ban đầu của biểu đồ. Đây là một đối tượng JSON được chuyển đổi tuần tự mô tả mức thu phóng, các kích thước được chọn, bong bóng/thực thể được chọn và các nội dung mô tả trạng thái khác. Xem phần Đặt trạng thái ban đầu để tìm hiểu cách thiết lập chế độ này.
showChartButtons boolean đúng false sẽ ẩ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.
showHeader boolean đúng false sẽ ẩn nhãn tiêu đề của các thực thể (được lấy từ nhãn của cột đầu tiên trong bảng dữ liệu).
showSelectListComponent boolean đúng false sẽ ẩn danh sách các thực thể hiển thị.
showSidePanel boolean đúng false sẽ ẩn bảng điều khiển bên phải.
showXMetricPicker boolean đúng false sẽ ẩn bộ chọn chỉ số cho x.
showYMetricPicker boolean đúng false sẽ ẩn bộ chọn chỉ số cho y.
showXScalePicker boolean đúng false sẽ ẩn bộ chọn tỷ lệ cho x.
showYScalePicker boolean đúng false sẽ ẩn bộ chọn tỷ lệ cho y.
showAdvancedPanel boolean đúng false sẽ tắt 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ề Nội dung mô tả
draw(data, options) không có Vẽ biểu đồ với các tuỳ chọn được cung cấp.
getState() string Trả về state hiện tại của sơ đồ chuyển động, được chuyển đổi tuần tự thành một chuỗi JSON. Để chỉ định trạng thái này cho biểu đồ, hãy chỉ định chuỗi này cho tuỳ chọn state trong phương thức draw(). Thuộc tính 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 Nội dung 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 đồ này đã 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à chỉ gọi các phương thức đó sau khi sự kiện được kích hoạt. Không có
thay đổi tiểu bang Người dùng đã tương tác với biểu đồ theo một cách nào đó. Hãy gọi lệnh getState() để tìm hiểu về trạng thái hiện tại của biểu đồ. Không có

Chính sách về dữ liệu

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.

Lưu ý

Do chế độ cài đặt bảo mật Flash, chế độ này (và tất cả các hình ảnh dựa trên Flash) có thể không hoạt động bình thường 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ừ URL của 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 sự cố này như mô tả trên trang web Macromedia.