Google 图表图例 - 重叠文本 [英] Google chart legends - Overlapping text

查看：26
本文介绍了Google 图表图例 - 重叠文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的页面中使用谷歌图表，但图例文本重叠，如下图:

这是我的代码:

var dataTable = new google.visualization.DataTable();dataTable.addColumn("日期", "数据");dataTable.addColumn("number", "Ton./Hora");dataTable.addColumn("number", "Ton./Hora Equiv.");dataTable.addColumn("number", "比索 (吨)");for (var i = 0; i < dados.length; i++) {var temp = new Date(dados[i].DT_FIM);dataTable.addRow([新日期(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({模式:MMM/yyyy"});date_formatter.format(dataTable, 0);变量选项 = {hAxis: {title: 'Período (mês/ano)'},系列:{0:{type:'line'，targetAxisIndex:0}，1: {type: 'line', targetAxisIndex:0},2: { 类型: 'bars', targetAxisIndex: 1 }},图例:{位置:顶部"，文本样式:{fontSize:14}}，宽度:1200，高度:500};var chart = new google.visualization.ComboChart(document.getElementById("div-Equipamento-Produtividade"));chart.draw(dataTable, options);

我的图表在引导标签导航上:

<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><div class="tab-content"><div role="tabpanel" class="tab-pane淡入活跃" id="div-Grafico-OEE"><div id="div-Equipamento-OEE" style="width: 900px; height: 500px"></div>

<div role="tabpanel" class="tab-pane淡出" id="div-Grafico-T2"><div id="div-Equipamento-T2" style="width: 900px; height: 500px"></div>

<div role="tabpanel" class="tab-pane淡入淡出" id="div-Grafico-Produtividade"><div id="div-Equipamento-Produtividade" style="width: 1200px; height: 500px"></div>

我尝试将位置更改为底部"，但问题仍然存在

我做错了什么?

解决方案

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

看下面的片段，图表默认是隐藏的，
然后在图表的 'ready' 事件触发后显示

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

google.charts.load('current', {回调:函数(){var dataTable = new google.visualization.DataTable();dataTable.addColumn("日期", "数据");dataTable.addColumn("number", "Ton./Hora");dataTable.addColumn("number", "Ton./Hora Equiv.");dataTable.addColumn("number", "比索 (吨)");for (var i = 0; i <12; i++) {var temp = new Date();dataTable.addRow([新日期(temp.getFullYear(), i),(i + 2) * 6,(i + 1) * 12,(i + 0) * 18]);}var date_formatter = new google.visualization.DateFormat({模式:MMM/yyyy"});date_formatter.format(dataTable, 0);变量选项 = {hAxis: {title: 'Período (mês/ano)'},系列:{0:{type:'line'，targetAxisIndex:0}，1: {type: 'line', targetAxisIndex:0},2: { 类型: 'bars', targetAxisIndex: 1 }},图例:{位置:顶部"，文本样式:{fontSize:14}}，宽度:1200，高度:500};var container = document.getElementById("div-Equipamento-Produtividade");var chart = new google.visualization.ComboChart(container);google.visualization.events.addListener(图表，'准备好'，函数(){container.style.display = null;});图表绘制(数据表，选项)；},包:['corechart']});

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

<小时>

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

google.charts.load('current', {回调:函数(){var dataTable = new google.visualization.DataTable();dataTable.addColumn("日期", "数据");dataTable.addColumn("number", "Ton./Hora");dataTable.addColumn("number", "Ton./Hora Equiv.");dataTable.addColumn("number", "比索 (吨)");for (var i = 0; i <12; i++) {var temp = new Date();dataTable.addRow([新日期(temp.getFullYear(), i),(i + 2) * 6,(i + 1) * 12,(i + 0) * 18]);}var date_formatter = new google.visualization.DateFormat({模式:MMM/yyyy"});date_formatter.format(dataTable, 0);变量选项 = {hAxis: {title: 'Período (mês/ano)'},系列:{0:{type:'line'，targetAxisIndex:0}，1: {type: 'line', targetAxisIndex:0},2: { 类型: 'bars', targetAxisIndex: 1 }},图例:{位置:顶部"，文本样式:{fontSize:14}}，宽度:1200，高度:500};var container = document.getElementById("div-Equipamento-Produtividade");container.style.display = null;var chart = new google.visualization.ComboChart(container);图表绘制(数据表，选项)；},包:['corechart']});

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