javascript - 谷歌图表 - 程序化滑块不断将两个值放在左边

Question

我制作了一个谷歌图表，我想用它来检查我网站的访问者。问题是程序化滑块在初始加载和新调用函数 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/ 您可以看到，通过调整页面大小，滑块开始在应该在的右侧值和结束的左侧值之间快速移动。是什么原因造成的，有没有办法解决它？

标签： javascriptjquerychartsgoogle-visualization

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>