javascript - Google Charts 图表区域超出范围

Question

我在一些选项卡中有一个 Google Charts 注释图表，如下所示。问题是，它没有被正确绘制，就好像它有点超出范围一样。

我认为这与页面加载时绘制的图表有关，然后当我单击选项卡时，图表容器的大小会发生变化。但我不知道如何解决这个问题。非常感谢任何提示。

这是我的图表:

google.load('visualization', '1', { 'packages': ['annotationchart'] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Kepler-22b mission');
    data.addColumn('string', 'Kepler title');
    data.addColumn('string', 'Kepler text');
    data.addColumn('number', 'Gliese 163 mission');
    data.addColumn('string', 'Gliese title');
    data.addColumn('string', 'Gliese text');
    data.addRows([
        [
            new Date(2314, 2, 15), 12400, undefined, undefined,
            10645, undefined, undefined
        ],
        [
            new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
            12374, undefined, undefined
        ],
        [
            new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
            15766, 'Gallantors', 'First Encounter'
        ],
        [
            new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
            34334, 'Gallantors', 'Statement of shared principles'
        ],
        [
            new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
            66467, 'Gallantors', 'Mysteries revealed'
        ],
        [
            new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
            79463, 'Gallantors', 'Omniscience achieved'
        ]
    ]);

    var options = {
        displayAnnotations: true,
        'height': 500,
        'width': 900,
    };

    var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
    var chart2 = new google.visualization.AnnotationChart(document.getElementById('chart_div2'));
    var chart3 = new google.visualization.AnnotationChart(document.getElementById('chart_div3'));

    chart.draw(data, options);
    chart2.draw(data, options);
    chart3.draw(data, options);
}

这是选项卡之一:

<ul class="nav nav-tabs" data-tabs="tabs">
@foreach (var item in Model)
{
    <li id="wellnav" class="@(item.Well == 1 ? "active" : "")"><a id="id2"
                                                                  href="#tab-@item.Well" 
                                                                  data-toggle="tab"">@item.Well</a></li>
}

<div id="tabs" class="tab-content">
    <div id="tab-1" class="tab-pane">
    <div id="chart_div"></div>       
</div>

更新:

这是我所看到的 Fiddle 示例。请注意选项卡 2 中的图表的尺寸已损坏，或者至少看起来不正确。 fiddle 借用并修改自this发布。

http://jsfiddle.net/06rwpft8/1/

Answer 1

图表似乎未在隐藏对象上正确呈现。也许有更好的方法可以直接在谷歌图表设置中处理它，但解决方案是在显示选项卡时绘制实际图表。例如，如果单击选项卡，则调用一次绘制:

$('a[title=content_2]').one('click',function(){
    chart2.draw(data, options);
});

Fiddle