如何显示选项卡时绘制谷歌图表？ [英] How to draw a google chart when a tab is showed?

问题描述

Google图表不能绘制在隐藏的容器上。人们对此提出了一些解决方法：

• 绘制所有图表，然后隐藏div。


• 绘制每一个图表都是按需提供的。


• 使用可见性：隐藏而不是显示：无。





I






 < script type = 文本/ JavaScript的 > 
 $（'＃Tab2'）。click（function（e）{
 drawChart（）; 
}）; 
< / script> 
  




我只想在点击标签。是否可能？





更新：



 < script type = 文本/ JavaScript的 > 
 google.load（'visualization'，'1'，{packages：['controls']}）; 
 google.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'date'，'Período'）; 
 data.addColumn（'number'，'TOTAL'）; 
 data.addColumn（'number'，'FECHADOS'）; 
 data.addColumn（'number'，'EM ABERTO'）; 
 
 data.addRows（[
 
 [new Date（2014，3），16，13，3]，
 [new Date（2014，2）， 34，30，4]，
 [新日期（2014,1），33,30,3]，
 [新日期（2014,0），26,19,7]，
 [新日期（2013,11），26,23,3]，
 [新日期（2013,10），43,40,3]，
 [新日期（2013,9）， [新日期（2013,8），41,40,1]，
 [新日期（2013,7），42,40,2]，
 [新日期（2013,6），31,31,0]，
 [新日期（2013,5），24,23,1]，
 [新日期（2013,4）， 29,29,0]，
 [新日期（2013,3），37,37,0]，
 [新日期（2013,2），39,39,0]，
 [new Date（2013,1），29,29,0]，
 [new Date（2013，0），42，42，0]，
 [new Date（2012，11）， 23，23，0]，
 [new Date（2012，10），26，26，0] ，
 [new Date（2012，9），32，32，0]，
 [new Date（2012，8），30，30，0]，
 [new Date（2012 ，7，31，31，0]，
 [新日期（2012,6），35,35,0]，
 [新日期（2012,5），40,40,0] ，
 [new Date（2012，4），44，44，0]，
 [new Date（2012，3），26，26，0]，
 [new Date（2012 ，2），19，19，0]，
 [new Date（2012,1），27,27,0]，
 [new Date（2012，0），21，21，0] ，
 [new Date（2011，11），24，24，0]，
 [new Date（2011，10），19，19，0]，
 [new Date（2011 ，9），21，21，0]，
 [new Date（2011，8），16，16，0] 
]）; 
 
 var dateFormat = new google.visualization.DateFormat（{pattern：'MMM / y'}）; 
 dateFormat.format（data，0）; 
 $ b $ var rangeFilter = new google.visualization.ControlWrapper（{
 controlType：'ChartRangeFilter'，
 containerId：'range_filter_div'，
 options：{
 filterColumnIndex：0，
 ui：{
 chartOptions：{
 height：50，
 fontName：[Roboto Condensed]，
 fontSize：['13'] ，
 backgroundColor：'#FFFFFF'，
 width：'85％'，//在图表和控件中必须是相同的
 chartArea：{
 width：' 85％'//在图表和控件中必须是相同的
}，
 hAxis：{
格式：'MMM / y'
 } 
}，
 chartView：{
列：[0，1] 
} 
} 
}，
状态：{
范围：{
 start：new Date（2013，3），
 end：new Date（2014，3）
} 
} 
}）; 
 var chart = new google.visualization.ChartWrapper（{
 chartType：'AreaChart'，
 containerId：'chart_div'，
 options：{
 chartArea：{
 width：'85％'，
 height：'50％'
}，
 width：'85％'，//在图表和控件中必须是相同的
 height：300，
 fontName：[Roboto Condensed]，
 backgroundColor：'#FFFFFF'，
 colors：['＃5cb85c'，'＃e0fde0'，' ＃d9534f']，
 curveType：['none']，
 fontSize：['13']，
 hAxis：{
 title：'Período'，
 titleTextStyle：{
 italic：false，
 color：'black'，
 fontSize：15 
 }，
格式：'MMM / y'
}，
图例：{
位置：'right'，
 textStyle：{
 color：'黑色'，
 fontSize：12 
} 
}，
 lineWidth：2，
 pointSize：5，
 tooltip：{
 textStyle： {
 color：'Black'
}，
 showColorCode：false，
} 
} 
}）; 
 
 var dash = new google.visualization.Dashboard（document.getElementById（'dashboard'））; 
 dash.bind（[rangeFilter]，[chart]）; 
 dash.draw（data）; 
 $ b $（document）.ready（function（）{
 $（window）.resize（function（）{
 drawChart（）; 
}）; 
}）; 
} 
 
