谷歌图表图例重叠

Posted 2023-02-19

【中文标题】谷歌图表图例重叠

【英文标题】：Google Charts legends overlapping

【发布时间】：2016-12-06 13:49:24

【问题描述】：

我是 *** 和谷歌图表的新手。

我的一个项目使用谷歌图表 api 时遇到问题，我正在绘制两个图例，但它们在预览时重叠。

我在 *** 和 jsfiddle 上尝试了各种解决方案，但都没有奏效。

这是我的一些代码 sn-p 和输出：

图表的配置对象：

    var options = 
        hAxis : 
            title : xAxis,
            textStyle:
                color: 'black',
                fontSize : '8px'
            ,
            slantedText : true,
            slantedTextAngle : 90,
            titleTextStyle : 
                fontSize : '15px',
                italic : false
            ,
        ,
        vAxis : 
            title : yAxis,
            format:format,
            textStyle:
                color: 'black',
                fontSize : '8px'
            ,
            titleTextStyle : 
                fontSize : '15px',
                italic : false
            ,
            viewWindowMode : 'explicit',
            viewWindow : 
                min : 0,
                //max: 1200000
            
        ,
        backgroundColor : 'transparent',
        interpolateNulls: false,
        width : 350,
        height : 180,
        chartArea : 
            left : 40,
            width : '45%',
            height : '45%'
        ,
     legend: 
          position: 'top',
            maxLines: 3,
        ,
        series : 
            0 : 
                color : line1Color,
                visibleInLegend : true,
                pointShape: 'square',
                pointSize: 10,
            ,
            1 : 
                color : line2Color,
                visibleInLegend : true,
                pointShape: 'diamond',
                pointSize: 10,
            
        
    ;

输出： https://snag.gy/Yd2qjX.jpg

【参考方案1】：

不幸的是，没有在图例上强制使用多行的选项

我永远无法让图例像屏幕截图中那样重叠， 取而代之的是，每个都将被截断，并在末尾加上 '...'

但我可以让图例文本下降到另一行而不是截止的唯一方法， 是通过将width 增加一个可笑的数量 还需要调整chartArea.width

这样您就可以继续调整width 和chartArea.width， 直到你得到想要的结果

另一个注意事项，无论何时您在图表中使用fontSize options， 它应该是一个数字，而不是一个字符串，即fontSize : 8

对比

fontSize : '8px'

请参阅以下工作 sn-p...

google.charts.load('current', 
  callback: function () 
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Tool - Long title could not read', 'Tool - Something to Prod Start'],
      [new Date('08/01/2015'), 0.2, 0.0],
      [new Date('09/01/2015'), 0.8, 0.0],
      [new Date('10/01/2015'), 1.0, 2.2],
      [new Date('11/01/2015'), 1.3, 1.2],
      [new Date('12/01/2015'), 1.8, 1.4],
      [new Date('01/01/2016'), 2.4, 1.5],
      [new Date('02/01/2016'), 2.5, 1.4],
      [new Date('03/01/2016'), 2.6, 1.5],
      [new Date('04/01/2016'), 2.5, 1.5],
      [new Date('05/01/2016'), 2.4, 1.6],
      [new Date('06/01/2016'), 2.3, 1.6],
      [new Date('07/01/2016'), 2.2, 1.5]
    ]);

    var options = 
        hAxis : 
            title : 'xAxis',
            format: 'MMM-yy',
            textStyle:
                color: 'black',
                fontSize : 8
            ,
            slantedText : true,
            slantedTextAngle : 90,
            titleTextStyle : 
                fontSize : 15,
                italic : false
            ,
        ,
        vAxis : 
            title : 'yAxis',
            format: '#,##0.0',
            textStyle:
                color: 'black',
                fontSize : 8
            ,
            titleTextStyle : 
                fontSize : 15,
                italic : false
            ,
            viewWindowMode : 'explicit',
            viewWindow : 
                min : 0
            
        ,
        backgroundColor : 'transparent',
        interpolateNulls: false,
        width : 780,
        height : 180,
        chartArea : 
            left : 40,
            width : 310,
            height : '45%'
        ,
        legend: 
            position: 'top',
            maxLines: 3
        ,
        series : 
            0 : 
                color : '#154360',
                visibleInLegend : true,
                pointShape: 'square',
                pointSize: 10,
            ,
            1 : 
                color : '#5499C7',
                visibleInLegend : true,
                pointShape: 'diamond',
                pointSize: 10,
            
        
    ;

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  ,
  packages: ['corechart']
);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

感谢您的回答，但它对我不起作用。我尝试设置宽度和字体大小，但它仍然重叠。可能是内部 CSS 问题。

经过多次尝试才使上述方法起作用，可能值得在相邻的 div -- here is an example 中建立自己的图例

是的，谢谢我知道了