时间戳

首页 > 解决方案 > hideColumns 和 getVIewColumns 与谷歌图表

google-visualization - hideColumns 和 getVIewColumns 与谷歌图表

问题描述

我正在尝试在 columnChart 中显示/隐藏列，但事情没有按预期工作。

这是我的图表（效果很好）：

function drawGraph() {
        $.ajax({        
            type: "POST",
            url: "./functions.php",
                data: { action: 'draw_bar_chart'
            },
            dataType: 'json',
            success: function(jsonData) {
                data_chart = new google.visualization.DataTable(jsonData[0]['data']);
                var options = jsonData[1]['options'];

                // Instantiate and draw the chart
                chartColumn = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
                data_chart.getViewColumns();
                chartColumn.draw(data_chart, options);
            }
        });
    }

然而，getViewColumns回报data_chart.getViewColumns is not a function

这就是我打算在工作后隐藏按钮的方式getViewColumns

$('.toggle_button').click(function () {
            data_chart.hideColumns([1]); // To be adjusted
            chart.draw(data_chart, options);
        }
    );

标签： google-visualization

解决方案

以下两种方法都是DataView 类的成员... 

getViewColumns()
hideColumns(columnIndexes)

并且不存在于DataTable 类中...

要更正，您可以将数据表转换为数据视图... 

data_chart = new google.visualization.DataTable(jsonData[0]['data']);

// convert data table to data view
data_chart = new google.visualization.DataView(data_chart);

var options = jsonData[1]['options'];

// Instantiate and draw the chart
chartColumn = new google.visualization.ColumnChart(document.getElementById('chart_div'));
data_chart.getViewColumns();
chartColumn.draw(data_chart, options);

推荐阅读