< / script> 
 
 
 
< script type =text / javascript> 
 google.load（'visualization'，'1'，{packages：['controls']}）; 
 google.setOnLoadCallback（drawChart_a）; 
 
函数drawChart_a（）{
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'date'，'Período'）; 
 data.addColumn（'number'，'ABERTOS'）; 
 data.addColumn（'number'，'FECHADOS'）; 
 data.addColumn（'number'，'BACKLOG'）; 
 
 data.addRows（[
 
 [new Date（2014，3），16，13，3]，
 [new Date（2014，2）， 34，30，4]，
 [新日期（2014,1），33,30,3]，
 [新日期（2014,0），26,19,7]，
 [新日期（2013,11），26,23,3]，
 [新日期（2013,10），43,40,3]，
 [新日期（2013,9）， [新日期（2013,8），41,40,1]，
 [新日期（2013,7），42,40,2]，
 [新日期（2013,6），31,31,0]，
 [新日期（2013,5），24,23,1]，
 [新日期（2013,4）， 29,29,0]，
 [新日期（2013,3），37,37,0]，
 [新日期（2013,2），39,39,0]，
 [new Date（2013,1），29,29,0]，
 [new Date（2013，0），42，42，0]，
 [new Date（2012，11）， 23，23，0]，
 [new Date（2012，10），26，26，0] ，
 [new Date（2012，9），32，32，0]，
 [new Date（2012，8），30，30，0]，
 [new Date（2012 ，7，31，31，0]，
 [新日期（2012,6），35,35,0]，
 [新日期（2012,5），40,40,0] ，
 [new Date（2012，4），44，44，0]，
 [new Date（2012，3），26，26，0]，
 [new Date（2012 ，2），19，19，0]，
 [new Date（2012,1），27,27,0]，
 [new Date（2012，0），21，21，0] ，
 [new Date（2011，11），24，24，0]，
 [new Date（2011，10），19，19，0]，
 [new Date（2011 ，9），21，21，0]，
 [new Date（2011，8），16，16，0] 
]）; 
 
 var dateFormat = new google.visualization.DateFormat（{pattern：'MMM / y'}）; 
 dateFormat.format（data，0）; 
 $ b $ var rangeFilter = new google.visualization.ControlWrapper（{
 controlType：'ChartRangeFilter'，
 containerId：'range_filter_div_a'，
 options：{
 filterColumnIndex：0，
 ui：{
 chartOptions：{
 height：50，
 fontName：[Roboto Condensed]，
 fontSize：['13'] ，
 backgroundColor：'#FFFFFF'，
 width：'85％'，//在图表和控件中必须是相同的
 chartArea：{
 width：' 85％'//在图表和控件中必须是相同的
}，
 hAxis：{
格式：'MMM / y'
 } 
}，
 chartView：{
列：[0，1] 
} 
} 
}，
状态：{
范围：{
 start：new Date（2013，3），
 end：new Date（2014，3）
} 
} 
}）; 
 var chart = new google.visualization.ChartWrapper（{
 chartType：'AreaChart'，
 containerId：'chart_div_a'，
 options：{
 chartArea：{
 width：'85％'，
 height：'50％'
}，
 width：'85％'，//在图表和控件中必须是相同的
 height：300，
 fontName：[Roboto Condensed]，
 backgroundColor：'#FFFFFF'，
 colors：['＃5cb85c'，'＃e0fde0'，' ＃d9534f']，
 curveType：['none']，
 fontSize：['13']，
 hAxis：{
 title：'Período'，
 titleTextStyle：{
 italic：false，
 color：'black'，
 fontSize：15 
 }，
格式：'MMM / y'
}，
图例：{
位置：'right'，
 textStyle：{
 color：'黑色'，
 fontSize：12 
} 
}，
 lineWidth：2，
 pointSize：5，
 tooltip：{
 textStyle： {
 color：'Black'
}，
 showColorCode：false，
} 
} 
}）; 
 
 var dash = new google.visualization.Dashboard（document.getElementById（'dashboard_a'））; 
 dash.bind（[rangeFilter]，[chart]）; 
 dash.draw（data）; 
 $ b $（document）.ready（function（）{
 $（window）.resize（function（）{
 drawChart_a（）; 
}）; 
}）; 
} 
 
< / script> 
 
< div class =tabbable top-margin-mediumstyle =padding-right：15px; padding-left：15px;> 
< ul class =nav nav-tabsdata-tabs =tabs> 
< li class =active> 
< a class =text-mutedhref =＃Groupdata-toggle =tab> tab1< / a> 
< / li> 
< li class => 
< a class =text-mutedhref =＃Newdata-toggle =tab> tab2< / a> 
< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-pane activeid =Groupstyle =padding-top：20px; padding-right：20px; padding-left：20px;> 
< div id =dashboard> 
< div id =chart_divstyle =width：100％;>< / div> 
< div id =range_filter_divstyle =width：100％; padding-bottom：20px;>< / div> 
< / div> 
< / div> 
< div class =tab-paneid =Newstyle =padding-top：20px; padding-right：20px; padding-left：20px;> 
< div id =dashboard_a> 
< script type =text / javascript> 
 $（'＃New'）。click（function（e）{
 drawChart_a（）; 
}）; 
< / script> 
< div id =chart_div_astyle =width：100％;>< / div> 
< div id =range_filter_div_astyle =width：100％; padding-bottom：20px;>< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  




解决方案

将您的事件处理函数移入绘图函数中，您的仪表板而不是再次调用绘图函数：
$ b $ pre $ 函数drawChart（）{
// ...图表代码

函数redraw（）{
dash.draw（data）;
}

$（window）.resize（redraw）;
$（'＃Group_link'）。click（redraw）;

函数drawChart_a（）{
// ...图表代码

函数redraw（）{
dash.draw（data）;
}

$（window）.resize（redraw）;
$（'＃New_link'）。click（redraw）;
}


您需要分配id的Group_link和New_link您决定调用它们）到您的标签链接，以便它们正确触发：



 < li class =active> 
< a class =text-mutedid =Group_linkhref =＃Groupdata-toggle =tab> tab1< / a> 
< / li> 
< li class => 
< a class =text-mutedid =New_linkhref =＃Newdata-toggle =tab> tab2< / a> 
< / li> 
  




Google Charts cannot be drawn on a container that is hidden. People suggests few workarounds for this:

• Draw all the charts then hide the divs.
• Draw each chart on demand.
• Use visibility:hidden instead of display:none.

I am using the following code, but it is not working 100%:

<script type="text/javascript">
$('#Tab2').click(function (e) {
    drawChart();
});
</script>

I would like to render the chart only when I click in the tab. Is it possible?

Update:

<script type="text/javascript">
        google.load('visualization', '1', {packages: ['controls']});
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'Período');
            data.addColumn('number', 'TOTAL');
            data.addColumn('number', 'FECHADOS');
            data.addColumn('number', 'EM ABERTO');

            data.addRows([

                [new Date(2014, 3), 16, 13, 3],
                [new Date(2014, 2), 34, 30, 4],
                [new Date(2014, 1), 33, 30, 3],
                [new Date(2014, 0), 26, 19, 7],
                [new Date(2013, 11), 26, 23, 3],
                [new Date(2013, 10), 43, 40, 3],
                [new Date(2013, 9), 38, 34, 4],
                [new Date(2013, 8), 41, 40, 1],
                [new Date(2013, 7), 42, 40, 2],
                [new Date(2013, 6), 31, 31, 0],
                [new Date(2013, 5), 24, 23, 1],
                [new Date(2013, 4), 29, 29, 0],
                [new Date(2013, 3), 37, 37, 0],
                [new Date(2013, 2), 39, 39, 0],
                [new Date(2013, 1), 29, 29, 0],
                [new Date(2013, 0), 42, 42, 0],
                [new Date(2012, 11), 23, 23, 0],
                [new Date(2012, 10), 26, 26, 0],
                [new Date(2012, 9), 32, 32, 0],
                [new Date(2012, 8), 30, 30, 0],
                [new Date(2012, 7), 31, 31, 0],
                [new Date(2012, 6), 35, 35, 0],
                [new Date(2012, 5), 40, 40, 0],
                [new Date(2012, 4), 44, 44, 0],
                [new Date(2012, 3), 26, 26, 0],
                [new Date(2012, 2), 19, 19, 0],
                [new Date(2012, 1), 27, 27, 0],
                [new Date(2012, 0), 21, 21, 0],
                [new Date(2011, 11), 24, 24, 0],
                [new Date(2011, 10), 19, 19, 0],
                [new Date(2011, 9), 21, 21, 0],
                [new Date(2011, 8), 16, 16, 0]
            ]); 

        var dateFormat = new google.visualization.DateFormat({pattern: 'MMM/y'});
            dateFormat.format(data, 0);

        var rangeFilter = new google.visualization.ControlWrapper({
            controlType: 'ChartRangeFilter',
            containerId: 'range_filter_div',
                options: {
                    filterColumnIndex: 0,
                    ui: {
                        chartOptions: {
                            height: 50,
                            fontName: ["Roboto Condensed"],
                            fontSize: ['13'],
                            backgroundColor: '#FFFFFF',
                            width: '85%', // must be the same in both the chart and the control
                                chartArea: {
                                    width: '85%' // must be the same in both the chart and the control
                                },
                            hAxis: {
                                format: 'MMM/y'
                                }
                            },
                        chartView: {
                            columns: [0, 1]
                                }
                            }
                        },
                        state: {
                            range: {
                            start: new Date(2013, 3),
                            end: new Date(2014, 3)
                                }
                            }
                        });
        var chart = new google.visualization.ChartWrapper({
            chartType: 'AreaChart',
            containerId: 'chart_div',
                options: {
                    chartArea: {
                        width: '85%',
                        height: '50%'
                        },
                width: '85%', // must be the same in both the chart and the control
                height: 300,
                fontName: ["Roboto Condensed"],
                backgroundColor: '#FFFFFF',
                colors: ['#5cb85c','#e0fde0', '#d9534f'],
                curveType: ['none'],
                fontSize: ['13'],
            hAxis: {
                title: 'Período', 
                titleTextStyle: {
                    italic: false,
                    color: 'black',
                    fontSize: 15
                    },
                format: 'MMM/y'
                },
                legend: {
                    position: 'right',
                    textStyle: {
                    color: 'black',
                    fontSize: 12
                    }
                },
                lineWidth: 2,
                pointSize: 5,
            tooltip: {
                textStyle: {
                    color: 'Black'
                    },
                showColorCode: false,
                }
            }
        });

        var dash= new google.visualization.Dashboard(document.getElementById('dashboard'));
        dash.bind([rangeFilter], [chart]);
        dash.draw(data);

        $(document).ready(function () {
            $(window).resize(function(){
                drawChart();
            });
        });
    }

</script>



<script type="text/javascript">
        google.load('visualization', '1', {packages: ['controls']});
        google.setOnLoadCallback(drawChart_a);

        function drawChart_a() {
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'Período');
            data.addColumn('number', 'ABERTOS');
            data.addColumn('number', 'FECHADOS');
            data.addColumn('number', 'BACKLOG');

            data.addRows([

                [new Date(2014, 3), 16, 13, 3],
                [new Date(2014, 2), 34, 30, 4],
                [new Date(2014, 1), 33, 30, 3],
                [new Date(2014, 0), 26, 19, 7],
                [new Date(2013, 11), 26, 23, 3],
                [new Date(2013, 10), 43, 40, 3],
                [new Date(2013, 9), 38, 34, 4],
                [new Date(2013, 8), 41, 40, 1],
                [new Date(2013, 7), 42, 40, 2],
                [new Date(2013, 6), 31, 31, 0],
                [new Date(2013, 5), 24, 23, 1],
                [new Date(2013, 4), 29, 29, 0],
                [new Date(2013, 3), 37, 37, 0],
                [new Date(2013, 2), 39, 39, 0],
                [new Date(2013, 1), 29, 29, 0],
                [new Date(2013, 0), 42, 42, 0],
                [new Date(2012, 11), 23, 23, 0],
                [new Date(2012, 10), 26, 26, 0],
                [new Date(2012, 9), 32, 32, 0],
                [new Date(2012, 8), 30, 30, 0],
                [new Date(2012, 7), 31, 31, 0],
                [new Date(2012, 6), 35, 35, 0],
                [new Date(2012, 5), 40, 40, 0],
                [new Date(2012, 4), 44, 44, 0],
                [new Date(2012, 3), 26, 26, 0],
                [new Date(2012, 2), 19, 19, 0],
                [new Date(2012, 1), 27, 27, 0],
                [new Date(2012, 0), 21, 21, 0],
                [new Date(2011, 11), 24, 24, 0],
                [new Date(2011, 10), 19, 19, 0],
                [new Date(2011, 9), 21, 21, 0],
                [new Date(2011, 8), 16, 16, 0]
            ]); 

        var dateFormat = new google.visualization.DateFormat({pattern: 'MMM/y'});
            dateFormat.format(data, 0);

        var rangeFilter = new google.visualization.ControlWrapper({
            controlType: 'ChartRangeFilter',
            containerId: 'range_filter_div_a',
                options: {
                    filterColumnIndex: 0,
                    ui: {
                        chartOptions: {
                            height: 50,
                            fontName: ["Roboto Condensed"],
                            fontSize: ['13'],
                            backgroundColor: '#FFFFFF',
                            width: '85%', // must be the same in both the chart and the control
                                chartArea: {
                                    width: '85%' // must be the same in both the chart and the control
                                },
                            hAxis: {
                                format: 'MMM/y'
                                }
                            },
                        chartView: {
                            columns: [0, 1]
                                }
                            }
                        },
                        state: {
                            range: {
                            start: new Date(2013, 3),
                            end: new Date(2014, 3)
                                }
                            }
                        });
        var chart = new google.visualization.ChartWrapper({
            chartType: 'AreaChart',
            containerId: 'chart_div_a',
                options: {
                    chartArea: {
                        width: '85%',
                        height: '50%'
                        },
                width: '85%', // must be the same in both the chart and the control
                height: 300,
                fontName: ["Roboto Condensed"],
                backgroundColor: '#FFFFFF',
                colors: ['#5cb85c','#e0fde0', '#d9534f'],
                curveType: ['none'],
                fontSize: ['13'],
            hAxis: {
                title: 'Período', 
                titleTextStyle: {
                    italic: false,
                    color: 'black',
                    fontSize: 15
                    },
                format: 'MMM/y'
                },
                legend: {
                    position: 'right',
                    textStyle: {
                    color: 'black',
                    fontSize: 12
                    }
                },
                lineWidth: 2,
                pointSize: 5,
            tooltip: {
                textStyle: {
                    color: 'Black'
                    },
                showColorCode: false,
                }
            }
        });

        var dash= new google.visualization.Dashboard(document.getElementById('dashboard_a'));
        dash.bind([rangeFilter], [chart]);
        dash.draw(data);

        $(document).ready(function () {
            $(window).resize(function(){
                drawChart_a();
            });
        });
    }

</script>

<div class="tabbable top-margin-medium" style="padding-right: 15px; padding-left: 15px;">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active">
            <a class="text-muted" href="#Group" data-toggle="tab">tab1</a>
        </li>
        <li class="">
            <a class="text-muted" href="#New" data-toggle="tab">tab2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="Group" style="padding-top: 20px; padding-right: 20px; padding-left: 20px;">
            <div id="dashboard">
                <div id="chart_div" style="width: 100%;"></div>
                <div id="range_filter_div" style="width: 100%; padding-bottom: 20px;"></div>
            </div>
        </div>
        <div class="tab-pane" id="New" style="padding-top: 20px; padding-right: 20px; padding-left: 20px;">
            <div id="dashboard_a">
                <script type="text/javascript">
                $('#New').click(function (e) {
                    drawChart_a();
                });
                </script>
                <div id="chart_div_a" style="width: 100%;"></div>
                <div id="range_filter_div_a" style="width: 100%; padding-bottom: 20px;"></div>
            </div>
        </div>
    </div>
</div>

解决方案

Move your event handlers inside your draw functions, and redraw your dashboards rather than call the draw functions again:

function drawChart () {
    // ... chart code

    function redraw () {
        dash.draw(data);
    }

    $(window).resize(redraw);
    $('#Group_link').click(redraw);
}
function drawChart_a () {
    // ... chart code

    function redraw () {
        dash.draw(data);
    }

    $(window).resize(redraw);
    $('#New_link').click(redraw);
}

You need to assign the id's "Group_link" and "New_link" (or whatever you decide to call them) to your tab links so they trigger properly:

<li class="active">
    <a class="text-muted" id="Group_link" href="#Group" data-toggle="tab">tab1</a>
</li>
<li class="">
    <a class="text-muted" id="New_link" href="#New" data-toggle="tab">tab2</a>
</li>

这篇关于如何显示选项卡时绘制谷歌图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！