Biểu đồ lịch

  1. Tổng quan
  2. Ví dụ đơn giản
  3. Ngày
  4. Tuần
  5. Tháng
  6. Năm
  7. Đang tải
  8. Định dạng dữ liệu
  9. Các lựa chọn cấu hình
  10. Phương thức
  11. Sự kiện
  12. Chính sách về dữ liệu

Tổng quan

Lưu ý: JavaScript tính các tháng bắt đầu từ 0: Tháng 1 là 0, tháng 2 là 1 và tháng 12 là 11. Đây là lý do tại sao biểu đồ lịch của bạn có vẻ bị sai lệch theo một tháng.

Biểu đồ lịch là một hình ảnh trực quan dùng để thể hiện hoạt động trong một khoảng thời gian dài, chẳng hạn như tháng hoặc năm. Bạn nên sử dụng các biểu đồ này khi muốn minh hoạ sự thay đổi của một số lượng tuỳ theo ngày trong tuần hoặc xu hướng theo thời gian.

Biểu đồ lịch có thể được sửa đổi đáng kể trong các bản phát hành sau này của Google Biểu đồ.

Các biểu đồ trong Lịch được hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML, tuỳ theo lựa chọn nào phù hợp với trình duyệt của người dùng. Giống như tất cả biểu đồ của Google, biểu đồ trên lịch hiển thị chú thích khi người dùng di chuột qua dữ liệu. Và ghi công ở nơi đến hạn: biểu đồ lịch của chúng tôi được lấy cảm hứng từ hình ảnh lịch D3.

Một ví dụ đơn giản

Giả sử chúng ta muốn cho thấy sự thay đổi về số người tham dự của một đội thể thao trong suốt mùa giải. Với biểu đồ lịch, chúng ta có thể sử dụng độ sáng để biểu thị các giá trị và cho phép mọi người xem nhanh xu hướng:

Bạn có thể di chuột qua từng ngày để xem giá trị dữ liệu cơ bản.

Để tạo biểu đồ lịch, hãy tải gói calendar rồi tạo hai cột, một cột cho ngày và một cột cho giá trị. (Cột thứ ba (không bắt buộc) dùng để tạo kiểu tuỳ chỉnh sẽ có trong bản phát hành sau này trên Google Biểu đồ.)

Sau đó, điền vào các hàng của bạn các cặp ngày-giá trị như được trình bày dưới đây.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

Ngày

Mỗi ô vuông trong biểu đồ lịch đại diện cho một ngày. Hiện tại, bạn không thể tuỳ chỉnh màu của các ô dữ liệu, mặc dù màu đó sẽ thay đổi trong bản phát hành tiếp theo của Google Biểu đồ.

Nếu tất cả giá trị dữ liệu đều là số dương, các màu sẽ có khoảng từ trắng đến xanh dương, trong đó màu xanh lam đậm nhất biểu thị giá trị cao nhất. Nếu có giá trị dữ liệu âm, các giá trị đó sẽ có màu cam, như minh hoạ dưới đây.

Mã của lịch này tương tự như lịch đầu tiên, ngoại trừ các hàng sẽ có dạng như sau:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

Bạn có thể thay đổi kích thước của ngày ("ô") bằng tuỳ chọn calendar.cellSize:

Ở đây, chúng ta đã thay đổi calendar.cellSize thành 10, thu nhỏ ngày và theo đó biểu đồ nhìn chung. 

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

Bạn có thể tuỳ chỉnh ngày không có giá trị dữ liệu bằng tuỳ chọn noDataPattern:

Ở đây, chúng ta đặt color thành màu xanh dương nhạt và backgroundColor thành bóng tối hơn một chút: 

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

Bạn có thể kiểm soát màu đường viền của ô, chiều rộng và độ mờ của đường viền bằng calendar.cellColor:

Bạn cần cẩn thận chọn màu nét vẽ sẽ được phân biệt với monthOutlineColor hoặc chọn độ mờ thấp. Sau đây là các lựa chọn cho biểu đồ ở trên: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

Nếu bạn tập trung vào một ngày trong biểu đồ trên, đường viền sẽ được đánh dấu màu đỏ. Bạn có thể kiểm soát hành vi đó bằng các tuỳ chọn calendar.focusedCellColor: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

Tuần

Theo mặc định, ngày trong tuần được gắn nhãn bằng các chữ cái đầu tiên từ Chủ Nhật đến Thứ Bảy. Bạn không thể thay đổi thứ tự ngày nhưng có thể thay đổi những chữ cái được sử dụng bằng lựa chọn calendar.daysOfWeek. Ngoài ra, bạn có thể kiểm soát khoảng đệm giữa các ngày trong tuần và biểu đồ bằng calendar.dayOfWeekRightSpace và có thể tuỳ chỉnh kiểu văn bản bằng calendar.dayOfWeekLabel:

