日历图表

概览

注意:JavaScript 从开始统计月数:1 月为 0,2 月为 1,12 月为 11。如果您的日历图表出现一个月的偏差,那么这就是原因。

日历图表是一种可视化效果,用于显示长时间(例如几个月或几年)内的活动。如果您想要说明某些数量如何随一周中的某几天或一天中的不同趋势而变化,则推荐使用这些参数。

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

日历图表使用 SVGVML 在浏览器中显示,以适合用户浏览器的情况为准。与所有 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.yearLabelcalendar.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 ……
角色: 数据 ……
可选的列角色

……

 

配置选项

名称
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.
    }
  }
};
      
Type:对象
默认{ 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
    }
  }
};
      
Type:对象
默认{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

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

类型:整数
默认:4
calendar.daysOfWeek

星期日到星期六使用的单字母标签。

类型:字符串
默认'SMTWTFS'
calendar.focusCellColor

当用户将鼠标指针悬停在某个日期方形上时(例如将鼠标悬停在上面),日历图表会突出显示该方形。

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
      
Type:对象
默认{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

月标签的样式,例如:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
      
Type:对象
默认{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

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

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
      
(另请参阅 calendar.unusedMonthOutlineColor。)
Type:对象
默认{ 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。)
Type:对象
默认{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Type:对象
默认: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.backgroundColornoDataPattern.color 选项可替换灰度模式默认值,例如:

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
      
Type:对象
默认:null
hint.isHTML

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

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

类型:布尔值
默认:true
width

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

类型:数字
默认:包含元素的宽度

方法

方法
draw(data, options)

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

返回值类型:无
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')

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

返回值类型
getSelection()

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

返回值类型:一组选择元素
setSelection()

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

返回值类型:无
clearChart()

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

返回值类型:无

事件

名称
error

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

属性:ID、消息
onmouseover

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

属性:行、日期
onmouseout

在用户离开可见实体时触发。回传实体的行索引和日期值。如果实体没有数据表元素,则返回的行索引值为 undefined

属性行、日期
ready

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

属性:无
select

在用户点击视觉实体时触发。如需了解所选内容,请调用 getSelection()

属性:无

数据政策

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