hours:minutes 中的 Rangefilter Google 个图表

Question

下面是我的代码片段：

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

le 将 hours:minutes 添加到 x 轴。例如：7 月 12 日。 2014 11:00，7 月 12 日。 2014 11:02，7 月 12 日。 2014年11:04等。因为我只有一天的数据。

我已经用纪元时间试过了，但还是不显示 hh:mm 或者显示错误的时间。

Answer 1

首先，在图表的 x 轴上包含 小时:分钟 并控制

为 hAxis.format 使用选项

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

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

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

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

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>

hours:minutes 中的 Rangefilter Google 个图表

Rangefilter Google Charts in hours:minutes

charts

dashboard

range

date-format

google-visualization