Google Chart: как установить начальный выбор со слушателем для интерактива

Question

У меня есть код, которым я пытаюсь манипулировать в своей среде и не могу получить этот последний кусок.Я хочу, чтобы график рисовался с начальным значением, выбранным для начала, НО я также хочу оставить слушателя для выбранных пользователем значений.Я попытался использовать переменную инициализации, чтобы пометить первую загрузку и последующие щелчки, но это, похоже, не сработало.

Любая помощь очень ценится.

Date.prototype.getWeekNumber = function(){
    var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
    var dayNum = d.getUTCDay() || 7;
    d.setUTCDate(d.getUTCDate() + 4 - dayNum);
    var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    return Math.ceil((((d - yearStart) / 86400000) + 1)/7)
};

function(response) {

        var i;

        google.charts.load("current", {packages:["calendar"]});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'date', id: 'Date' });
            dataTable.addColumn({ type: 'number', id: 'Changes' });

            for(var i=0; i < response.d.Rows.length; i++){
                var row = [new Date(response.d.Rows[i][0]),response.d.Rows[i][1]];
                dataTable.addRow(row);
            }

            var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

            var options = {
                title: 'Total Alerts Triggered By Day',
                calendar: { cellSize: 25 },
                colorAxis: {colors:['#86ce76','#d61007']},
            };

            <!--Event listener starting code-->
            function selectHandler() {
                <!-- Do Some Code -->
            }

            google.visualization.events.addListener(chart, 'select', selectHandler);
            <!--End event listener-->

            <!--My Test-->
            if !(response){

            var weekNumber = (new Date()).getWeekNumber();
            var dayOfWeek = 0; <!--(new Date()).getDay();-->
            chart.setSelection([{'row':dayOfWeek,'column':weekNumber}]);
        }

        chart.draw(dataTable, options);

Так что слушатель работает, но начальныйзначение, которое я хотел бы (выберите текущую дату на графике), не работает.

Answer 1

Rude Dawg, я пытаюсь сделать то же самое и достаточно по иронии судьбы для того же кода, который вы предоставили на github.Я верю, что у меня это работает сейчас.Вот код, который я использую для этого.Надеюсь, вы сможете сопоставить этот фрагмент кода с вашим кодом

google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    selectHandler([{date: (new Date).getTime()}]);
});         


<!--Event listener starting code-->
function selectHandler(initialDate) {
    var selectedItem;
    var selection = initialDate || chart.getSelection();
    if (initialDate) {
      selectedItem = {"row":0};
    } 
    else if (selection.length > 0) {
      console.log(new Date(selection[0].date));
      selectedItem = selection[0];
    }

    if (selectedItem) {

Ключом является просто передать строку, с которой вы хотите инициализировать другие графики.

Answer 2

метод диаграммы setSelection не работает должным образом на календарной диаграмме, см. Выпуск №: 2614

, если вы используете setSelection, он будет принимать только индекс строки.

[{"row":0,"column":null}]

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

[{"date":1530748800000}]

проблема здесь, она застревает, и нет никакого способа удалить начальный выбор.
когда пользователь фактически выберет дату, getSelection вернет два выбора,
начальное значение, установленное с помощью setSelection и значение, выбранное пользователем.

[{"row":0,"column":null},{"date":1543536000000,"row":3}]

индекс строки включается в выборку, если дата присутствует в таблице данных.

см. Следующий рабочий фрагмент,
для события 'ready' на графике установлен начальный выбор.
выберите дату вручную, чтобы увидеть выбор и «застрявшее» значение.

примечание: при задании начального значения событие 'select' сработает в первом 'mouseover'.

google.charts.load('current', {
  packages:['calendar']
}).then(function () {

  var response = {d: {Rows: [
    ['11/27/2018', 5],
    ['11/28/2018', 10],
    ['11/29/2018', 15],
    ['11/30/2018', 20]
  ]}};

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'date', id: 'Date'});
  dataTable.addColumn({type: 'number', id: 'Changes'});

  for (var i = 0; i < response.d.Rows.length; i++){
    var row = [new Date(response.d.Rows[i][0]), response.d.Rows[i][1]];
    dataTable.addRow(row);
  }

  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  var options = {
    title: 'Total Alerts Triggered By Day',
    //calendar: {cellSize: 25},
    colorAxis: {colors: ['#86ce76', '#d61007']},
  };

  function selectHandler() {
    var selection = chart.getSelection();
    console.log('length', selection.length);
    if (selection.length > 0) {
      console.log(JSON.stringify(selection));
    }
  }

  google.visualization.events.addListener(chart, 'select', selectHandler);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    chart.setSelection([{row: 0}]);
  });

  chart.draw(dataTable, options);
});

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

---

вместо использования setSelection для установки начального значения,
добавление аргумента в обработчик выбора, который принимается при вызове вручную,
не будет присутствовать, когда пользователь выбирает дату.

function selectHandler(initialDate) {
  var selection = initialDate || chart.getSelection();
  if (selection.length > 0) {
    console.log(new Date(selection[0].date));
  }
}

затем вы можете вызвать обработчик выбора для события готовности.

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages:['calendar']
}).then(function () {

  var response = {d: {Rows: [
    ['11/27/2018', 5],
    ['11/28/2018', 10],
    ['11/29/2018', 15],
    ['11/30/2018', 20]
  ]}};

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'date', id: 'Date'});
  dataTable.addColumn({type: 'number', id: 'Changes'});

  for (var i = 0; i < response.d.Rows.length; i++){
    var row = [new Date(response.d.Rows[i][0]), response.d.Rows[i][1]];
    dataTable.addRow(row);
  }

  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  var options = {
    title: 'Total Alerts Triggered By Day',
    //calendar: {cellSize: 25},
    colorAxis: {colors: ['#86ce76', '#d61007']},
  };

  function selectHandler(initialDate) {
    var selection = initialDate || chart.getSelection();
    if (selection.length > 0) {
      console.log(new Date(selection[0].date));
    }
  }

  google.visualization.events.addListener(chart, 'select', selectHandler);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    selectHandler([{date: (new Date).getTime()}]);
  });

  chart.draw(dataTable, options);
});

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

---

ОБНОВЛЕНИЕ

из github, попробуйте заменить ...

var selectedItem = initialDate || chart.getSelection()[0];
if (selectedItem.length > 0) {
  console.log(new Date(selectedItem[0].date));
}

с ...

var selectedItem;
var selection = initialDate || chart.getSelection();
if (selection.length > 0) {
  console.log(new Date(selection[0].date));
  selectedItem = selection[0];
}

вы не должны использовать -> chart.getSelection()[0]

, потому что обработчик выбора будет запускаться как при выборе чего-то , так и невыбранном.
если не выбран, chart.getSelection()[0] выдаст ошибку, потому что выбор будет пустым.