谷歌图表与表格给出"[object Object] does not fit the Control specification"错误

Question

我正在尝试用连接到dataTable的图形实现Google Dashboard，

这是我的脚本

      <script type="text/javascript">
            function drawVisualization(dataArray) {
                //                function drawVisualization() {
                // Prepare the data
                var data = google.visualization.DataTable(dataArray);
                // Define a Pie chart
                var pie = new google.visualization.ChartWrapper({
                    'chartType': 'PieChart',
                    'containerId': 'chart1',
                    'options': {
                        'width': 300,
                        'height': 300,
                        'legend': 'none',
                        'title': 'Donuts eaten per person',
                        'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
                        'pieSliceText': 'label'
                    },
                    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
                    // from the 'data' DataTable.
                    'view': {'columns': [0, 5]}
                });
                // Define a table
                var table = new google.visualization.ChartWrapper({
                    'chartType': 'Table',
                    'containerId': 'chart2',
                    'options': {
                        'width': '300px'
                    }
                });
                // Create a dashboard
                new google.visualization.Dashboard(document.getElementById('dashboard')).
                    // Establish bindings, declaring the both the slider and the category
                // picker will drive both charts.
                bind([pie, table]).
                    // Draw the entire dashboard.
                draw(data);
            }
        </script>
 //My dataArray looks some thing like this [["039 - EXTRACRANIAL PROCEDURES W/O CC/MCC","AL","879","29855.3481218009","5857.17519906485","2"],["039 - EXTRACRANIAL PROCEDURES W/O CC/MCC","AZ","606","33581.3151824257","7034.48184806271","4"],["039 - EXTRACRANIAL PROCEDURES W/O CC/MCC","CO","255","33554.1607857647","6911.51372542745","6"],["039 - EXTRACRANIAL PROCEDURES W/O CC/MCC","DC","47","44919.3829785106","9241.59574459574","8"],....

我不知道为什么我会犯这个错误。

Answer 1

您的问题在这里：

bind([pie, table]).

Dashboard.bind方法需要两个参数：一个控件数组和一个图表数组。第一个数组用于控件，API抛出了一个错误，因为它正在查找预期控件的图表。仪表板不支持使用没有控件的图表。如果你想绘制图表，你需要指定每个图表的dataTable参数，并分别调用包装器的绘制方法：

var pie = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart1',
    dataTable: data,
    'options': {
        'width': 300,
        'height': 300,
        'legend': 'none',
        'title': 'Donuts eaten per person',
        'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
        'pieSliceText': 'label'
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
    'view': {'columns': [0, 5]}
});
pie.draw();
// Define a table
var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    dataTable: data,
    'options': {
        'width': '300px'
    }
});
table.draw();

此外，您的DataTable构造不正确。由于您正在传递一个数据数组，因此需要使用arrayToDataTable方法：

var data = google.visualization.arrayToDataTable(dataArray);

数组中的数据缺少列标题行（应该是第一行）-您需要添加该行，或者将true作为第二个参数传递给arrayToDataTable方法。此外，数据中的数字被包装为字符串，这将导致饼图出现问题。删除要修复的数字周围的引号。