Charts Rangefilter谷歌图表（小时：分钟）

下面是我的代码片段：

load（'visualization'，'1'，{packages:['controls']}）；
setOnLoadCallback（createTable）；
函数createTable（）{
//创建数据集（DataTable）
var myData=new google.visualization.DataTable（）；
myData.addColumn（'date'，'date'）；
myData.addColumn（'number'，'Hours Worked'）；
myData.addRows([
[新日期（2014年6月12日）9]，
[新日期（2014年6月13日）8]，
[新日期（2014年6月14日）10]，
[新日期（2014年6月15日）8]，
[新日期（2014年6月16日），0]
]);
//创建一个仪表板。
var dash_container=document.getElementById（'dashboard_div'），
myDashboard=新的google.visualization.Dashboard（dashu容器）；
//创建日期范围滑块
var myDateSlider=new google.visualization.ControlWrapper({
“controlType”：“ChartRangeFilter”，
“集装箱船”：“控制室”，
“选项”：{
“filterColumnLabel”：“日期”
}
});
//表格可视化
var myTable=new google.visualization.ChartWrapper({
“图表类型”：“表格”，
“集装箱运输”：“表格分区”
});
//将myTable绑定到仪表板和控件
//这将确保我们的表在日期更改时更新
绑定（myDateSlider，myTable）；
//折线图可视化
var myLine=new google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“集装箱船”：“line_div”，
});
//将myLine绑定到仪表板和控件
//这将确保我们的折线图在日期更改时更新
绑定（myDateSlider，myLine）；
myDashboard.draw（myData）；
}

首先，在图表和控件的x轴上包括小时：分钟

将选项用于

hAxis.format

此选项仅采用格式字符串，例如

  hAxis: {
    format: 'dd MMM yyyy hh:mm'
  }

要在表格图表和折线图工具提示中包括小时：分钟

使用设置数据表的格式，例如

var formatDate = new google.visualization.DateFormat({
  pattern: 'dd MMM yyyy hh:mm'
});
formatDate.format(myData, 0);

请参阅以下工作片段

google.charts.load（'current'{
回调：createTable，
包：['controls']
});
函数createTable（）{
//创建数据集（DataTable）
var myData=new google.visualization.DataTable（）；
myData.addColumn（'date'，'date'）；
myData.addColumn（'number'，'Hours Worked'）；
myData.addRows([
[新日期（2014年6月12日）9]，
[新日期（2014年6月13日）8]，
[新日期（2014年6月14日）10]，
[新日期（2014年6月15日）8]，
[新日期（2014年6月16日），0]
]);
var formatPattern='dd-MMM-yyyy-hh:mm'；
var formatDate=new google.visualization.DateFormat({
模式：格式化模式
});
formatDate.format（myData，0）；
//创建一个仪表板。
var dash_container=document.getElementById（'dashboard_div'），
myDashboard=新的google.visualization.Dashboard（dashu容器）；
//创建日期范围滑块
var myDateSlider=new google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
集装箱船：“控制室”，
选项：{
filterColumnLabel:'日期'，
用户界面：{
图表选项：{
哈克斯：{
格式：formatPattern
}
}
}
}
});
//表格可视化
var myTable=new google.visualization.ChartWrapper({
chartType:'表'，
集装箱运输：“表_div”
});
//将myTable绑定到仪表板和控件
//这将确保我们的表在日期更改时更新
绑定（myDateSlider，myTable）；
//折线图可视化
var myLine=new google.visualization.ChartWrapper({
图表类型：“线条图”，
集装箱运输：“线路分区”，
选项：{
哈克斯：{
格式：formatPattern
}
}
});
//将myLine绑定到仪表板和控件
//这将确保我们的折线图在日期更改时更新
绑定（myDateSlider，myLine）；
myDashboard.draw（myData）；
}