Ở đây, chúng ta thay đổi phông chữ của các nhãn của tuần, đặt khoảng đệm 10 pixel giữa các nhãn và dữ liệu biểu đồ và bắt đầu các tuần vào thứ Hai. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

Tháng

Theo mặc định, tháng được xác định bằng các đường màu xám đậm. Bạn có thể dùng tuỳ chọn calendar.monthOutlineColor để điều khiển đường viền, calendar.monthLabel để tuỳ chỉnh phông chữ của nhãn và calendar.underMonthSpace để điều chỉnh khoảng đệm của nhãn:

Chúng ta đặt phông chữ của nhãn thành kiểu in nghiêng đậm màu đỏ 12 pt Times-Roman, đặt các đường viền thành cùng màu và đặt khoảng đệm 16 pixel. Các đường viền của tháng không sử dụng được đặt thành một màu mờ hơn cùng màu. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

Năm

Năm trong biểu đồ lịch luôn ở cạnh bên trái của biểu đồ và có thể được tuỳ chỉnh bằng calendar.yearLabel và calendar.underYearSpace:

Chúng tôi đặt phông chữ của năm thành kiểu in nghiêng đậm màu xanh lục 32 pt Times-Roman và thêm 10 pixel vào giữa nhãn năm và cuối biểu đồ: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

Đang tải

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

  google.charts.load("current", {packages: ["calendar"]});

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

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

Định dạng dữ liệu

Hàng: Mỗi hàng trong bảng đại diện cho một ngày.

Cột:

  Cột 0 Cột 1 ... Cột N (không bắt buộc)
Mục đích: Ngày Giá trị ... Vai trò không bắt buộc
Loại dữ liệu: ngày, ngày giờ hoặc thời gian trong ngày number ...
Vai trò: tên miền data ...
Các vai trò trong cột không bắt buộc:

None (Không có)

None (Không có)

 ...

 

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

Tên
calendar.cellColor

Tuỳ chọn calendar.cellColor cho phép bạn tuỳ chỉnh đường viền của hình vuông ngày theo lịch: 

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
Loại: đối tượng
Mặc định: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

Kích thước của các hình vuông ngày theo lịch:

var options = { calendar: { cellSize: 10 } };
Loại: số nguyên
Mặc định: 16
calendar.dayOfWeekLabel

Kiểm soát kiểu phông chữ của nhãn tuần ở đầu biểu đồ:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Loại: đối tượng
Mặc định: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

Khoảng cách giữa cạnh phải của nhãn tuần và cạnh trái của hình vuông ngày trên biểu đồ.

Loại: số nguyên
Mặc định: 4
calendar.daysOfWeek

Các nhãn gồm một chữ cái dùng cho từ Chủ Nhật đến Thứ Bảy.

Loại: chuỗi
Mặc định: 'SMTWTFS'
calendar.focusedCellColor

Khi người dùng đặt tiêu điểm (chẳng hạn như bằng cách di chuột) lên hình vuông ngày, biểu đồ lịch sẽ làm nổi bật hình vuông đó. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Loại: đối tượng
Mặc định: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

Kiểu của nhãn tháng, ví dụ:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Loại: đối tượng
Mặc định: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

Tháng có giá trị dữ liệu được phân cách với các tháng khác bằng cách sử dụng đường viền theo kiểu này.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Xem thêm calendar.unusedMonthOutlineColor.)
Loại: đối tượng
Mặc định: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

Số lượng pixel giữa cuối nhãn tháng và đầu hình vuông ngày: 

var options = { calendar: { underMonthSpace: 12 } };
Loại: số nguyên
Mặc định: 6
calendar.underYearSpace

Số lượng pixel giữa nhãn của năm ở dưới cùng và cuối biểu đồ:

var options = { calendar: { underYearSpace: 2 } };
Loại: số nguyên
Mặc định: 0
calendar.unusedMonthOutlineColor

Tháng không có giá trị dữ liệu được phân cách với các tháng khác bằng cách sử dụng đường viền theo kiểu này. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Xem thêm calendar.monthOutlineColor.)
Loại: đối tượng
Mặc định: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

Một đối tượng chỉ định mối liên kết giữa các giá trị và màu của cột màu hoặc thang độ dốc. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Loại: đối tượng
Mặc định: rỗng
colorAxis.colors

Màu để chỉ định cho các giá trị trong hình ảnh trực quan. Một mảng chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML, ví dụ: colorAxis: {colors:['red','#004411']}. Bạn phải có ít nhất hai giá trị; độ dốc sẽ bao gồm tất cả các giá trị của bạn cùng với các giá trị trung gian được tính toán, trong đó màu đầu tiên là giá trị nhỏ nhất và màu cuối cùng là màu cao nhất.

Loại: mảng chuỗi màu
Mặc định: rỗng
colorAxis.maxValue

Nếu có, hãy chỉ định một giá trị tối đa cho dữ liệu màu trong biểu đồ. Giá trị dữ liệu màu của giá trị này trở lên sẽ được kết xuất dưới dạng màu cuối cùng trong dải ô colorAxis.colors.

