Question

我正在开设一个小班来处理谷歌图表，但由于一些奇怪的原因，我一直在

googleChart.js:86 Uncaught TypeError: this.swapChart is not a function

在页面上，我有一个带有id＆＃34; btnSwitch＆＃34;的按钮，点击该按钮会触发图表从图表视图切换到表格视图，反之亦然。这是在this.addChartSwitchListener（）中定义的，并在this.init_chart（）中调用

我可以在init方法中调用this.swapChart（），所以我必须假设问题是：

_button.addEventListener('click', this.switchChart, false);

以下是我的代码：

google.load('visualization', '1.0', {'packages': ['charteditor', 'controls']});
//google.setOnLoadCallback(drawDashboard);
var GChart = GChart || (function () {
    var _graphType;
    var _minTime;
    var _maxTime;
    var _hAxisTitle;
    var _vAxisTitle;
    var _tableData;
    var _data;
    var _dashboard;
    var _lineChart;
    var _button;
    var _showChart;

    return {
        init: function (tableData, graphType, minTime, maxTime, hAxisTitle, vAxisTitle) {
            // google charts
            //_google = google;
            _tableData = tableData;

            // load chart params 
            _graphType = graphType;
            _minTime = minTime;
            _maxTime = maxTime;
            _hAxisTitle = hAxisTitle;
            _vAxisTitle = vAxisTitle;

            // some other initialising
            this.build_googlechart();
        },
        build_googlechart: function ()
        {
            this.init_chart();

            // also tried this - with the same result.
            // google.load('visualization', '1.0', {'packages':['corechart'], 'callback': this.drawChart});
        },
        init_chart: function ()
        {
            // var data = new google.visualization.DataTable();
            _data = new google.visualization.DataTable(_tableData);

            // Create a dashboard.
            _dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

            if (_graphType === 'LineChart') {
                this.lineChart();
            } else {
                this.columnChart();
            }

            this.addChartSwitchListener();
        },
        addChartSwitchListener: function ()
        { 
            _button = document.getElementById('btnSwitch');
            _button.addEventListener('click', this.switchChart, false);
            _showChart = "Chart";
// Wait for the chart to finish drawing before calling the getImageURI() method.
            google.visualization.events.addListener(_lineChart, 'ready', function () {
                if (_showChart !== 'Table') {
                    $('.save_chart').show();
                    $('.save_chart').removeClass('disabled');
                    $('.save_chart').attr('href', _lineChart.getChart().getImageURI());
                    $('#filter_div').show();
                } else {
                    $('.save_chart').hide();
                    $('#filter_div').hide();
                }
            });
        },
        swapChart: function ()
        { 
            var chart = "Table";
            if (_showChart === "Chart") {
                chart = _graphType;
            }

            _lineChart.setChartType(chart);
            _lineChart.setOptions(this.getOptions(_showChart));
            _lineChart.draw();
        },
        switchChart: function ()
        {
            _showChart = _button.value;
            this.swapChart();

            _showChart = (_showChart === 'Table') ? 'Chart' : 'Table';
            _button.value = _showChart;
        },
        getOptions: function (chartType)
        {
            var options;
            switch (chartType) {
                case 'Chart':
                    options = {
                        backgroundColor: {
                            fill: 'transparent'
                        },
                        legend: 'right',
                        pointSize: 5,
                        crosshair: {
                            trigger: 'both'
                        },
                        hAxis: {
                        },
                        vAxis: {
                        }
                    };
                    break;
                case 'Table':
                    options = {
                        showRowNumber: true,
                        width: '100%',
                        height: '100%'
                    };
                    break;
                default:
                    options = {};
            }

            return options;
        },
        lineChart: function ()
        {
            var lineChartRangeFilter = new google.visualization.ControlWrapper({
                'controlType': 'ChartRangeFilter',
                'containerId': 'filter_div',
                'options': {
                    filterColumnIndex: 0,
                    ui: {
                        chartType: 'LineChart',
                        chartOptions: {
                            backgroundColor: {fill: 'transparent'},
                            height: '50',
                            chartArea: {
                                width: '90%'
                            }
                        }
                    }
                }
            });


            // Create a pie chart, passing some options
            _lineChart = new google.visualization.ChartWrapper({
                'chartType': "LineChart",
                'containerId': 'chart_div',
                'options': {
                    backgroundColor: {fill: 'transparent'},
                    'legend': 'right',
                    'pointSize': 5,
                    crosshair: {trigger: 'both'}, // Display crosshairs on focus and selection.
                    hAxis: {
                        title: _hAxisTitle,
                        viewWindow: {
                            min: _minTime,
                            max: _maxTime
                        },
                    },
                    vAxis: {
                        title: _vAxisTitle
                    }
                }
            });
            // Establish dependencies, declaring that 'filter' drives 'pieChart',
            // so that the pie chart will only display entries that are let through
            // given the chosen slider range.
            _dashboard.bind(lineChartRangeFilter, _lineChart);
            // Draw the dashboard. 
            _dashboard.draw(_data);
        },
        columnChart: function () {
            _lineChart = new google.visualization.ChartWrapper({
                'chartType': "ColumnChart",
                'containerId': 'chart_div',
                'dataTable': _data,
                'options': {backgroundColor: {fill: 'transparent'},
                    'legend': 'right',
                    'pointSize': 5,
                    crosshair: {trigger: 'both'}, // Display crosshairs on focus and selection.
                    hAxis: {
                        title: _hAxisTitle,
                    },
                    vAxis: {
                        title: _vAxisTitle,
                    }
                }
            });
            _lineChart.draw();
        }
    };
}());

Answer 1

这是因为您将对该方法的引用传递给addEventListener，稍后将使用window对象作为上下文调用，而不是this对象。

要推翻此行为，您可以使用多个解决方案，但这里有一个bind()：

_button.addEventListener('click', this.switchChart.bind(this), false);

在课堂上不是一个功能

1 个答案: