Question

尝试使用Google图表，最后得到一个范围滑块，通过开发人员文档提供的几个代码段。

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

现在我需要有人帮助我确定从日期到TIME 的日期范围。

预期：expected output

此致

Answer 1

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

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

参见以下示例......

＆＃13;

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']
});

＆＃13;

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

＆＃13;

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

1 个答案: