Google图表-程序化滑块始终将两个值都放在左侧

Question

我制作了一个Google图表，用于检查我的网站的访问者。问题在于，编程滑块始终将两个值在初始加载时以及在函数drawChart（）的新调用处都放在左侧。我的代码示例：HTML：

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

JS：

google.charts.load('current', {
  'packages': ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawChart);



function drawChart() {

  var visits = ([
    ['Date', 'Views', 'Unique visitors', 'Returning visitors'],
    [new Date('2020-04-20'), 5, 1, 0],
    [new Date('2020-04-21'), 1, 1, 1],
    [new Date('2020-04-22'), 4, 2, 1],
    [new Date('2020-04-23'), 4, 1, 1],
    [new Date('2020-04-24'), 0, 0, 0],
    [new Date('2020-04-25'), 0, 0, 0],
    [new Date('2020-04-26'), 1, 1, 1],
    [new Date('2020-04-27'), 2, 1, 1],
    [new Date('2020-04-28'), 6, 2, 1],
    [new Date('2020-04-29'), 5, 1, 1],
    [new Date('2020-04-30'), 5, 2, 2],
    [new Date('2020-05-01'), 5, 1, 1],
    [new Date('2020-05-02'), 8, 2, 1],
    [new Date('2020-05-03'), 2, 1, 1],
  ]);

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('programmatic_dashboard_div'));

  // We omit "var" so that programmaticSlider is visible to changeRange.
  var programmaticSlider = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'programmatic_control_div',
    'options': {
      'filterColumnLabel': 'Date',
      'ui': {
        'labelStacking': 'vertical'
      }
    }
  });

  var programmaticChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'programmatic_chart_div',
    'options': {
      'height': 400,
      'width': '100%',
      'legend': 'right',
      'chartArea': {
        'top': 10,
        'right': 200,
        'bottom': 100,
        'left': 100,
      },
    },
  });

  var data = google.visualization.arrayToDataTable(visits);

  dashboard.bind(programmaticSlider, programmaticChart);
  dashboard.draw(data);


  //default
  programmaticSlider.setState({
    'lowValue': new Date().addDays(-7),
    'highValue': new Date()
  });
  programmaticSlider.draw();



}




$(document).ready(function() {
  $(window).resize(function() {
    drawChart();
  });
});



Date.prototype.addDays = function(days) {
  var date = new Date(this.valueOf());
  date.setDate(date.getDate() + days);
  return date;
};


function dateConvert(date) {
  var dd = String(date.getDate()).padStart(2, '0');
  var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
  var yyyy = date.getFullYear();

  return yyyy + '-' + mm + '-' + dd;
}

小提琴：https://jsfiddle.net/rz8nypef/您可以看到，通过调整页面大小，滑块将开始在应有的右值和最终值的左值之间快速移动。是什么原因造成的，有什么办法可以解决？

Answer 1

不确定确切的原因，但是...

滑块在这里绘制一次...

dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);

然后更改状态并在此处再次绘制...

programmaticSlider.setState({
  lowValue: new Date().addDays(-7),
  highValue: new Date()
});
programmaticSlider.draw();

所有在有时间完成初始抽奖之前。并且调用setState后无需绘制滑块控件可能无法正常处理。

相反，只需在控件的定义中设置初始状态...

var programmaticSlider = new google.visualization.ControlWrapper({
  controlType: 'DateRangeFilter',
  containerId: 'programmatic_control_div',
  options: {
    filterColumnLabel: 'Date',
    ui: {
      labelStacking: 'vertical'
    }
  },
  state: {
    lowValue: new Date().addDays(-7),
    highValue: new Date()
  }
});

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var visits = ([
    ['Date', 'Views', 'Unique visitors', 'Returning visitors'],
    [new Date('2020-04-20'), 5, 1, 0],
    [new Date('2020-04-21'), 1, 1, 1],
    [new Date('2020-04-22'), 4, 2, 1],
    [new Date('2020-04-23'), 4, 1, 1],
    [new Date('2020-04-24'), 0, 0, 0],
    [new Date('2020-04-25'), 0, 0, 0],
    [new Date('2020-04-26'), 1, 1, 1],
    [new Date('2020-04-27'), 2, 1, 1],
    [new Date('2020-04-28'), 6, 2, 1],
    [new Date('2020-04-29'), 5, 1, 1],
    [new Date('2020-04-30'), 5, 2, 2],
    [new Date('2020-05-01'), 5, 1, 1],
    [new Date('2020-05-02'), 8, 2, 1],
    [new Date('2020-05-03'), 2, 1, 1],
  ]);

  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: 'Date',
      ui: {
        labelStacking: 'vertical'
      }
    },
    state: {
      lowValue: new Date().addDays(-7),
      highValue: new Date()
    }
  });

  var programmaticChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'programmatic_chart_div',
    options: {
      height: 400,
      width: '100%',
      legend: 'right',
      chartArea: {
        top: 10,
        right: 200,
        bottom: 100,
        left: 100,
      },
    },
  });

  var data = google.visualization.arrayToDataTable(visits);

  dashboard.bind(programmaticSlider, programmaticChart);
  dashboard.draw(data);
}

$(document).ready(function() {
  $(window).resize(function() {
    drawChart();
  });
});

Date.prototype.addDays = function(days) {
  var date = new Date(this.valueOf());
  date.setDate(date.getDate() + days);
  return date;
};

function dateConvert(date) {
  var dd = String(date.getDate()).padStart(2, '0');
  var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
  var yyyy = date.getFullYear();

  return yyyy + '-' + mm + '-' + dd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_dashboard_div">
  <div id="programmatic_control_div"></div>
  <div id="programmatic_chart_div"></div>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>