Javascript ({ 图表类型:“线条图”, 集装箱船:“海图分区”, 数据表:数据, 选项:{ 字体大小:“14”, 标题:“Timbucktoo年平均海平面汇总表”, hAxis:{title:'Year',format:'0000',maxValue:2120},

Javascript ({ 图表类型:“线条图”, 集装箱船:“海图分区”, 数据表:数据, 选项:{ 字体大小:“14”, 标题:“Timbucktoo年平均海平面汇总表”, hAxis:{title:'Year',format:'0000',maxValue:2120}, ,javascript,linechart,google-visualization,trendline,Javascript,Linechart,Google Visualization,Trendline,({ 图表类型:“线条图”, 集装箱船:“海图分区”, 数据表:数据, 选项:{ 字体大小:“14”, 标题:“Timbucktoo年平均海平面汇总表”, hAxis:{title:'Year',format:'0000',maxValue:2120}, vAxis:{标题:“海图基准面以上高度(mm)”,格式:'###0'}, 身高:600, 图表区:{高度:81%,宽度:85%,左侧:100}, 图例:{位置:'in',对齐:'end',文本样式:{fontSize:13}, 颜色:[“蓝色

({ 图表类型:“线条图”, 集装箱船:“海图分区”, 数据表:数据, 选项:{ 字体大小:“14”, 标题:“Timbucktoo年平均海平面汇总表”, hAxis:{title:'Year',format:'0000',maxValue:2120}, vAxis:{标题:“海图基准面以上高度(mm)”,格式:'###0'}, 身高:600, 图表区:{高度:81%,宽度:85%,左侧:100}, 图例:{位置:'in',对齐:'end',文本样式:{fontSize:13}, 颜色:[“蓝色”], 趋势线:{ 0: { 类型:'多项式', 学位:2, 颜色:“绿色”, visibleInLegend:是的, }, 1: { 类型:'线性', 颜色:'黑色', visibleInLegend:是的, }, }, 系列:{ 0:{visibleInLegend:true}, 1:{visibleInLegend:false}, }, }, 视图:{列:[0,1,2]} }); google.visualization.events.addOneTimeListener(MSLChart'ready',filterChange); 函数filterChange(){ //获取图表布局 var chartLayout=MSLChart.getChart().getChartLayoutInterface(); //获取y轴边界 var yAxisCoords={min:null,max:null}; var-lineIndex=0; var boundsLine=chartLayout.getBoundingBox('line#'+lineIndex); 做{ yaxiscords.max=yaxiscords.max | | boundsLine.top; yaxiscords.max=Math.min(yaxiscords.max,boundsLine.top); yaxiscords.min=yaxiscords.min | |(boundsLine.top+boundsLine.height); yaxiscords.min=Math.max(yaxiscords.min,(boundsLine.top+boundsLine.height)); lineIndex++; boundsLine=chartLayout.getBoundingBox('line#'+lineIndex); }while(boundsLine!==null); //重新绘制图表 MSLChart.setOption('vAxis.viewWindow.max',chartLayout.getVAxisValue(yAxisCoords.max)); MSLChart.setOption('vAxis.viewWindow.min',chartLayout.getVAxisValue(yAxisCoords.min)); MSLChart.draw(); google.visualization.events.addOneTimeListener(MSLChart.getChart(),'ready',filterChange); } var dashboard=new google.visualization.dashboard( document.getElementById('dashboard\u div') ).bind(YearPicker,MSLChart).draw(data); }


非常感谢@WhiteHat。你的想法让我目瞪口呆。如果你来新西兰,我会非常乐意给你买一两杯啤酒。在单独的评论中,我确实有几个问题如下:1。在某些年份,这一趋势确实会转为负值。例如,1932年和1990年,多项式趋势线变为负值,而线性趋势线保持正值。因此,在尝试计算这种情况下的最小y轴值时,我返回了两条趋势线的left、width和height属性,然后使用getVAxisValue方法返回了相应的y轴值,正如您所指出的,但我似乎只得到了无意义的值,注意:我注意到当最小轴值下降到1000以下时,
minValue
选项将忽略我们的值,并下降到零。改用
viewWindow
纠正了这个问题……问另一个问题可能会更容易,我很难理解所有的评论。我试着回答几个问题。1) 对于y轴最小值,我们需要找到直线的最底部点,因此我们从顶部开始,并添加高度。2) 将图表区域的左上角想象为位置0,0。它向左和向下增加。如果该线位于可见图表区域上方,则y坐标将为负值。至于另一个问题最好——让我们把这个问题称为donecheers,我来看看。你有没有可能把这个标记为已接受?查看投票按钮附近的复选标记。。。
<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>
var chartLayout = MSLChart.getChart().getChartLayoutInterface();
var yAxisCoords = {min: null, max: null};
var lineIndex = 0;
var boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
do {
  yAxisCoords.max = yAxisCoords.max || boundsLine.top;
  yAxisCoords.max = Math.min(yAxisCoords.max, boundsLine.top);
  yAxisCoords.min = yAxisCoords.min || (boundsLine.top + boundsLine.height);
  yAxisCoords.min = Math.max(yAxisCoords.min, (boundsLine.top + boundsLine.height));
  lineIndex++;
  boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
} while (boundsLine !== null);
MSLChart.setOption('vAxis.viewWindow.max', chartLayout.getVAxisValue(yAxisCoords.max));
MSLChart.setOption('vAxis.viewWindow.min', chartLayout.getVAxisValue(yAxisCoords.min));
MSLChart.draw();
google.visualization.events.addOneTimeListener(MSLChart, 'ready', filterChange);

function filterChange() {
  // get chart layout
  var chartLayout = MSLChart.getChart().getChartLayoutInterface();

  // get y-axis bounds
  var yAxisCoords = {min: null, max: null};
  var lineIndex = 0;
  var boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
  do {
    yAxisCoords.max = yAxisCoords.max || boundsLine.top;
    yAxisCoords.max = Math.min(yAxisCoords.max, boundsLine.top);
    yAxisCoords.min = yAxisCoords.min || (boundsLine.top + boundsLine.height);
    yAxisCoords.min = Math.max(yAxisCoords.min, (boundsLine.top + boundsLine.height));
    lineIndex++;
    boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
  } while (boundsLine !== null);

  // re-draw chart
  MSLChart.setOption('vAxis.viewWindow.max', chartLayout.getVAxisValue(yAxisCoords.max));
  MSLChart.setOption('vAxis.viewWindow.min', chartLayout.getVAxisValue(yAxisCoords.min));
  MSLChart.draw();
  google.visualization.events.addOneTimeListener(MSLChart.getChart(), 'ready', filterChange);
}