Rangefilter Google Charts in hours:minutes

Posted 2023-03-22

【中文标题】Rangefilter Google Charts in hours:minutes

【英文标题】：

【发布时间】：2017-10-31 10:38:34

【问题描述】：

下面是我的代码sn-p：

<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 将小时：分钟添加到 x 轴。例如：7 月 12 日。 2014 年 7 月 12 日 11:00 2014 年 7 月 12 日 11:02。 2014 11:04 etc..因为我只有一天的数据。

我已经尝试过使用纪元时间，但它仍然不显示 hh:mm 或显示错误的时间。

【参考方案1】：

首先，在图表的 x 轴上包含 hours:minutes 并进行控制

使用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);

请参阅以下工作 sn-p...

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>