将时间设置为范围值，而不是谷歌图表中的日期

Question

尝试使用Google图表，最后以范围滑块形式显示，并通过开发人员文档提供的几个代码片段结束。

<https://jsfiddle.net/hari41980/gsvr18hw/11/> 

现在我需要有人来帮助我如何日期范围从日期时间。

预计：expected output

问候

Answer 1

只需要设置在滑块的选项中选择所需format ...

'ui': { 
     'format': { 
     'pattern': 'h:mm a' 
     }, 
     'labelStacking': 'vertical' 
    } 

看下面的例子...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dashboard = new google.visualization.Dashboard(
 
     document.getElementById('programmatic_dashboard_div')); 
 

 
    var programmaticSlider = new google.visualization.ControlWrapper({ 
 
     'controlType': 'DateRangeFilter', 
 
     'containerId': 'programmatic_control_div', 
 
     'options': { 
 
     'filterColumnLabel': 'Time Stamp', 
 
     'ui': { 
 
      'format': { 
 
      'pattern': 'h:mm a' 
 
      }, 
 
      'labelStacking': 'vertical' 
 
     } 
 
     } 
 
    }); 
 

 
    var programmaticChart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'AreaChart', 
 
     'containerId': 'programmatic_chart_div', 
 
     'options': { 
 
     'width': 600, 
 
     'height': 300, 
 
     'legend': 'none', 
 
     } 
 
    }); 
 

 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Time Stamp', 'Bulk'], 
 
     [new Date(2014, 9, 15, 10, 30) , 5], 
 
     [new Date(2014, 9, 15, 11, 30) , 10], 
 
     [new Date(2014, 9, 15, 12, 30) , 15], 
 
     [new Date(2014, 9, 15, 13, 30) , 5], 
 
     [new Date(2014, 9, 15, 14, 30) , 10], 
 
     [new Date(2014, 9, 15, 15, 30) , 8], 
 
     [new Date(2014, 9, 15, 16, 30) , 12], 
 
     [new Date(2014, 9, 15, 17, 30) , 15], 
 
     [new Date(2014, 9, 15, 18, 30) , 25] 
 
    ]); 
 

 
    dashboard.bind(programmaticSlider, programmaticChart); 
 
    dashboard.draw(data); 
 
    }, 
 
    packages: ['corechart', 'controls'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="programmatic_control_div"></div> 
 
<div id="programmatic_chart_div"></div>