我正在使用Google Charts显示数据并正确加载图表,但图例未正确加载。
这是我的图表中的jsfiddle link。
请检查图例位置,您将理解我的错误。
以下是我的代码,
HTML
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#test">test</a></li>
<li><a data-toggle="tab" href="#chart-test">chart</a></li>
</ul>
<div class="tab-content">
<div id="test" class="tab-pane fade in active">
<p>
this is the test tab
</p>
</div>
<div id="chart-test" class="tab-pane fade">
<div id="chart_div" style="width: 900px; height: 500px"></div>
</div>
</div>
my js
graph();
function graph() {
google.charts.load('current', {'packages':['line']});
data = new Array(4);
data[0] = new Array('a', 1, 3, 11, 15, 26, 37, 1, 3, 11, 15, 26, 37);
data[1] = new Array('b', 6, 1, 7, 57, 26, 57, 6, 1, 7, 57, 26, 57);
data[2] = new Array('c', 9, 2, 3, 13, 16, 17, 9, 2, 3, 13, 16, 17);
data[3] = new Array('d', 4, 8, 2, 5, 6, 7, 4, 8, 2, 5, 6, 7);
google.charts.setOnLoadCallback(function() { drawChart(data) });
}
function drawChart(dataa) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addColumn('number', 'Months');
data.addRows(dataa);
var options = {
legend: {
position: 'top',
alignment: 'start',
textStyle: { fontSize: 12 }
},
curveType: 'function',
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
提前致谢!
答案 0 :(得分:0)
我查了你的代码。 你的代码一切都很好。我认为它有一个CSS问题。 当我只是在HTML代码中切换选项卡类时,它运行正常。替换你的HTML。
<div class="tab-content">
<div id="test" class="tab-pane fade">
<p>
this is the test tab
</p>
</div>
<div id="chart-test" class="tab-pane in active">
<div id="chart_div" style="width: 900px; height: 500px"></div>
</div>
</div>