我希望在新的google chars API上获得传奇分页。我之前看到它是可能的，但现在没有找到任何文件。
如果不再可能，我怎样才能获得我的线图图例来扩展图表div？
我将div设置为最小高度：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();
}