Question

我正在尝试使用连接到dataTable的图表来实现Google信息中心，

这是我的剧本

      <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方法。此外，数据中的数字将包装为字符串，这将导致PieChart出现问题。删除要修复的数字周围的引号。

带有“[object Object]不符合Control规范”错误的表的Google Chart

1 个答案: