Question

我在我的页面中使用谷歌图表，但图例文字是重叠的，如图所示：

这是我的代码：

＆＃13;

var dataTable = new google.visualization.DataTable();

dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");

for (var i = 0; i < dados.length; i++) {
  var temp = new Date(dados[i].DT_FIM);

  dataTable.addRow([new Date(temp.getFullYear(), temp.getMonth())
                    ,dados[i].TON_HORA
                    ,dados[i].TON_HORA_EQUIV
                    ,dados[i].PES_LIQUI_UNMET]);
}

var date_formatter = new google.visualization.DateFormat({
  pattern: "MMM/yyyy"
});

date_formatter.format(dataTable, 0);

var options = {
  hAxis: {title: 'Período (mês/ano)'},
  series: {0: {type: 'line', targetAxisIndex:0},
           1: {type: 'line', targetAxisIndex:0},
           2: { type: 'bars', targetAxisIndex: 1 }
          },
  legend: { position: "top", textStyle: { fontSize: 14 } },
  width: 1200,
  height: 500
};

var chart = new google.visualization.ComboChart(document.getElementById("div-Equipamento-Produtividade"));
chart.draw(dataTable, options);

＆＃13;

我的图表位于bootstrap标签导航栏中：

＆＃13;

<div id="div-Graficos" class="panel-collapse in">
  <div class="panel-body">
    <ul id="tab-Graficos" class="nav nav nav-tabs nav-justified" role="tablist">
      <li role="presentation" class="active"><a href="#div-Grafico-OEE" aria-controls="div-Grafico-OEE" role="tab" data-toggle="tab">Equipamento - OEE</a></li>
      <li role="presentation"><a href="#div-Grafico-T2" aria-controls="div-Grafico-T2" role="tab" data-toggle="tab">Equipamento - T2</a></li>
      <li role="presentation"><a href="#div-Grafico-Produtividade" aria-controls="div-Grafico-Produtividade" role="tab" data-toggle="tab">Equipamento - Produtividade</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="div-Grafico-OEE">
        <div id="div-Equipamento-OEE" style="width: 900px; height: 500px"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="div-Grafico-T2">
        <div id="div-Equipamento-T2" style="width: 900px; height: 500px"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="div-Grafico-Produtividade">
        <div id="div-Equipamento-Produtividade" style="width: 1200px; height: 500px"></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我试图将位置更改为＆＃34; bottom＆＃34;但问题还在继续

我做错了什么？

Answer 1

检查隐藏时是否正在绘制图表

请参阅以下代码段，默认情况下隐藏图表，
然后在图表的'ready'事件触发后显示

注意，它产生的结果与问题中公布的结果相同......

＆＃13;

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn("date", "Data");
    dataTable.addColumn("number", "Ton./Hora");
    dataTable.addColumn("number", "Ton./Hora Equiv.");
    dataTable.addColumn("number", "Peso (Ton.)");

    for (var i = 0; i < 12; i++) {
      var temp = new Date();

      dataTable.addRow([new Date(temp.getFullYear(), i)
                        ,(i + 2) * 6
                        ,(i + 1) * 12
                        ,(i + 0) * 18]);
    }

    var date_formatter = new google.visualization.DateFormat({
      pattern: "MMM/yyyy"
    });

    date_formatter.format(dataTable, 0);

    var options = {
      hAxis: {title: 'Período (mês/ano)'},
      series: {0: {type: 'line', targetAxisIndex:0},
               1: {type: 'line', targetAxisIndex:0},
               2: { type: 'bars', targetAxisIndex: 1 }
              },
      legend: { position: "top", textStyle: { fontSize: 14 } },
      width: 1200,
      height: 500
    };

    var container = document.getElementById("div-Equipamento-Produtividade");
    var chart = new google.visualization.ComboChart(container);
    google.visualization.events.addListener(chart, 'ready', function () {
      container.style.display = null;
    });
    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>

＆＃13;

但是，如果在绘制图表之前显示 ，则为传说结果很好......

＆＃13;
＆＃13;
container
＆＃13;
google.charts.load('current', { callback: function () { var dataTable = new google.visualization.DataTable(); dataTable.addColumn("date", "Data"); dataTable.addColumn("number", "Ton./Hora"); dataTable.addColumn("number", "Ton./Hora Equiv."); dataTable.addColumn("number", "Peso (Ton.)"); for (var i = 0; i < 12; i++) { var temp = new Date(); dataTable.addRow([new Date(temp.getFullYear(), i) ,(i + 2) * 6 ,(i + 1) * 12 ,(i + 0) * 18]); } var date_formatter = new google.visualization.DateFormat({ pattern: "MMM/yyyy" }); date_formatter.format(dataTable, 0); var options = { hAxis: {title: 'Período (mês/ano)'}, series: {0: {type: 'line', targetAxisIndex:0}, 1: {type: 'line', targetAxisIndex:0}, 2: { type: 'bars', targetAxisIndex: 1 } }, legend: { position: "top", textStyle: { fontSize: 14 } }, width: 1200, height: 500 }; var container = document.getElementById("div-Equipamento-Produtividade"); container.style.display = null; var chart = new google.visualization.ComboChart(container); chart.draw(dataTable, options); }, packages: ['corechart'] });
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用＆＃34; display：none＆＃34;隐藏图表DIV的每个框架或代码当图表在非活动DIV中绘制时，将使图例重叠。

隐藏图表DIV，其中＆＃34;可见性：隐藏＆＃34;工作正常，没有重叠。

我有这个问题，只解决了我自己编写NAV功能的问题，而不使用Bootstrap / JQuery /等...

Google图表图例 - 重叠文字

2 个答案: