当前位置:  开发笔记 > 编程语言 > 正文

Google图表图例 - 重叠文字

如何解决《Google图表图例-重叠文字》经验,为你挑选了1个好方法。

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

在此输入图像描述

这是我的代码:

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

我的图表在bootstrap tab nav上:

我试图将位置改为"底部",但问题仍在继续

我错了什么?



1> WhiteHat..:

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

请参阅以下代码段,默认情况下隐藏图表,
然后在图表的'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']
});

推荐阅读
手机用户2502852037
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有