0

需要一些关于如何在谷歌图表中嵌入日历控件（如从日期和到日期）的提示，并且图表值会根据所选日期进行更改。单击按钮时图表将刷新。

下面是我用来在单个页面上显示多个图表的代码，其中数据是以 JSON 格式从数据库中获取的。

<script type="text/javascript">
    <!--

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.    
    google.setOnLoadCallback(drawChart);

    function drawChart()
    {

    // set the default options
        var options =   {
                            width: "100%",
                            height: 350, 
                            chartArea: {left:50,top:20,width:"70%",height:"70%"},
                            legend: {position: 'bottom'},
                            vAxis: {title: "" },
                            hAxis: {title: "No.of Jobs"},
                            is3D: false
                        };

    // 1st Chart-----------------------------------------------------------------------------
        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_construct.asp&id=FK_IssuedByDeptID",
            dataType:"json",
            async: false
                            }).responseText;


        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart1  =   new google.visualization.BarChart(document.getElementById('chart_OpenByFunction'));
        chart1.draw(data, options);

    // 2nd Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_construct.asp&id=FK_IssuedToDeptID",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart2  =   new google.visualization.BarChart(document.getElementById('chart_OpenToFunction'));
        chart2.draw(data, options);

    // 3rd Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_construct_status.asp&id=''",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart3  =   new google.visualization.PieChart(document.getElementById('chart_OpenByStatus'));
        chart3.draw(data, options);

    // 4th Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_reject_reasons.asp&id=''",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart4  =   new google.visualization.BarChart(document.getElementById('chart_OpenByReason'));
        chart4.draw(data, options);     


        // 5th Chart----------------------------------------------------------------------------

        var jsonData = $.ajax({
            url: "jsondata.asp?q=json_pack_type.asp&id=''",
            dataType:"json",
            async: false
                            }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        var chart5  =   new google.visualization.BarChart(document.getElementById('chart_OpenByPackType'));
        chart5.draw(data, options);

    } 
</script>

感谢你的帮助。

4

1 回答 1

0

我设法想出了一个替代方案来实现所需的输出。我应用的解决方案是

  1. 在 HTML 中创建框架集，其中第一帧显示 DatePicker 控件

  2. 提交的值由第二个框架文件捕获，并将日期作为参数传递给 GoogleChart URL。

    var jsonData = $.ajax({url: "jsondata.asp?q=json_construct.asp&id=FK_IssuedByDeptID&fdt='<%=fromDate%>'&tdt='<%=toDate%>'", dataType:"json", async : false}).responseText;

于 2012-09-19T08:50:39.843 回答