Vai trò trong cột

Trang này mô tả khái niệm và cách sử dụng vai trò trong bảng dữ liệu biểu đồ.

  1. Vai trò là gì?
  2. Những vai trò nào có sẵn?
  3. Hệ phân cấp và vai trò phân biệt vai trò
  4. Chỉ định vai trò

Vai trò là gì?

Các đối tượng DataTable và DataView của Google hiện hỗ trợ vai trò của cột được chỉ định rõ ràng. Vai trò của cột mô tả mục đích của dữ liệu trong cột đó: ví dụ: một cột có thể chứa dữ liệu mô tả văn bản của chú giải công cụ, chú thích điểm dữ liệu hoặc chỉ báo không chắc chắn. Hầu hết vai trò cột áp dụng cho cột "dữ liệu" ở trước, cho dù ngay trước cột đó hay trước cột đầu tiên của nhóm cột vai trò liên tiếp. Ví dụ: bạn có thể có hai cột sau cột "dữ liệu", một cột cho "chú giải công cụ" và một cột cho "chú giải". Tuy nhiên, sau cột "domain", chúng tôi cũng thường cho phép các vai trò "annotation" và "annotationText".

Lưu ý: nếu bạn muốn kiểm soát nội dung của chú giải công cụ xuất hiện khi người dùng di chuột qua một biểu đồ, hãy xem phần Công cụ chú giải công cụ.

Ban đầu, chỉ có một vai trò có sẵn cho một cột: "domain" (miền) xác định các giá trị trục chính; và "data" (dữ liệu) giúp chỉ định chiều cao thanh, chiều rộng lát bánh, v.v. Các vai trò này được chỉ định ngầm định, dựa trên thứ tự và loại cột trong bảng. Tuy nhiên, với khả năng chỉ định rõ ràng các vai trò cột, bạn hiện có thể thêm các cột không bắt buộc cung cấp các tính năng mới, thú vị vào biểu đồ, chẳng hạn như nhãn chú thích tuỳ ý, văn bản di chuột và thanh không chắc chắn.

Nếu bạn không chỉ định rõ vai trò của một cột, thì vai trò của cột đó được suy ra theo thứ tự của cột trong bảng, theo quy cách định dạng dữ liệu của biểu đồ. Trang này cho bạn biết các vai trò mà bạn có thể chỉ định rõ ràng và cách chỉ định các vai trò đó.

Sau đây là thông tin so sánh về những việc bạn có thể làm với biểu đồ dạng đường chỉ bằng cách sử dụng các vai trò mặc định và do hệ thống dự đoán, so với các vai trò khác được chỉ định rõ ràng.

Định dạng bảng dữ liệu biểu đồ dạng đường:

  Cột 0 Cột 1 ... Cột N
Mục đích Giá trị dòng 1 ... Giá trị dòng N
Loại dữ liệu number ... number
Vai trò miền data ... data
Vai trò cột
không bắt buộc được hỗ trợ
  • chú thích
  • Chú thích văn bản
  • chú thích
  • Chú thích văn bản
  • độ chắc chắn
  • nhấn mạnh
  • khoảng thời gian
  • xác định phạm vi của thứ nguyên.
  • kiểu
  • chú giải công cụ
 ...
  • chú thích
  • Chú thích văn bản
  • độ chắc chắn
  • nhấn mạnh
  • khoảng thời gian
  • xác định phạm vi của thứ nguyên.
  • kiểu
  • chú giải công cụ

 

Biểu đồ không có vai trò cột rõ ràng Biểu đồ có vai trò cột rõ ràng

Biểu đồ này không áp dụng rõ ràng vai trò và do đó chỉ có thể sử dụng bố cục cột dữ liệu và dữ liệu cơ bản được hiển thị ở trên.

Bảng dữ liệu:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
  ['April',1000],
  ['May',  1170],
  ['June',  660],
  ['July', 1030]
]);

