Google Chart 中的图例未正确加载

Question

我正在使用 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>

我的 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));
    }

提前致谢！

Answer 1

我检查了您的代码。 您的代码一切正常。我认为其中存在 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>