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>

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

提前致谢！

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>

Google图表中的图例未正确加载

1 个答案: