Fatal编程技术网
  • javascript/
  • Javascript 数字格式({ 图案：“#mm” }); //将数据格式化为mm。 对于（var colIndex=1；colIndex如果（（props.column==0）和&（props.row！==null））{2。要获取年份值，我们需要使用图表包装器中的过滤数据表

Javascript 数字格式({ 图案：“#mm” }); //将数据格式化为mm。 对于（var colIndex=1；colIndex如果（（props.column==0）和&（props.row！==null））{2。要获取年份值，我们需要使用图表包装器中的过滤数据表

javascript google-visualization

Javascript 数字格式({ 图案：“#mm” }); //将数据格式化为mm。 对于（var colIndex=1；colIndex如果（（props.column==0）和&（props.row！==null））{2。要获取年份值，我们需要使用图表包装器中的过滤数据表,javascript,controls,google-visualization,trendline,Javascript,Controls,Google Visualization,Trendline,数字格式({ 图案：“#mm” }); //将数据格式化为mm。 对于（var colIndex=1；colIndex如果（（props.column==0）和&（props.row！==null））{2。要获取年份值，我们需要使用图表包装器中的过滤数据表-->var year=MSLChart.getDataTable（）.getValue（props.row，0）再次感谢@WhiteHat。工具提示中弹出的年份仍然与工具提示正下方x轴上的年份不匹配？例如，如果您选择1904和2120，然后将

数字格式({ 图案：“#mm” }); //将数据格式化为mm。 对于（var colIndex=1；colIndex
这太棒了@WhiteHat。非常感谢。有没有办法在每条趋势线的工具提示中隐藏方程式，而只显示年份和海平面高度？鉴于图例中已经显示了趋势线方程，我觉得它只是使工具提示复杂化，使外行更难理解。此外，是否可以在趋势线工具提示中以不带逗号和小数点的整数显示年份和高度，如观察数据的工具提示中所示，即“2029:1962 mm”，而不是“2029.826:1962.449”？谢谢@Whitehat。只需阅读谷歌图表工具提示指南，就可以尝试并遵循您所做的操作。有几个问题：1。当您将鼠标悬停在图例上时，是否会产生错误？2.当您选择除1904年和2018年以外的开始和结束年份，然后将鼠标悬停在任一趋势线上的任何点上时，工具提示中弹出的年份与工具提示正下方x轴上的年份不匹配？谢谢，上面的编辑已更改。1.由于mouseover事件在图例上触发，我们需要确保行不为null-->
如果（（props.column==0）和&（props.row！==null））{
2。要获取年份值，我们需要使用图表包装器中的过滤数据表-->
var year=MSLChart.getDataTable（）.getValue（props.row，0）再次感谢@WhiteHat。工具提示中弹出的年份仍然与工具提示正下方x轴上的年份不匹配？例如，如果您选择1904和2120，然后将鼠标悬停在x轴上2120正上方的任一趋势线上，工具提示中返回的年份是2062，而它应该是2120。我尝试了解决这个问题是我自己，但没走多远。太好了，有时候我在洞里走多远，我找不到回去的路。那应该很好。。。

<html>

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

google.charts.load('current', {
  packages: ['controls']
}).then(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 data into 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: {
      maxValue:2120,
      filterColumnLabel: 'Year',
      ui: {
        cssClass: 'filter-date',
        format: {pattern: '0000'},
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    },
    "state": {"lowValue": 1904, "highValue": 2018},
  });

  google.visualization.events.addListener(YearPicker, 'statechange', filterChange);

  var MSLChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      fontSize: '14',
      title: 'Timbucktoo Annual Mean Sea Level Summary',
      hAxis: {title: 'Year', format: '0000'},
      vAxis: {title: 'Height above Chart Datum (mm)', format:'###0'},
      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]}
  });

  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);
   try {
    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);
     }
     catch (error) {alert("Please choose a start year less than or equal to 2018");
     window.location.reload(false);
     exit;
     }
    var state = YearPicker.getState();
      var EndYear = state.highValue;
    // re-draw chart
    MSLChart.setOption('vAxis.viewWindow.max', chartLayout.getVAxisValue(yAxisCoords.max));
    MSLChart.setOption('vAxis.viewWindow.min', chartLayout.getVAxisValue(yAxisCoords.min));
    MSLChart.setOption('hAxis.viewWindow.max', EndYear);
    MSLChart.draw();
    google.visualization.events.addOneTimeListener(MSLChart.getChart(), 'ready', filterChange);
    }

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')
  ).bind(YearPicker, MSLChart).draw(data);
}
</script>
  <div id="dashboard_div">
    <div id="chart_div"></div>
    <div id="filter_div"></div>
  </div>
</html>



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



while (boundsLine !== null) {
  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);
};



google.visualization.events.addListener(YearPicker, 'statechange', function () {
  var state = YearPicker.getState();
  state.lowValue = Math.min(2018, state.lowValue);
  YearPicker.setState({
    lowValue: state.lowValue,
    highValue: state.highValue
  });
  YearPicker.draw();
  filterChange();
});