Google charts - программный слайдер c продолжает ставить оба значения влево - PullRequest
Новая
       65

Google charts - программный слайдер c продолжает ставить оба значения влево

1 голос
/ 03 мая 2020

Я создал диаграмму Google, которую хочу использовать для проверки посетителей моего сайта. Проблема в том, что программный ползунок c продолжает помещать оба значения влево при начальной загрузке и при новых вызовах функции 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;
}

Fiddle: https://jsfiddle.net/rz8nypef/

Вы можете видеть, что, изменяя размеры страницы, ползунок начинает быстро перемещаться между правильным значением, где он должен быть, и левым значением, где он заканчивается. Что вызывает это и есть ли способ это исправить?

1 Ответ

1 голос
/ 04 мая 2020

точно не знаю, почему он так себя ведет,
, но ...

, когда ползунок рисуется здесь один раз ... 

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

, затем состояние меняется и нарисовать снова здесь ... 

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

все, прежде чем он успеет завершить sh начальную ничью.
и ползунок не нужно рисовать после вызова 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>
...