Rangefilter谷歌圖表小時：分鐘

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>

樂加時：分於x軸。例如：12 jul。 2014年11月12日，12月2014 11:02，12 Jul。 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>