Google Annotationchart - Rangechange上的Rebase index = 100

Question

我有一个Google注释图表来显示不同投资的相对表现。用户应该能够在选定的时间范围内比较性能，也就是说，一旦时间范围发生变化，系列值应在图表可见范围的开始日期重新设置/索引为100。

像Amcharts这样的其他软件包提供了“可比较”的功能，因此一直在寻找Google Docs中的“scaleColumns”和“scaleType”等选项以及其他问题，而不是找到任何关于如何执行此操作的线索。

是否有任何我可以使用且可能遗漏的功能，或者在“rangechange”上重新计算index = 100的DataTable的最佳方法。

代码和截图如下：

google.charts.load('current', {
  packages: ['corechart', 'line', 'table','annotationchart']
});
google.charts.setOnLoadCallback(drawChart);

// ---------- Chart ---------------------------- //
function drawChart() {
  //data query
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1Gw67zHpKyEd1nu_V698yqYqNgE0x21_ZE_QDHJmsgtE/gviz/tq?gid=803335131&headers=1&range=A1:n451');
  query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  var options = {
    title: 'Development of the choosen Portfolio since 2008',
    legend: {
      textStyle : { fontSize: 8 },
      maxLines : 2,
      position: 'top'
    },
    width: '30%',
    height: 700,
    lineWidth: 1,
    hAxis: {
      format: 'M/d/yy',
      title: 'Time'
    },
    vAxis: {
      scaleType: 'log',
      title: 'Return (log scale)'
    },
    //theme: 'maximized',
    chartArea:{
      left:0,
      top:20,
      width:'30%',
      height:'85%'
    },
    series: {
      22: {
        lineWidth: 3,
        color: 'red'
      }
    }
  };
  var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'))
  chart.draw(data, options);
}

google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);

function rangechange_handler(e) {
  console.log('You changed the range to ', e['start'], ' and ', e['end']);
  // How to recalculate datatable to keep index=100 for all series upon rangechange?
}

更新

有一种方法，正在努力：https://groups.google.com/forum/#!searchin/google-visualization-api/compare $ 20zoom | sort：relevant / google-visualization-api / 8HjybllsufY / z5uak6AymLcJ

Answer 1

经过一段时间的痛苦使其发挥作用，希望它有助于某人：https://jsfiddle.net/AlexHorn/a9z15syr/

var viewColumns = [0];
var colors = [];
for (var i = 0; i < columnIndices.length; i++) {
  viewColumns.push({
    label: data.getColumnLabel(columnIndices[i]),
    type: 'number',
    calc: (function(x) {
      // use a closure here to lock the value of i to each column
      return function(dt, row) {
        // return the value normalized to the first row in the view
        return dt.getValue(row, columnIndices[x]) / dt.getValue(0, columnIndices[x]);
      };
    })(i)
  });
}