Biểu đồ này chỉ định rõ vai trò và các cột tùy chọn có thể được thêm vào. Biểu đồ này chứa các cột không bắt buộc cho các vai trò chú thích, chú thích, khoảng thời gian và độ chắc chắn.

  • Cột chú giải chỉ định nhãn tĩnh trong biểu đồ; ở đây, "A", "B", "C" là chú thích.
  • Cột annotationText sẽ chỉ định di chuột qua văn bản khi bạn di chuột qua chú thích (không phải điểm dữ liệu).
  • Cột khoảng thời gian chỉ định điểm trên cùng và dưới cùng của thanh I trên biểu đồ. Có ba thanh I trong biểu đồ.
  • Cột độ chắc chắn cho biết liệu dữ liệu tại điểm đó có chắc chắn hay không. Điểm dữ liệu cuối cùng không chắc chắn và do đó, đường dẫn tới điểm dữ liệu đó bị đứt.

Bảng dữ liệu:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['April',1000,  900, 1100,  'A','Stolen data', true],
    ['May',  1170, 1000, 1200,  'B','Coffee spill', true],
    ['June',  660,  550,  800,  'C','Wumpus attack', true],
    ['July', 1030, null, null, null, null, false]
]);

Vai trò nào có sẵn?

Bảng sau liệt kê tất cả vai trò mà Google Biểu đồ hỗ trợ. Không phải vai trò nào cũng được mọi loại biểu đồ hỗ trợ. Mỗi tài liệu trong biểu đồ sẽ mô tả vai trò có sẵn và vị trí tương ứng. Mỗi vai trò sẽ hiển thị theo các loại vai trò khác nhau.

Vai trò Mô tả Ví dụ:
chú thích

Văn bản sẽ hiển thị trên biểu đồ gần điểm dữ liệu liên quan. Văn bản này hiển thị mà không có bất kỳ tương tác nào của người dùng. Bạn có thể chỉ định chú thích và văn bản chú thích cho cả điểm và danh mục dữ liệu (nhãn trục).

Có hai kiểu chú thích: mặc định (text) để vẽ văn bản chú thích gần điểm được chỉ định và đường kẻ để vẽ văn bản chú thích trên một dòng phân chia vùng biểu đồ. Bạn có thể chỉ định kiểu đường kẻ bằng cách đặt tuỳ chọn biểu đồ này: annotations: {'column_id': {style: 'line'}}

Loại dữ liệu: chuỗi

Mặc định: Chuỗi trống

Dữ liệu:

label

Chữ "A" và "B" trong biểu đồ này là các chú giải. Di chuột qua chú thích để xem văn bản chú thích. Lưu ý rằng bạn phải di chuột qua chú thích (không phải điểm dữ liệu được áp dụng chú thích) để hiển thị giá trị annotationText.

Giá trị rỗng được chấp nhận cho cả ô chú thích và ô TextText; tuy nhiên, nếu bạn có giá trị annotationText, thì bạn phải có một giá trị chú thích được liên kết.
chú thích văn bản

Văn bản mở rộng để hiển thị khi người dùng di chuột qua chú thích được liên kết. Bạn có thể chỉ định chú thích và văn bản chú thích cho cả điểm dữ liệu và danh mục (nhãn trục). Nếu có cột chú thích, bạn cũng phải có một cột chú thích. Ngược lại, văn bản trong chú giải công cụ sẽ hiển thị khi người dùng di chuột qua điểm dữ liệu được liên kết trên biểu đồ.

Loại dữ liệu: chuỗi

Mặc định: Chuỗi trống
độ chắc chắn

Cho biết điểm dữ liệu có chắc chắn hay không. Cách hiển thị này phụ thuộc vào loại biểu đồ. Ví dụ: tình trạng này có thể được biểu thị bằng các đường nét đứt hoặc tô màu sọc.

Đối với biểu đồ dạng đường và biểu đồ vùng, phân đoạn giữa hai điểm dữ liệu là chắc chắn nếu và chỉ khi cả hai điểm dữ liệu đều nhất định.

Loại dữ liệu: boolean, trong đó true là chắc chắn, false là không chắc chắn.

Mặc định: true
Nhấn mạnh

Nhấn mạnh các điểm dữ liệu trong biểu đồ được chỉ định. Hiển thị dưới dạng một đường dày và/hoặc điểm lớn.