Loại: số
Mặc định: Giá trị tối đa của cột màu trong dữ liệu biểu đồ
colorAxis.minValue

Nếu có, hãy chỉ định một giá trị tối thiểu cho dữ liệu màu trong biểu đồ. Giá trị dữ liệu màu của giá trị này trở xuống sẽ được kết xuất dưới dạng màu đầu tiên trong dải ô colorAxis.colors.

Loại: số
Mặc định: Giá trị tối thiểu của cột màu trong dữ liệu biểu đồ
colorAxis.values

Kiểm soát cách liên kết giá trị với màu (nếu có). Mỗi giá trị được liên kết với màu tương ứng trong mảng colorAxis.colors. Các giá trị này áp dụng cho dữ liệu màu trong biểu đồ. Việc tô màu được thực hiện theo độ dốc của các giá trị được chỉ định ở đây. Việc không chỉ định giá trị cho tuỳ chọn này tương đương với việc chỉ định [minValue, maxValue].

Loại: mảng số
Mặc định: rỗng
forceIFrame

Vẽ biểu đồ bên trong một khung cùng dòng. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.)

Loại: boolean
Mặc định: false
độ cao

Chiều cao của biểu đồ, tính bằng pixel.

Loại: số
Mặc định: chiều cao của phần tử chứa
noDataPattern

Các biểu đồ lịch sử dụng mẫu dạng đường chéo sọc để biểu thị rằng không có dữ liệu cho một ngày cụ thể. Sử dụng các tuỳ chọn noDataPattern.backgroundColor và noDataPattern.color để ghi đè các giá trị mặc định thang màu xám, ví dụ: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Loại: đối tượng
Mặc định: rỗng
tooltip.isHtml

Đặt thành false để sử dụng chú thích được kết xuất bằng SVG (thay vì kết xuất HTML). Xem phần Tuỳ chỉnh nội dung chú thích để biết thêm chi tiết.

Lưu ý: Tính năng tuỳ chỉnh nội dung chú thích HTML thông qua vai trò dữ liệu của cột chú giải công cụ không được hỗ trợ trong hình ảnh Biểu đồ hình tròn và Biểu đồ bong bóng.

Loại: boolean
Mặc định: true
chiều rộng

Chiều rộng của biểu đồ, tính bằng pixel.

Loại: số
Mặc định: chiều rộng của phần tử chứa

Phương thức

Phương thức
draw(data, options)

Vẽ biểu đồ. Biểu đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện ready. Extended description.

Loại trả lại: không có
getBoundingBox(id)

Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của phần tử biểu đồ id. Định dạng của id chưa được ghi nhận (chúng là các giá trị trả về của trình xử lý sự kiện), nhưng sau đây là một số ví dụ:

var cli = chart.getChartLayoutInterface();

Chiều cao của vùng biểu đồ
cli.getBoundingBox('chartarea').height
Chiều rộng của thanh thứ ba trong chuỗi đầu tiên của biểu đồ thanh hoặc biểu đồ cột
cli.getBoundingBox('bar#0#2').width
Hộp giới hạn của hình chêm thứ năm của biểu đồ hình tròn
cli.getBoundingBox('slice#4')
Hộp giới hạn cho dữ liệu biểu đồ của một biểu đồ dọc (ví dụ: cột):
cli.getBoundingBox('vAxis#0#gridline')
Hộp giới hạn cho dữ liệu biểu đồ của biểu đồ ngang (ví dụ: biểu đồ thanh):
cli.getBoundingBox('hAxis#0#gridline')

Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh này sau khi biểu đồ được vẽ.

Loại dữ liệu trả về: đối tượng
getSelection()

Trả về một mảng gồm các thực thể biểu đồ đã chọn. Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục. Một thanh tương ứng với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng). Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ. Extended description .

Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Huỷ mọi lựa chọn trước đó. Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục. Một thanh tương ứng với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng). Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể. Extended description .

Loại trả lại: không có
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó.

Loại trả lại: không có

Sự kiện

Tên
error

Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ.

Thuộc tính: mã nhận dạng, thông báo
onmouseover

Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Trả về chỉ mục hàng và giá trị ngày của thực thể. Nếu thực thể không có phần tử bảng dữ liệu cho mục này, giá trị được trả về cho chỉ mục hàng sẽ là undefined.

Cơ sở lưu trú: hàng, ngày
onmouseout

Được kích hoạt khi người dùng di chuột ra khỏi một thực thể trực quan. Trả về chỉ mục hàng và giá trị ngày của thực thể. Nếu thực thể không có phần tử bảng dữ liệu nào cho thực thể, giá trị được trả về cho chỉ mục hàng sẽ là undefined.

Hàng Cơ sở lưu trú, ngày
ready

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 draw và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt.

Thuộc tính: không có
select

Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục đã được chọn, hãy gọi hàm getSelection().

Thuộc tính: 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.