时间戳

首页 > 解决方案 > Google Chart：如何使用侦听器设置初始选择以进行交互

javascript - Google Chart：如何使用侦听器设置初始选择以进行交互

问题描述

我有一些代码试图在我的环境中进行操作，但无法获得最后一块。我想让图表以选择的初始值开始绘制，但我也想为用户选择的值保留侦听器。我尝试使用初始化变量来标记首次加载和随后的点击，但这似乎不起作用。

非常感谢任何帮助。

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

所以监听器工作但我想要的初始值（在图表中选择当前日期）不起作用。

标签： javascriptgoogle-visualization

解决方案

粗鲁的 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) {

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

推荐阅读