11

我几乎完全按照演示使用 Google 的折线图——只有数据发生了变化——在这个 jQuery 选项卡插件内部，没有任何修改。可能有 50% 的时间，图表将以 400x200 加载，即使它已被指定为以 700x250 加载。包含的 div 将具有适当的宽度和高度，但 API 呈现的图表将在 400x200 的位置加载。

我怀疑这是因为 API 尝试渲染时没有显示选项卡。正因为如此，它会尝试渲染一些它认为为 null 的东西，因此会强制自己进入最小的默认分辨率。

我的想法是，如果图表的显示可以延迟到单击相应的选项卡，它将解决问题。可悲的是，我不知道该怎么做，而且我的研究也没有成果。我能找到的最接近的是这个线程，但我没有在那里找到任何真正的答案。

如果您有任何建议，我将不胜感激，如有必要，我很乐意跟进更多信息。

4

5 回答 5

9

在隐藏的 div 中渲染图表（这很可能是选项卡 UI 的未选择选项卡）与 Visualization API 检测维度的能力相混淆，因此您需要做以下两件事之一：要么在实例化选项卡之前渲染所有图表，或者（如您所见）绑定事件侦听器以在第一次打开选项卡时绘制图表。在图表的选项中设置高度和宽度不足以解决所有浏览器中的问题。

我浏览了 easytabs 文档，看起来您应该能够执行以下操作：

// draw chart(s) in your default open tab

// track which tabs you've drawn charts in
var chartsDrawn = {
    tab1: true,
    tab2: false,
    tab3: false
    // etc
};

$('#tab-container').bind('easytabs:after', function (e) {
    if (e.tab == 'tab-2' && !chartsDrawn.tab2) {
        // draw chart(s) in tab 2
        chartsDrawn.tab2 = true;
    }
    else if (e.tab == 'tab-3' && !chartsDrawn.tab3) {
        // draw chart(s) in tab 3
        chartsDrawn.tab3 = true;
    }
    // etc
});
于 2013-09-02T04:06:40.060 回答
6

更改图表选项以根据需要设置宽度和高度

var options = {
          title: 'Company Performance'
          ,width:900
          ,height:500
        };
于 2013-09-02T02:08:11.293 回答
0

我解决了这个问题，在保存图表的元素中保留引导类，然后在加载图表后，应用引导类。

例如，假设我们要设置一个包含图表的可折叠项：

    <a href="#div-id" data-toggle="collapse">
        Expand
    </a>
    <div id="div-id" class="future-collapse">
       <div id="some-chart"></div>
    </div>

然后在你的脚本中：

/**
 *  Callback function E.G. google.charts.setOnLoadCallback(drawChart);
 */
function drawChart(){
   // Drawing the charts
   draw_some_chart();
   // Applying the collapse class to our elements with the future-collapse class
   $('.future-collapse').attr('class', 'collapse');
}

function draw_some_chart(){
    // Draw your charts
}
于 2019-07-23T21:37:41.163 回答
0

我偶然发现了 Bootstrap 选项卡的这个“功能”。在我的 HTML 中剪切和粘贴多个选项卡时，我不小心将所有选项卡的 <div class=" tab-pane active"> 保持在“活动”状态。结果是所有选项卡的内容在第一个选项卡中按顺序显示，但在您切换选项卡时消失了。

我对隐藏选项卡的解决方案是将它们定义为活动的，然后在调用 chart.draw 后从 div 中删除“活动”类。

<div class="tab-pane active" id="myid" role="tabpanel">
    <script type="text/javascript">
        // all the chart stuff
        chart.draw(data, options);
        $('#myid').removeClass('active');
    </script>
</div>

我看到 jQuery 选项卡也使用“活动”类。也许这个技巧也适用于那里。

于 2017-12-08T19:33:41.463 回答
0

这就是我使用 angular-bootstrap https://angular-ui.github.io/bootstrap/解决的方法

<div class="google-chart" google-chart chart="chartObject1" on-ready="displayGoogleCharts()"></div>

<tab heading="Past Week" select="googleChartSizeFix()">

googleChartSizeFix = function() {
    $('svg').parent().css({ opacity:"0" });
    $(window).resize();
};

displayGoogleCharts = function() {
    $('svg').parent().css({ opacity:"1" });
};

每次选择一个选项卡（触发 googleChartSizeFix 函数）时，Google 图表都会设置为透明（不透明度 = 0，因此它不会通过使用 hide() 消失，但会保持其大小，因为其内容是透明的）后跟窗口调整大小被触发，这迫使谷歌图表适合包含它的 div，通过使用宽度 100% 和高度 100%：

"options": {
    "chartArea": {
        "width":'100%',
        "height":'100%'
    }
}

最后，一旦谷歌图表准备好（调整大小后），就会触发 displayGoogleCharts 函数，并将谷歌图表的不透明度重置为 1，因此内容再次可见。

于 2015-08-18T19:33:56.833 回答