我在某些标签中有一个Google图表注释图表,如下图所示。问题是,它没有被正确地绘制,好像它以某种方式有点超出范围。
我假设它与页面加载时绘制的图表有关,然后单击选项卡时,图表容器的大小会发生变化。但是我不确定该如何解决。任何提示,不胜感激。
这是我的图表:
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="#[email protected]"
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>
更新:
这是关于我所看到的小提琴的一个例子。请注意,选项卡2中的图表尺寸已损坏,或者至少看起来不正确。提琴是从这篇文章中借用和修改的。
似乎图表未正确显示在隐藏的对象上。也许有更好的方法直接在Google图表设置中处理它,但是一种解决方案是在显示标签后绘制实际图表。例如,如果单击选项卡,则调用一次抽奖:
$('a[title=content_2]').one('click',function(){
chart2.draw(data, options);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句