日历图表

  1. Overview
  2. 简单示例
  3. 星期几
  4. 周
  5. 月
  6. 年份
  7. 正在加载
  8. 数据格式
  9. 配置选项
  10. 方法
  11. 事件
  12. 数据政策

概览

注意：JavaScript 从零开始计算月份：1 月是 0，2 月是 1，12 月是 11。如果您的日历图表相差一个月，便是原因所在。

日历图表是一种可视化图表，用于显示较长一段时间（例如几个月或几年）内的活动。如果您想说明某件商品数量如何随一周中的某一天发生变化或该数量随时间变化的趋势，最好使用它们。

在未来的 Google 图表版本中，日历图表可能会进行重大修订。

日历图表使用 SVG 或 VML（具体取决于用户浏览器）呈现在浏览器中。与所有 Google 图表一样，当用户将鼠标悬停在数据上时，日历图表会显示提示。致谢名单：我们的日历图表灵感源自 D3 日历可视化功能。

简单示例

假设我们想要展示一个运动队在整个赛季的出席人数变化情况。 对于日历图表，我们可以使用亮度来指示值，并让人们一目了然地查看趋势：

您可以将鼠标悬停在具体日期上，查看基础数据值。

如需创建日历图表，请加载 calendar 软件包，然后创建两列，一列用于日期，一列用于值。（在未来的 Google 图表版本中，将会提供用于自定义样式的第三列（可选）。）

然后，在行中填写“日期-值”对，如下所示。

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

天数

日历图表中的每个方块都代表一天。目前，您无法自定义数据单元格的颜色，但会在下一个版本的 Google 图表中更改。

如果数据值均为正值，则颜色范围将介于白色到蓝色之间，最深的蓝色表示最高值。如果存在负数据值，它们将显示为橙色，如下所示。

此日历的代码与第一种类似，只是行如下所示：

          [ 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 ],

您可以使用 calendar.cellSize 选项更改天数（“单元格”）的大小：

在这里，我们将 calendar.cellSize 更改为 10，从而缩减天数，从而将图表作为一个整体出现。 

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

您可以使用 noDataPattern 选项自定义没有数据值的日期：

在这里，我们将 color 设置为浅蓝色，将 backgroundColor 设置为稍深的阴影： 

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

您可以使用 calendar.cellColor 控制单元格边框颜色、边框宽度和不透明度：

您需要谨慎选择与 monthOutlineColor 区分开来的描边颜色，或选择较低的不透明度。以下是上图中的选项： 

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

如果您聚焦于上图中的某一天，则边框会突出显示为红色。您可以使用 calendar.focusedCellColor 选项控制该行为： 

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

周

默认情况下，一周中的各天使用从星期日到星期六的首字母进行标记。 您无法更改日期的顺序，但可以通过 calendar.daysOfWeek 选项更改所用的字母。此外，您还可以使用 calendar.dayOfWeekRightSpace 控制星期几与图表之间的内边距，也可以使用 calendar.dayOfWeekLabel 自定义文本样式：

在这里，我们更改周标签的字体，在标签和图表数据之间添加 10 像素的内边距，并以星期一为起始周。

  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',
    }
  };

月

默认情况下，月份由深灰色线条标识。您可以使用 calendar.monthOutlineColor 选项控制边框，使用 calendar.monthLabel 自定义标签字体，使用 calendar.underMonthSpace 调整标签内边距：

我们将标签字体设为深红色 12pt Times-Roman 粗体斜体，将轮廓设为相同的颜色，并留出 16 像素的内边距。未使用的月份轮廓线会设置为同一色调较浅的颜色。 

  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,
    }
  };

年份

日历图表中的年份始终位于图表的左侧边缘，并且可以使用 calendar.yearLabel 和 calendar.underYearSpace 进行自定义：

我们将年份字体设置为深绿色 32pt Times-Roman 粗体斜体，并在年份标签和图表底部之间添加 10 个像素： 

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

正在加载

google.charts.load 软件包名称为 "calendar"： 

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

该可视化图表的类名称为 google.visualization.Calendar： 

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

数据格式

行：表格中的每一行代表一个日期。

列：

  第 0 列 第 1 列 ... 第 N 列（可选）
用途： 日期 值 ... 可选角色
数据类型： 日期、日期时间或时间 number ...
角色： 网域 data ...
可选的列角色：

无

无

 ...

 

配置选项

名称
calendar.cellColor