Đối với biểu đồ dạng đường và vùng, phân đoạn giữa hai điểm dữ liệu được nhấn mạnh nếu và chỉ khi cả hai điểm dữ liệu được nhấn mạnh.

Loại dữ liệu: boolean

Mặc định: false

Dữ liệu:

label: 'Year',  'Sales',     null, 'Expenses',     null
 role: domain,   data,   emphasis,     data,   emphasis
       '2004',   1000,       true,      400,      false
       '2005',   1170,       true,      460,       true
       '2006',    660,      false,     1120,       true
       '2007',   1030,      false,      540,       true

Trong biểu đồ này, chuỗi "Bán hàng" có một phân đoạn được nhấn mạnh, được chỉ định bởi cột ba, hàng một và hai. Chuỗi "Chi phí" có hai phân đoạn được nhấn mạnh, được chỉ định bởi cột thứ năm, hàng hai, ba và bốn. Lưu ý rằng việc nhấn mạnh đòi hỏi cả hai điểm giới hạn đều được nhấn mạnh.
khoảng thời gian

Cho biết phạm vi dữ liệu tiềm năng cho một điểm cụ thể. Các khoảng thời gian thường hiển thị dưới dạng chỉ báo phạm vi kiểu thanh I. Khoảng thời gian là các cột dạng số; hãy thêm các cột khoảng thời gian theo cặp, đánh dấu giá trị thấp và cao của thanh. Bạn nên thêm các giá trị khoảng thời gian vào phần tăng giá trị, từ trái sang phải.

Loại dữ liệu: số

Mặc định: Không có khoảng thời gian

Dữ liệu:

label: 'Day',  'Stock value',   null,     null
 role: domain,     data,    interval, interval
        'Mon',       38,          20,       45
        'Tue',       55,          31,       66
        'Wed',       77,          50,       80
      'Thurs',       66,          50,       77

Trong biểu đồ này, các giá trị khoảng xác định thanh I bao quanh các điểm. Các giá trị tăng từ trái sang phải. Khoảng thời gian cao nhất và thấp nhất xung quanh một điểm sẽ đánh dấu phần trên cùng và dưới cùng của thanh.

Lưu ý: để biết tất cả chi tiết về các khoảng thời gian, hãy xem phần Khoảng thời gian.

phạm vi

Cho biết một điểm nằm trong hay ngoài phạm vi. Nếu một điểm nằm ngoài phạm vi thì điểm đó sẽ bị coi nhẹ.

Đối với biểu đồ dạng đường và biểu đồ vùng, đoạn giữa hai điểm dữ liệu sẽ nằm trong phạm vi nếu một điểm cuối nằm trong phạm vi.

Loại dữ liệu: boolean, trong đó true có nghĩa là trong phạm vi.

Mặc định: true

Dữ liệu:

label: 'Year',   'Sales',    null,    'Expenses',      null
 role: domain,     data,    scope,        data,       scope
        '2004',    1000,    false,         400,        true
        '2005',    1170,    false,         460,       false
        '2006',     660,     true,        1120,       false
        '2007',    1030,     true,         540,       false

Cột phạm vi đầu tiên áp dụng cho cột dữ liệu "Bán hàng" ở bên trái. Phân đoạn đầu tiên hiển thị ngoài phạm vi vì cả hai điểm ranh giới này đều nằm ngoài phạm vi. Cột phạm vi thứ hai áp dụng cho cột dữ liệu "Chi phí" ở bên trái. Phân đoạn đầu tiên được đánh dấu là trong phạm vi vì một trong các điểm ranh giới của phạm vi đó nằm trong phạm vi; phần còn lại của đường nằm ngoài phạm vi bởi vì tất cả các điểm khác được đánh dấu là nằm ngoài phạm vi.
kiểu

Tạo kiểu cho một số thuộc tính nhất định của khía cạnh khác nhau của dữ liệu. Đó là các giá trị sau:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

