Charts 谷歌在材料中绘制图例页码

我期待着得到新的谷歌字符的API传奇分页。我以前认为这是可能的，但现在找不到任何文档

如果不再可能，如何让我的折线图图例展开charts div

我将div设置为最小高度：400px，它强制SVG设置为400px，并且不调整div的大小

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

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

---

你可以创造自己的传奇--

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

  }