您可以使用 calendar.cellColor 选项自定义日历日方形的边框： 

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.
    }
  }
};
类型：object
默认值：{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

日历日方形的大小：

var options = { calendar: { cellSize: 10 } };
类型：整数
默认值：16
calendar.dayOfWeekLabel

控制图表顶部周标签的字体样式：

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
类型：object
默认值：{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

周标签的右边缘与图表日期方形的左边缘之间的距离。

类型：整数
默认值：4
calendar.daysOfWeek

用于周日至周六的标签（由单个字母组成）。

类型：字符串
默认值：'SMTWTFS'
calendar.focusedCellColor

当用户将焦点移到（例如将鼠标悬停在某个日期方形上）时，日历图表将突出显示该方形。 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
类型：object
默认值：{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

月份标签的样式，例如：

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
类型：object
默认值：{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

具有数据值的月份使用此样式的边框与其他月份区分开来。

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
（另请参阅 calendar.unusedMonthOutlineColor。）
类型：object
默认值：{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

月标签底部与日期方形顶部之间的像素数： 

var options = { calendar: { underMonthSpace: 12 } };
类型：整数
默认值：6
calendar.underYearSpace

最底部的年份标签与图表底部之间的像素数：

var options = { calendar: { underYearSpace: 2 } };
类型：整数
默认值：0
calendar.unusedMonthOutlineColor

系统会使用此样式的边框来区分没有数据值的月份与其他月份。

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
（另请参阅 calendar.monthOutlineColor。）
类型：object
默认值：{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

用于指定颜色列值和颜色之间的映射或渐变比例的对象。 要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
类型：object
默认值：null
colorAxis.colors

要为可视化图表中的值指定的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如：colorAxis: {colors:['red','#004411']}。您必须具有至少两个值；渐变色将包含所有值，外加计算出的中间值，其中第一种颜色的值为最小值，最后的颜色值最高。

类型：颜色字符串数组
默认值：null
colorAxis.maxValue

如果存在，则指定图表颜色数据的最大值。此值及更高级别的颜色数据值将渲染为 colorAxis.colors 范围内的最后一种颜色。

类型：数字
默认：图表数据中颜色列的最大值
colorAxis.minValue

如果存在，则指定图表颜色数据的最小值。此值及以下值的颜色数据值将渲染为 colorAxis.colors 范围中的第一种颜色。

类型：数字
默认：图表数据中颜色列的最小值
colorAxis.values

如果存在，用于控制值与颜色的关联方式。每个值都与 colorAxis.colors 数组中的相应颜色相关联。这些值适用于图表颜色数据。根据此处指定的值的渐变进行着色。不为此选项指定值等同于指定 [minValue, maxValue]。

类型：数字数组
默认值：null
forceIFrame

在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）

类型：布尔值
默认值：false
高度

图表的高度（以像素为单位）。

类型：数字
默认值：所包含元素的高度
noDataPattern

日历图表使用条纹对角线，表示特定日期没有任何数据。您可以使用 noDataPattern.backgroundColor 和 noDataPattern.color 选项替换灰度默认值，例如：

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
类型：object
默认值：null
tooltip.isHtml

设置为 false 可使用 SVG 渲染（而非 HTML 渲染）的提示。 如需了解详情，请参阅 自定义提示内容 。

注意：饼图和气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。

类型：布尔值
默认值：true
宽度

图表的宽度，以像素为单位。

类型：数字
默认值：所包含元素的宽度

方法

方法
draw(data, options)

绘制图表。只有在 ready 事件触发后，图表才会接受进一步的方法调用。Extended description。

Return Type（返回类型）：none
getBoundingBox(id)

返回一个对象，其中包含图表元素 id 的左侧、顶部、宽度和高度。尚未记录 id 的格式（它们是事件处理脚本的返回值），以下是一些示例：

var cli = chart.getChartLayoutInterface();

图表区域的高度
cli.getBoundingBox('chartarea').height
条形图或柱形图第一个系列中第三条柱的宽度
cli.getBoundingBox('bar#0#2').width
饼图第五个楔形的边界框
cli.getBoundingBox('slice#4')
垂直（如柱形）图表的图表数据的边界框：
cli.getBoundingBox('vAxis#0#gridline')
水平（例如条形图）图表数据的边界框：
cli.getBoundingBox('hAxis#0#gridline')

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型：object
getSelection()

返回所选图表实体的数组。 可选的实体包括条形、图例条目和类别。 条形对应于数据表中的单元格、列对应于列的图例条目（行索引为 null），以及类别对应于行（列索引为 null）。 对于此图表，在任何给定时刻，只能选择一个实体。 Extended description 。

返回类型：选择元素数组
setSelection()

选择指定的图表实体。取消之前的所有选择。 可选的实体包括条形、图例条目和类别。 条形对应于数据表中的单元格、列对应于列的图例条目（行索引为 null），以及类别对应于行（列索引为 null）。 对于此图表，一次只能选择一个实体。 Extended description 。

Return Type（返回类型）：none
clearChart()

清除图表，并释放为其分配的所有资源。

Return Type（返回类型）：none

事件

名称
error

尝试渲染图表时出错时触发。

属性：id、message
onmouseover

用户将鼠标悬停在视觉实体上时触发。传回实体的行索引和日期值。如果实体没有数据表元素，则行索引返回的值为 undefined。

属性：行、日期
onmouseout

用户将鼠标远离视觉实体时触发。传回实体的行索引和日期值。如果该实体没有数据表元素，则针对行索引返回的值将为 undefined。

房源行，日期
ready

该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为该事件设置监听器，并仅在事件触发后调用监听器。

属性：无
select

当用户点击视觉实体时触发。如需了解已选择的内容，请调用 getSelection()。

属性：无

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。