Вопрос:

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

javascript google-visualization

53 просмотра

2 ответа

71 Репутация автора

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

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

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);

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

Автор: Rude Dawg Источник Размещён: 27.11.2018 07:15

Ответы (2)


0 плюса

39951 Репутация автора

метод диаграммы 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));
  }
}

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

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

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]выдаст ошибку, потому что выбор будет пустым.

Автор: WhiteHat Размещён: 27.11.2018 01:55

0 плюса

1 Репутация автора

Руд Дауг, я пытаюсь сделать то же самое и достаточно по иронии судьбы для того же кода, который вы предоставили на 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) {

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

Автор: jfaldmo Размещён: 12.06.2019 09:18
Вопросы из категории :
32x32