动态垂直轴以适应Google折线图中的趋势线

Question

我不熟悉编码，但是在过去的几个月中，我设法创建了一个网站，该网站利用Google折线图和嵌入式线性趋势线来显示历史平均海平面和平均海平面速率在新西兰和太平洋各地的各个地区都有上升。每个位置都有自己的带有线性趋势线的Google折线图，以显示用户所选期间的平均海平面变化率。我现在想扩展每个Google折线图的功能，以便线性趋势和多项式趋势线都可以延展到2120年（目前仅显示到2018年），即使计算得出的可用数据最多使用了观察到的数据。到2018年。这将使用户能够预测到2020年的海平面高度。我意识到这种解释可能会造成混淆，因此请访问我的网站www.sealevel.nz以查看现有的图表，希望帮助理解我的问题。

下面是图表的扩展版本的代码，它同时显示线性和二次多项式趋势线，而Google折线图的x轴现在显示2120年。我的问题是我需要y轴进行调整动态地显示两条趋势线的整体，无论用户选择哪个时间段。例如，如果从日期范围滑块中选择1971年和2018年，则两条趋势线将分别在2017年（线性）和2031年（多项式）处被截断。我需要能够看到趋势线及其直到2120年的值。

请原谅我的新手编码技能。我的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://unpkg.com/mathjs/dist/math.min.js"></script>
<script type="text/javascript">

google.load('visualization', 'current', {'packages':['controls','corechart']});
google.setOnLoadCallback(initialize);
function initialize() {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1vn1iuhsG33XzFrC4QwkTdUnxOGdcPQOj-cuaEZeX-eA/edit#gid=0');
  query.send(drawDashboard);
}
function drawDashboard(response) {
  var data = response.getDataTable();
//Asign units of 'mm' to data.
    var formatMS = new google.visualization.NumberFormat({
    pattern: '# mm'
  });
  // format into data mm..
  for (var colIndex = 1; colIndex < data.getNumberOfColumns(); colIndex++) {
    formatMS.format(data, colIndex);
  }
 var YearPicker = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Year',
        'ui': {
       cssClass: 'filter-date',
          'format': { pattern: '0000' },
      'labelStacking': 'vertical',
      'allowTyping': false,
      'allowMultiple': false    
      }
    },
  });
  var MSLChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div',
    'options': {  
    'fontSize': '14', 
    'title': 'Timbucktoo Annual Mean Sea Level Summary',
        hAxis: {title: 'Year', format:'0000', maxValue: 2120},
        vAxis: {title: 'Height above Chart Datum (mm)', format:'0000'},
        'height': 600,
    chartArea: {height: '81%', width: '85%', left: 100},
    'legend': {'position': 'in', 'alignment':'end', textStyle: {fontSize: 13} },
    colors: ['blue'],
    trendlines: {
            0: {
                type: 'polynomial',
                degree: 2,
                color: 'green',
                visibleInLegend: true,
            },
            1: {
                type: 'linear',
                color: 'black',
                visibleInLegend: true,
            },
        },
        series: {
            0: { visibleInLegend: true },
            1: { visibleInLegend: false },
        },    
    },
    'view': {'columns': [0,1,2]}
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
    bind(YearPicker, MSLChart).

  draw(data)
 </script>

Answer 1

首先，我不确定为什么图表会绘制不可见的趋势线这有点棘手，因为我们首先必须绘制图表，为了找到趋势线的最大值。