javascript - 如何在一次加载中加载多个谷歌图表，因为谷歌图表只允许加载一个包

Question

我有一个饼图，可以轻松呈现在我的页面上，但我还需要在该页面上创建一个树状图。现在 TreeMap 使用 package {'packages':['treemap']}。因为指定了只会调用一次加载 function google .charts.load()。代码看起来像这样。加载条形图和饼图，但不呈现树状图。

$(document).ready(function () {
    $("#submit").click(function () {
        $("#pages").hide();

        var datefrom = $('#fromdatecalendar').val()
        var dateto = $('#todatecalendar').val()
        var model = $("#model_name").val().toString();
        var queryObject = "";
        var queryObjectLen = "";
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.load('current', { 'packages': ['treemap'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            $.ajax({
                url: "connect.jsp",
                type: "POST",
                data: { datetype: $('#fromdatecalendar').val(), datatocal: $('#todatecalendar').val(), model: $("#model_name").val().toString() },
                success: function (datas) {
                    var jsonData = JSON.parse(datas);
                    //loadData(jsondata);
                    var data = new google.visualization.DataTable();
                    var data2 = new google.visualization.DataTable();
                    // assumes "word" is a string and "count" is a number
                    data.addColumn('string', 'CATEGORY');
                    data.addColumn('number', 'COUNT_CAT');
                    data2.addColumn('string', 'CATEGORY');
                    data2.addColumn('string', 'SUB_CATEGORY');
                    data2.addColumn('string', 'SUB_CATEGORY_2');
                    data2.addColumn('string', 'SUB_CATEGORY_3');
                    data2.addColumn('string', 'SUB_CATEGORY_4');
                    data2.addColumn('string', 'SUB_CATEGORY_5');
                    data2.addColumn('number', 'COUNT_CAT');
                    for (var i = 0; i < jsonData.length; i++) {
                        data.addRow([jsonData[i].CATEGORY, jsonData[i].COUNT_CAT]);
                    }
                    for (var j = 0; i < jsonData.length; i++) {
                        data2.addRow([jsonData[j].CATEGORY, jsonData[j].SUB_CATEGORY, jsonData[j].SUB_CATEGORY_2, jsonData[j].SUB_CATEGORY_3, jsonData[j].SUB_CATEGORY_4, jsonData[j].SUB_CATEGORY_5, jsonData[j].COUNT_CAT]);
                    }
                    //alert(data);
                    var piechart_options = {
                        title: 'Category Count',
                        backgroundColor: '#f5f5f5',
                        pieSliceText: 'value',
                        is3D: true

                    };
                    var piechart = new google.visualization.PieChart(document.getElementById('chart_div'));
                    piechart.draw(data, piechart_options);

                    var barchart_options = {
                        title: 'Category',
                        backgroundColor: '#f5f5f5',
                        legend: 'none'
                    };
                    var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
                    barchart.draw(data, barchart_options);

                    var tree = new google.visualization.TreeMap(document.getElementById('treechart_div'));

                    tree.draw(data2, {
                        minColor: '#f00',
                        midColor: '#ddd',
                        maxColor: '#0d0',
                        headerHeight: 15,
                        fontColor: 'black',
                        showScale: true
                    });
                    var showsubcat = document.getElementById("showsub");
                    showsubcat.onclick = function () {
                        var view = new google.visualization.DataView(data);
                        view.hideColumns([1]);
                        piechart.draw(view, piechart_options);
                    }


                },
                error: function (xhr, type) {
                    alert('server error occoured')
                }

            });

        }
    });
});

Answer 1

你可以像这样加载多个包...

google.charts.load('current', {'packages': ['corechart', 'treemap']});