概览
注意: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 | …… | |
角色: | 域 | 数据 | …… | |
可选的列角色: | 无 |
无 |
…… |
配置选项
名称 | |
---|---|
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 颜色字符串,例如: 类型:颜色字符串数组
默认:null
|
colorAxis.maxValue |
如果存在,请指定图表颜色数据的最大值。此值及以上的颜色值将呈现为 类型:数字
默认:图表数据中颜色列的最大值
|
colorAxis.minValue |
如果存在,请指定图表颜色数据的最小值。此值及更低的颜色值将呈现为 类型:数字
默认:图表数据中颜色列的最小值
|
colorAxis.values |
如果存在,则控制值如何与颜色相关联。每个值都与 类型:数字数组
默认:null
|
forceIFrame |
在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。 类型:布尔值
默认:false
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认:包含元素的高度
|
noDataPattern |
日历图表使用条纹对角线模式来表明特定日期没有数据。使用 noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } Type:对象
默认:null
|
hint.isHTML |
设置为 注意:饼图和气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型:布尔值
默认:true
|
width |
图表的宽度(以像素为单位)。 类型:数字
默认:包含元素的宽度
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。图表仅在 返回值类型:无
|
getBoundingBox(id) |
返回一个对象,包含图表元素
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回值类型:
|
getSelection() |
返回一组选定图表实体。
可选择的实体包括条形、图例条目和类别。
柱形对应于数据表中的单元格、列的图例条目(行索引为 null),以及行的类别(列索引为 null)。
在此图表中,在任何时候都只能选择一个实体。
返回值类型:一组选择元素
|
setSelection() |
选择指定的图表实体。取消之前选择的所有内容。
可选择的实体包括条形、图例条目和类别。
柱形对应于数据表中的单元格、列的图例条目(行索引为 null),以及行的类别(列索引为 null)。
对于此图表,一次只能选择一个实体。
返回值类型:无
|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
事件
名称 | |
---|---|
error |
尝试渲染图表出错时触发。 属性:ID、消息
|
onmouseover |
用户将鼠标放在视觉实体上时触发。回传实体的行索引和日期值。如果实体没有数据表元素,则返回的行索引值为 属性:行、日期
|
onmouseout |
在用户离开可见实体时触发。回传实体的行索引和日期值。如果实体没有数据表元素,则返回的行索引值为 属性行、日期
|
ready |
此图表已准备好进行外部方法调用。如果您想与图表交互,并在绘制后调用方法,则应在调用 属性:无
|
select |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。