Loại dữ liệu: chuỗi, trong đó nhiều kiểu có thể được áp dụng bằng cú pháp 'firstProperty: value; secondProperty: value' hoặc đặt kiểu cụ thể cho bar, line, và point bằng cách chỉ định loại và gói các thuộc tính kiểu bên trong dấu ngoặc nhọn (ví dụ: bar { //properties go here }).

Mặc định: rỗng

Dữ liệu: 

label: 'Character', 'Popularity',   'Style',
role:  domain,      data,   style,
'Hulk',             50,    'color: green',
'Captain America',  75,    'color: #0000cf;' +
                           'stroke-color: #cf001d',
'Wolverine',        90,    'opacity: 0.5;' +
                           'stroke-width: 5;' +
                           'stroke-color: #01a0ff;' +
                           'fill-color: #fff600',
'Iron Man',         60,    'color: #db9500;' +
                           'stroke-width: 10;' +
                           'stroke-color: #a30300',
'Spider Man',       100,   'bar {' +
                           'fill-color: #c8001d;' +
                           'stroke-width: 3;' +
                           'stroke-color: #1800c8}'

Trong biểu đồ này, mỗi thanh được định kiểu độc lập với các thanh khác bằng cách sử dụng vai trò cột style. Có thể đặt kiểu cho điểm, đường kẻ hoặc thanh cụ thể (xem hàng của Người nhện) hoặc nói chung, sẽ áp dụng kiểu cho tất cả các điểm, đường kẻ và thanh, tùy thuộc vào loại biểu đồ.

Lưu ý: bạn có thể xem thêm thông tin chi tiết ở nơi khác về cách tuỳ chỉnh kiểu điểm, đường và thanh. Ngoài ra, hãy xem các tuỳ chọn cho từng loại biểu đồ mà trong đó có thể chỉ định kiểu cho các loại thực thể khác, chẳng hạn như khu vực, văn bản và hộp.

chú giải công cụ

Văn bản sẽ hiển thị khi người dùng di chuột qua điểm dữ liệu được liên kết với hàng này.

Lưu ý: điều này không được hỗ trợ trong hình ảnh Biểu đồ bong bóng. Nội dung của chú giải công cụ HTML của Bubble Graph không thể tùy chỉnh.

Loại dữ liệu: chuỗi

Mặc định: Giá trị điểm dữ liệu

Dữ liệu:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

Di chuột qua các điểm dữ liệu để hiện văn bản trong chú giải công cụ. Dữ liệu chú giải công cụ được gán cho tất cả các điểm trong cả hai dòng, trong cột 3 và 5.

Lưu ý: để biết thêm thông tin chi tiết về cách tuỳ chỉnh chú giải công cụ, hãy xem nội dung Chú giải công cụ.

miền

Bạn không cần chỉ định rõ vai trò này trừ khi thiết kế biểu đồ nhiều miền (hiển thị ở đây); định dạng cơ bản của bảng dữ liệu cho phép công cụ lập biểu đồ dự đoán cột nào là cột miền. Tuy nhiên, bạn cần biết những cột nào là cột miền để nắm được mình có thể sửa đổi những cột nào khác.

Các cột miền xác định nhãn dọc theo trục chính của biểu đồ. Đôi khi, có thể dùng nhiều cột để hỗ trợ nhiều tỷ lệ trong cùng một biểu đồ.

Loại dữ liệu: Thường là chuỗi, nhưng đôi khi là số hoặc ngày

Dữ liệu: 

label: '2009,  '2009,     '2009,   '2008,    '2008    '2008
      Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300
      'Q2/09',   1170,        460,  'Q2/08',    750,      400
      'Q3/09',    660,       1120,  'Q3/08',    700,      540
      'Q4/09',   1030,        540,  'Q4/08',    820,      620

Ví dụ này minh họa biểu đồ nhiều miền. Hai cột dữ liệu đầu tiên sửa đổi miền đầu tiên ("Quý 2009") và hai cột dữ liệu cuối cùng sửa đổi miền thứ hai ("Quý 2008"). Cả hai miền đều được phủ lên cùng một tỷ lệ trục.
dữ liệu

Bạn không cần chỉ định rõ vai trò này; định dạng cơ bản của bảng dữ liệu cho phép công cụ lập biểu đồ suy luận cột nào là cột miền. Tuy nhiên, bạn cần biết những cột nào là cột dữ liệu để biết những cột nào khác có thể sửa đổi.

Các cột vai trò dữ liệu chỉ định dữ liệu chuỗi để hiển thị trong biểu đồ. Đối với hầu hết các biểu đồ, một cột = một chuỗi, nhưng có thể khác nhau tuỳ theo loại biểu đồ (ví dụ: biểu đồ tán xạ yêu cầu hai cột dữ liệu cho chuỗi đầu tiên và một cột bổ sung cho mỗi chuỗi bổ sung; biểu đồ hình nến yêu cầu bốn cột dữ liệu cho mỗi chuỗi).

Loại dữ liệu: số

  

Hệ phân cấp và khả năng kết hợp vai trò

Sơ đồ dưới đây cho thấy những cột vai trò mà bạn có thể áp dụng cho những cột vai trò khác. Tất cả các cột ngoại trừ các cột miền đều áp dụng cho phần lân cận gần nhất bên trái mà các cột đó có thể áp dụng.

Ví dụ: cột phạm vi áp dụng cho cột dữ liệu gần nhất ở bên trái; cột chú thích sẽ áp dụng cho cột chú thích gần nhất ở bên trái; cột chú thích sẽ áp dụng cho cột dữ liệu hoặc miền gần nhất ở bên trái.

Chỉ định vai trò

Vai trò được chỉ định dưới dạng thuộc tính của cột trong đối tượng DataTable. Có một số cách để tạo cột vai trò, nhưng sau đây là những cách phổ biến nhất:

Hai kỹ thuật đầu tiên vẽ biểu đồ sau:

Phương thức DataTable.addColumn

Ví dụ sau đây sẽ tạo một biểu đồ thanh có điểm đánh dấu khoảng thời gian trên 3 thanh. Các điểm đánh dấu khoảng thời gian được chỉ định bởi các cột thứ ba và thứ tư bằng cách sử dụng phương thức DataTable.addColumn().

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Month'); // Implicit domain column.
       data.addColumn('number', 'Sales'); // Implicit data column.
       data.addColumn({type:'number', role:'interval'});
       data.addColumn({type:'number', role:'interval'});
       data.addColumn('number', 'Expenses');
       data.addRows([
         ['April',1000,  900, 1100,   400],
         ['May',  1170, 1000, 1200,   460],
         ['June',  660,  550,  800,  1120],
         ['July', 1030,    ,     ,    540]
       ]);

       var chart = new google.visualization.BarChart(
                document.getElementById('visualization'));
       chart.draw(data,
          {width: 800, height: 600, title: 'Company Performance'});

Ký hiệu văn bản JavaScript

Trong giá trị cố định JSON, bạn phải chỉ định một thuộc tính p của cột có giá trị "role":"role-type". Ví dụ sau đây minh họa cách chỉ định vai trò bằng ký hiệu JavaScript. Bạn chỉ có thể thực hiện việc này tại thời điểm tạo bảng.

{"cols":[
  {"id":"","label":"Month","pattern":"","type":"string"},
  {"id":"","label":"Sales","pattern":"","type":"number"},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
  {"c":[
    {"v":"April","f":null},
    {"v":1000,"f":null},
    {"v":900,"f":null},
    {"v":1100,"f":null},
    {"v":400,"f":null}]},
  {"c":[
    {"v":"May","f":null},
    {"v":1170,"f":null},
    {"v":1000,"f":null},
    {"v":1200,"f":null},
    {"v":460,"f":null}]},
  {"c":[{"v":"June","f":null},
    {"v":660,"f":null},
    {"v":550,"f":null},
    {"v":800,"f":null},
    {"v":1120,"f":null}]},
  {"c":[
    {"v":"July","f":null},
    {"v":1030,"f":null},
    {"v":null,"f":null},
    {"v":null,"f":null},
    {"v":540,"f":null}]}],
"p":null
}

Phương thức DataView.setColumn

Khi tạo chế độ xem, bạn có thể đặt rõ vai trò của cột. Điều này rất hữu ích khi tạo một cột đã tính toán mới. Xem DataView.setColumns() để biết thêm thông tin.