Rangefilter谷歌图表以小时：分钟

Question

以下是我的代码段：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);

function createTable() {
  // Create the dataset (DataTable)
  var myData = new google.visualization.DataTable();
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');
  myData.addRows([
    [new Date(2014, 6, 12), 9],    
    [new Date(2014, 6, 13), 8],    
    [new Date(2014, 6, 14), 10],    
    [new Date(2014, 6, 15), 8],    
    [new Date(2014, 6, 16), 0]
  ]);

  // Create a dashboard.
  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);

  // Create a date range slider
  var myDateSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnLabel': 'Date'
    }
  });

  // Table visualization
  var myTable = new google.visualization.ChartWrapper({
    'chartType' : 'Table',
    'containerId' : 'table_div'
  });

  // Bind myTable to the dashboard, and to the controls
  // this will make sure our table is update when our date changes
  myDashboard.bind(myDateSlider, myTable);

  // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
    'chartType' : 'LineChart',
    'containerId' : 'line_div',
  });
  
  // Bind myLine to the dashboard, and to the controls
  // this will make sure our line chart is update when our date changes
  myDashboard.bind(myDateSlider, myLine );

  myDashboard.draw(myData);
}
</script>

<div id="dashboard_div">
  <div id="control_div"><!-- Controls renders here --></div>
  <div id="line_div"><!-- Line chart renders here --></div>
  <div id="table_div"><!-- Table renders here --></div>

  <div id="control_div"><!-- Controls renders here --></div>
  <div id="line_div"><!-- Line chart renders here --></div>
  <div id="table_div"><!-- Table renders here --></div>
</div>

＆＃13;

＆＃13;

＆＃13;

le添加小时：x轴的分钟。例如：12月11日。 2014年11月11日，12月7日。 2014年11月2日，02日。 2014 11:04等因为我只有一天的数据。

我已经用纪元时间尝试了它，但它仍然没有显示hh：mm或显示错误的时间。

Answer 1

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

使用hAxis.format

的选项

这个选项只需要一个格式字符串，例如

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

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

使用DateFormat formatter格式化数据表格，例如

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

请参阅以下工作代码段...

google.charts.load('current', {
  callback: createTable,
  packages: ['controls']
});

function createTable() {
  // Create the dataset (DataTable)
  var myData = new google.visualization.DataTable();
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');
  myData.addRows([
    [new Date(2014, 6, 12), 9],
    [new Date(2014, 6, 13), 8],
    [new Date(2014, 6, 14), 10],
    [new Date(2014, 6, 15), 8],
    [new Date(2014, 6, 16), 0]
  ]);

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


  // Create a dashboard.
  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);

  // Create a date range slider
  var myDateSlider = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
      filterColumnLabel: 'Date',
      ui: {
        chartOptions: {
          hAxis: {
            format: formatPattern
          }
        }
      }
    }
  });

  // Table visualization
  var myTable = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div'
  });

  // Bind myTable to the dashboard, and to the controls
  // this will make sure our table is update when our date changes
  myDashboard.bind(myDateSlider, myTable);

  // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'line_div',
    options: {
      hAxis: {
        format: formatPattern
      }
    }
  });

  // Bind myLine to the dashboard, and to the controls
  // this will make sure our line chart is update when our date changes
  myDashboard.bind(myDateSlider, myLine );

  myDashboard.draw(myData);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="control_div"></div>
  <div id="line_div"></div>
  <div id="table_div"></div>
</div>