谷歌图表在材料中的图例页面

Question

我希望在新的 google chars API 上获得图例分页。我以前看到它是可能的，但现在找不到任何文档。

如果不再可能，我怎样才能让我的折线图图例扩展图表 div？

我将 div 设置为 min-height: 400px 并且它强制 SVG 为 400px 并且不调整 div 的大小。

我制作了这个超级快速的演示，展示了 35 个图例，您可以看到它是如何将它们切断的。我要么希望它允许一些分页，要么根据需要扩展图表的大小，或者显示第二列图例。

https://jsfiddle.net/4y800onc/

如果您切换到经典模式，您会看到它尝试了一个非常奇怪的水平图例分页。不幸的是我无法切换到经典模式（我的应用程序依赖于材料模式）

  google.charts.load('current', {
    'packages': ['line', 'corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Average Temperature");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average Hours of Daylight");


    data.addRows([
      [new Date(2014, 0), -.5, 5.7, 8, 13, 2, 9, 1, 10, 1, 11, 13, 12, 7, 6, 13, 2, 12, 3, 13, 11, 10, 5, 4, 12, 7, 11, 11, 12, 2, 9, 2, 4, 7, 8, 3, 1],
      [new Date(2014, 1), .4, 8.7, 10, 10, 7, 5, 7, 2, 13, 4, 6, 6, 10, 2, 2, 3, 10, 6, 8, 10, 1, 12, 13, 3, 3, 6, 3, 11, 12, 7, 12, 10, 8, 4, 12, 10],
      [new Date(2014, 2), .5, 12, 1, 10, 10, 7, 4, 5, 10, 11, 7, 7, 4, 13, 8, 5, 8, 8, 7, 5, 12, 4, 3, 6, 4, 2, 11, 7, 7, 7, 9, 11, 13, 9, 12, 11],
      [new Date(2014, 3), 2.9, 15.3, 2, 3, 7, 10, 12, 11, 11, 11, 1, 5, 8, 3, 7, 2, 1, 3, 2, 8, 13, 8, 11, 6, 8, 9, 1, 8, 9, 4, 6, 8, 9, 2, 2, 1],
      [new Date(2014, 4), 6.3, 18.6, 2, 13, 8, 2, 1, 3, 13, 9, 4, 4, 11, 1, 2, 13, 4, 5, 9, 8, 7, 4, 12, 1, 6, 11, 5, 5, 7, 6, 3, 5, 5, 7, 3, 11],
      [new Date(2014, 5), 9, 20.9, 3, 8, 2, 5, 9, 13, 12, 3, 9, 7, 8, 3, 2, 13, 1, 1, 10, 11, 4, 4, 6, 2, 5, 13, 2, 12, 6, 13, 9, 6, 7, 12, 4, 3],
      [new Date(2014, 6), 10.6, 19.8, 6, 10, 6, 12, 1, 4, 2, 6, 12, 7, 9, 12, 3, 1, 12, 7, 6, 12, 5, 9, 6, 13, 9, 1, 12, 13, 10, 5, 12, 1, 4, 6, 7, 1],
      [new Date(2014, 7), 10.3, 16.6, 6, 10, 11, 2, 10, 8, 5, 7, 9, 10, 11, 3, 13, 4, 10, 9, 7, 4, 8, 3, 11, 11, 1, 1, 13, 3, 4, 8, 2, 8, 11, 2, 3, 11],
      [new Date(2014, 8), 7.4, 13.3, 3, 12, 1, 10, 10, 5, 1, 1, 12, 8, 13, 9, 2, 3, 9, 9, 2, 6, 12, 5, 13, 1, 10, 11, 7, 8, 3, 12, 9, 4, 2, 10, 9, 12],
      [new Date(2014, 9), 4.4, 9.9, 10, 7, 5, 1, 6, 5, 5, 1, 13, 6, 1, 4, 7, 12, 12, 10, 1, 7, 4, 12, 12, 11, 10, 13, 7, 12, 13, 5, 10, 11, 5, 5, 5, 7],
      [new Date(2014, 10), 1.1, 6.6, 12, 5, 2, 13, 5, 8, 12, 8, 12, 8, 5, 1, 2, 11, 6, 11, 13, 3, 9, 7, 2, 13, 3, 2, 7, 11, 8, 8, 9, 9, 13, 12, 13, 11],
      [new Date(2014, 11), -.2, 4.5, 5, 8, 3, 2, 4, 12, 10, 6, 10, 11, 4, 1, 8, 6, 13, 13, 9, 8, 10, 1, 11, 2, 9, 3, 1, 13, 12, 4, 1, 1, 9, 10, 8, 5]
    ]);

    var materialOptions = {
      chart: {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
      },
      width: 900,
      height: 500,
      series: {
        // Gives each series an axis name that matches the Y-axis below.
        0: {
          axis: 'Temps'
        },
        1: {
          axis: 'Daylight'
        }
      },
      axes: {
        // Adds labels to each axis; they don't have to match the axis names.
        y: {
          Temps: {
            label: 'Temps (Celsius)'
          },
          Daylight: {
            label: 'Daylight'
          }
        }
      }
    };

    var classicOptions = {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
      width: 900,
      height: 500,
      // Gives each series an axis that matches the vAxes number below.
      series: {
        0: {
          targetAxisIndex: 0
        },
        1: {
          targetAxisIndex: 1
        }
      },
      vAxes: {
        // Adds titles to each axis.
        0: {
          title: 'Temps (Celsius)'
        },
        1: {
          title: 'Daylight'
        }
      },
      hAxis: {
        ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
          new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
          new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
        ]
      },
      vAxis: {
        viewWindow: {
          max: 30
        }
      }
    };

    function drawMaterialChart() {
      var materialChart = new google.charts.Line(chartDiv);
      materialChart.draw(data, materialOptions);
      button.innerText = 'Change to Classic';
      button.onclick = drawClassicChart;
    }

    function drawClassicChart() {
      var classicChart = new google.visualization.LineChart(chartDiv);
      classicChart.draw(data, classicOptions);
      button.innerText = 'Change to Material';
      button.onclick = drawMaterialChart;
    }

    drawMaterialChart();

  }