Google图表传奇 - 重叠文字 [英] Google chart legends - Overlapping text

问题描述

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

这是我的代码：

  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  

我的图表位于引导选项卡nav：

 < div id =div-Graficosclass =panel-collapse in> < div class =panel-body> < ul id =tab-Graficosclass =nav nav nav-tabs nav-justifiedrole =tablist> < li role =presentationclass =active>< a href =＃div-Grafico-OEEaria-controls =div-Grafico-OEErole =tabdata-toggle =tab > Equipamento  -  OEE< / a>< / li> < li href =＃div-Grafico-T2aria-controls =div-Grafico-T2role =tabdata-toggle =tab> Equipamento  - T2< / A>< /锂> < li href =presentation>< a href =＃div-Grafico-Produtividadearia-controls =div-Grafico-Produtividaderole =tabdata-toggle =tab> Equipamento  - Produtividade< / A>< /锂> < / UL> < div class =tab-content> < div role =tabpanelclass =tab-pane fade in activeid =div-Grafico-OEE> < div id =div-Equipamento-OEEstyle =width：900px; height：500px>< / div> < / DIV> < div role =tabpanelclass =tab-pane fadeid =div-Grafico-T2> < div id =div-Equipamento-T2style =width：900px; height：500px>< / div> < / DIV> < div role =tabpanelclass =tab-pane fadeid =div-Grafico-Produtividade> < div id =div-Equipamento-Produtividadestyle =width：1200px; height：500px>< / div> < / DIV> < / DIV> < / div>< / div>  

将位置改为底部，但问题仍然存在

我做错了什么？

解决方案

检查图表隐藏时未被绘制

请参阅下面的代码片段，图表默认情况下隐藏，

然后在图表的'ready'事件触发

通知时显示，它会产生与张贴在这个问题...

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']}）;



$ b $然而，如果容器在绘制图表之前显示，则
的图例很好地显示出来。 。

  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']}）;   
 

I'm using google chart in my page but the legend text is Overlapped, as the image bellow:

This is my code:

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

My charts is on bootstrap tab nav:

<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>

I tried to change the position to "bottom" but the problem continue

What i'm making wrong?

解决方案

check that the chart is not being drawn while hidden

see the following snippet, the chart is hidden by default,
then shown once the chart's 'ready' event fires

notice, it produces the same result as posted in the question...

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

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

---

however, if the container is shown before drawing the chart,
the legend turns out nicely...

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

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

这篇关于Google图表传奇 - 重叠文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！