在隐藏的元素中绘制Google Chart [英] Drawing Google Chart in hidden elements

问题描述

试图在没有幸运的情况下在隐藏的元素中渲染Google图表。小提琴有一个引导标签的例子：

小提琴

从Andrew获得一些帮助：如何在显示选项卡时绘制谷歌图表？，但现在图表在我与它互动时随时重新渲染（例如

HTML代码是：

  < div class =container> 
< div class =tabbable> 
< ul class =nav nav-tabsdata-tabs =tabs> 
< li class =active> 
< a href =＃Adata-toggle =tab>标签A< / a> 
< / li> 
< li class => 
< a href =＃Bdata-toggle =tab>标签B< / a> 
< / li> 
< li class => 
< a href =＃Cdata-toggle =tab>标签C< / a> 
< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-pane activeid =A> 
< div id ='ChartA'>< / div> 
< / div> 
< div class =tab-paneid =B> 
< div id ='ChartB'>< / div> 
< / div> 
< div class =tab-paneid =C> 
< div id ='ChartC'>< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

所有JS代码都在小提琴中。

解决方案

一个简单的例子，我在这里所做的是在每个选项卡的选项卡显示事件被触发时重新加载图形。我确信有一个更优雅的解决方案，但它可以胜任。

  $（a [href ='＃A' （''shown.bs.tab'，function（e）{
 google.load（'visualization'，'1'，{
 packages：['timeline']，
 callback：drawChartA 
}）; 
}）; $'
 $ b $（a [href ='＃B']）。on（'shown.bs.tab'，function（e）{
 google.load（'visualization'， '1'，{
 packages：['timeline']，
 callback：drawChartB 
}）; 
}）; $（'href ='＃C']）。on（'shown.bs.tab'，function（e）{
 google.load（'visualization'， '1'，{
 packages：['timeline']，
 callback：drawChartC 
}）; 
}）; 
  

Trying do render Google charts in hidden elements without lucky. The fiddle bellow has an example with bootstrap tabs:

Fiddle

Got some help from Andrew here: How to draw a google chart when a tab is showed? but the chart now is re-rendering anytime I interact with it, (for example with the range filter).

The HTML code is:

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs" data-tabs="tabs">
            <li class="active">
                <a href="#A" data-toggle="tab">Tab A</a>
            </li>
            <li class="">
               <a href="#B" data-toggle="tab">Tab B</a>
            </li>
            <li class="">
                <a href="#C" data-toggle="tab">Tab C</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="A">
                <div id='ChartA'></div>
            </div>
            <div class="tab-pane" id="B">
                <div id='ChartB'></div>
            </div>
            <div class="tab-pane" id="C">
                <div id='ChartC'></div>
            </div>
        </div>
    </div>
</div>

All the JS code is in the fiddle.

解决方案

A simple example, all I'm doing here is reloading the graphs when the tabs show event gets fired for each tab. I'm sure there's a more elegant solution but it does the job.

$("a[href='#A']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartA
    });
});

$("a[href='#B']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartB
    });
});

$("a[href='#C']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartC
    });
});

这篇关于在隐藏的元素中绘制Google Chart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！