Google折线图小屏幕图例被截断，如何下移图例文本？

我的Google折线图在移动浏览器或小屏幕上，顶部的图例出现截断情况（图例顶部文字被页面上边缘切掉），想知道如何调整图例位置避免截断。

原代码 #

function DashboardGraphAppointmentGrowth(statsData) {
    try {
        google.charts.load('current', {
            packages: ['line'],
            callback: function () {
                var data = new google.visualization.DataTable();
                data.addColumn('string', '');
                data.addColumn('number', 'Total Appointments');
                data.addColumn('number', 'Completed Appointments');

                for (var i = 0; i < statsData.length; i++) {
                    data.addRow([statsData[i].date, parseInt(statsData[i].total), parseInt(statsData[i].completedTotal)]);
                }

                var options = {
                    chart: {
                        title: '',
                        subtitle: ''
                    },
                    colors: ['#f4b400', '#4285f4'],
                    height: 350,
                    legend: {
                        position: 'top', maxLines: 3, textStyle: {
                            fontSize: 11.3,
                            color: '#000000',
                        }
                    },
                    vAxis: {
                        viewWindow: {
                            min: 0
                        }
                    }
                };

                var chart = new google.charts.Line(document.getElementById('graph_appointments_growth'));
                chart.draw(data, google.charts.Line.convertOptions(options));
            }
        });
    }
    catch (error) {
        console.log("Error : " + error);
    }
}

解决方法 #

可以通过以下几种方式调整布局解决截断问题：

• 增加图表顶部边距+图例居中：给图表区域设置顶部边距，同时让图例居中，为图例留出足够显示空间：

  legend: {
      position: 'top',
      maxLines: 3,
      alignment: 'center', // 图例居中避免左右溢出
      textStyle: {
          fontSize: 11.3,
          color: '#000000',
      }
  },
  chartArea: {
      top: 40 // 调整顶部边距，数值可根据实际情况修改
  }
  

• 优化图例换行与字体：如果图例项较多，缩小字体或调整换行行数，避免横向溢出导致截断：

  legend: {
      position: 'top',
      maxLines: 2, // 减少换行行数，优化单行列宽
      textStyle: {
          fontSize: 10, // 缩小字体节省空间
          color: '#000000',
      }
  }
  

• 将图例移至底部：如果顶部空间始终不足，直接把图例改到彻底避免顶部截断：

  legend: {
      position: 'bottom',
      maxLines: 3,
      textStyle: {
          fontSize: 11.3,
          color: '#000000',
      }
  }
  

修改后的完整示例代码 #

function DashboardGraphAppointmentGrowth(statsData) {
    try {
        google.charts.load('current', {
            packages: ['line'],
            callback: function () {
                var data = new google.visualization.DataTable();
                data.addColumn('string', '');
                data.addColumn('number', 'Total Appointments');
                data.addColumn('number', 'Completed Appointments');

                for (var i = 0; i < statsData.length; i++) {
                    data.addRow([statsData[i].date, parseInt(statsData[i].total), parseInt(statsData[i].completedTotal)]);
                }

                var options = {
                    chart: {
                        title: '',
                        subtitle: ''
                    },
                    colors: ['#f4b400', '#4285f4'],
                    height: 350,
                    chartArea: {
                        top: 40
                    },
                    legend: {
                        position: 'top',
                        maxLines: 3,
                        alignment: 'center',
                        textStyle: {
                            fontSize: 11.3,
                            color: '#000000',
                        }
                    },
                    vAxis: {
                        viewWindow: {
                            min: 0
                        }
                    }
                };

                var chart = new google.charts.Line(document.getElementById('graph_appointments_growth'));
                chart.draw(data, google.charts.Line.convertOptions(options));
            }
        });
    }
    catch (error) {
        console.log("Error : " + error);
    }
}

内容的提问来源于stack exchange，提问作者chosenOne Thabs