Question

我有一些代码正在尝试处理到我的环境中，而无法获得最后一部分。我想让图表绘制时选择一个初始值，但从BUT开始。我也想让监听器保留用户选择的值。我尝试使用初始化变量来标记首次加载和随后的点击，但这似乎不起作用。

非常感谢您的协助。

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

图表方法setSelection在日历图表see issue #: 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]将引发错误，因为选择将为空。

Answer 2

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

关键是只传递要用来初始化其他图形的行。

Google图表：如何使用侦听器设置初始选择以进行互动

2 个答案: