maxLines 选项是否不适用于底部堆积条形 Google 图表上的图例？答案

【问题标题】：Does the maxLines option not apply for the legend on a Stacked Bar Google Chart at the bottom?maxLines 选项是否不适用于底部堆积条形 Google 图表上的图例？
【发布时间】：2015-10-26 01:13:49
【问题描述】：

我正在实施 Stacked Bar Google Chart。我发现当我的类别跨越多行并且图例位于顶部时，图例将换行为多行，由 hAxis 变量上的 maxLines 选项控制。

但是，如果我将图例移到底部，则图例不再换行，而是提供类别的分页视图。当图例位于顶部且 maxLines 选项设置为 1 时，此行为相同。

这是我的fiddle。顶部的图表顶部有图例，底部的图顶部有图例...我这样做是为了方便...

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 20, 30, 20, 15, 5, ''],
      ]);

      var options = {
        width: 550,
        height: 160,
          chartArea: {height: '45%' },
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '55%' },
          hAxis: { maxValue: 100, ticks: [0, 25, 50, 75, 100] },
        isStacked: true
      };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);

      var chart2 = new google.visualization.BarChart(document.getElementById('chart2_div'));
    options.legend.position = "bottom";
      chart2.draw(data, options);
    }

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

呃...刚刚在 Google 的网站上找到了这个：

图例中的最大行数。将此设置为更大的数字比一个为您的图例添加线条。注意：用于的确切逻辑确定实际渲染的行数仍在不断变化。

此选项目前仅在 legend.position 为 'top' 时有效。

类型：数字默认值：1

https://developers.google.com/chart/interactive/docs/gallery/linechart

【讨论】：

但需要多行图例的解决方案