Javascript 将折线图转换为角度视图中的Google注释图

目前，我有一个角度折线图和网格，显示了股票投资组合的月度表现

网格现在很好，但我想调整图表，使其看起来更像谷歌金融图表，提供一个累积回报，可以在谷歌金融允许的时间段内放大和缩小（最好是1年、2年、全部和自定义）。 谷歌的注释图表似乎与此最为接近

有人能给我一些关于如何切换我目前使用的图形样式的提示吗？我如何使图表显示（1+网格中的月度回报）累积相乘？多谢各位

控制器：

angular.module('ReturnsCtrl', []).controller('ReturnsController', function($scope, $http, $filter, FUNDS, DATES, FUNDMAP, BENCHMARKS, BENCHMARKMAP) {

    $scope.start = new Date(DATES.minDate);
    $scope.end = new Date(DATES.maxDate)
    $scope.minDate = new Date(DATES.minDate);
    $scope.maxDate = new Date(DATES.maxDate);

    $scope.items = FUNDS;
    $scope.benchmarks = BENCHMARKS

    var cellColor = function(grid, row, col, rowIndex, colIndex) {
      var val = grid.getCellValue(row, col);
      if(val < 0) {
        return 'red';
      }
    }

    $scope.gridOptions = {
      columnDefs: [{ field: 'year', displayName: 'Year' },
                  { field: 'January', displayName: 'Jan',
                    cellClass: cellColor },
                  { field: 'February', displayName: 'Feb',
                    cellClass: cellColor},
                  { field: 'March', displayName: 'Mar' ,
                    cellClass: cellColor},
                  { field: 'April', displayName: 'Apr' ,
                    cellClass: cellColor},
                  { field: 'May', displayName: 'May',
                    cellClass: cellColor },
                  { field: 'June', displayName: 'June',
                    cellClass: cellColor },
                  { field: 'July', displayName: 'July',
                    cellClass: cellColor },
                  { field: 'August', displayName: 'Aug',
                    cellClass: cellColor },
                  { field: 'September', displayName: 'Sept',
                    cellClass: cellColor },
                  { field: 'October', displayName: 'Oct',
                    cellClass: cellColor },
                  { field: 'November', displayName: 'Nov',
                    cellClass: cellColor },
                  { field: 'December', displayName: 'Dec',
                    cellClass: cellColor },
                  { field: 'YearlyReturn', diplayNmae: 'Yearly', cellClass: cellColor}]
  }

  $scope.calculate = function() {
    var months = [ "January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
    var shortMonth = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    $scope.chartData = {
      returns: [],
      labels: [],
      series: []
    }
    var fundName = FUNDMAP[$scope.data.fund]
    $scope.config = {
      params:{
        startDate:$filter('date')($scope.start, "yyyy-MM-dd"),
        endDate:$filter('date')($scope.end, "yyyy-MM-dd"),
        cik:$scope.data.fund,
        startingAmount:10000,
        benchmark:$scope.data.benchmark
      }
    }

    $http.get('/api/returns', $scope.config).success(function(data) {

      var labels = []
      var returnsList = [];
      var values = []
      $scope.chartData.series.push(fundName)
      for(var d in data['requested']) {
        for(var i in months)
          if(data['requested'][d].hasOwnProperty(months[i])) {
            labels.push(data['requested'][d]['year'] + " " + shortMonth[i] )
            values.push(data['requested'][d][months[i]])
          }
      }
      $scope.chartData.returns.push(values)

      angular.forEach(data['benchmark'], function(value, key) {
        values = []
        for(var d in value) {
          for(var i in months) {
            if(value[d].hasOwnProperty(months[i])) {
              values.push(value[d][months[i]])
            }
          }
        }
        $scope.chartData.series.push(BENCHMARKMAP[$scope.data.benchmark])
        $scope.chartData.returns.push(values)
      })

      $scope.gridOptions.data = data['requested']

      $scope.chartData.labels = labels

    }).error(function() {
      alert("Error");
    })
  };


  $scope.noWeekendsPredicate = function(date) {
      var day = date.getDay();
      return day > 0 && day < 6;
    }

    $scope.greaterThanStart = function(date) {
      var day = date.getDay();
      if(day === 0 || day === 6) {
          return false;
      }

      if(date.getYear()!=$scope.start.getYear()) return date.getYear() > $scope.start.getYear();
      else if(date.getMonth()!=$scope.start.getMonth()) return date.getMonth()> $scope.start.getMonth();
      else if(date.getDate()!=$scope.start.getDate()) return date.getDate() > $scope.start.getDate();
      return false;
    }

});

angular.module（'ReturnsCtrl'，[]）.controller（'ReturnsController'，函数（$scope，$http，$filter，FUNDS，DATES，FUNDMAP，BENCHMARKMAP）{
$scope.start=新日期（DATES.minDate）；
$scope.end=新日期（DATES.maxDate）
$scope.minDate=新日期（DATES.minDate）；
$scope.maxDate=新日期（DATES.maxDate）；
$scope.items=资金；
$scope.benchmarks=基准
var cellColor=函数（网格、行、列、行索引、共索引）{
var val=grid.getCellValue（行、列）；
if（val<0）{
返回“红色”；
}
}
$scope.gridOptions={
columnDefs:[{field:'year'，displayName:'year'}，
{字段：“一月”，显示名称：“一月”，
cellClass:cellColor}，
{字段：“二月”，显示名称：“二月”，
cellClass:cellColor}，
{字段：“三月”，显示名称：“三月”，
cellClass:cellColor}，
{字段：'April'，显示名称：'Apr'，
cellClass:cellColor}，
{字段：“May”，显示名称：“May”，
cellClass:cellColor}，
{字段：'June'，显示名称：'June'，
cellClass:cellColor}，
{字段：'July'，显示名称：'July'，
cellClass:cellColor}，
{字段：“八月”，显示名称：“八月”，
cellClass:cellColor}，
{字段：“九月”，显示名称：“九月”，
cellClass:cellColor}，
{字段：“十月”，显示名称：“十月”，
cellClass:cellColor}，
{字段：“十一月”，显示名称：“十一月”，
cellClass:cellColor}，
{字段：“十二月”，显示名称：“十二月”，
cellClass:cellColor}，
{字段：'YearlyReturn'，diplayNmae:'yearal'，cellClass:cellColor}]
}
$scope.calculate=函数（）{
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var shortMonth=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
$scope.chartData={
返回：[]，
标签：[]，
系列：[]
}
var fundName=FUNDMAP[$scope.data.fund]
$scope.config={
参数：{
开始日期：$filter（'date'）（$scope.start，“yyyy-MM-dd”），
endDate:$filter（'date'）（$scope.end，“yyyy-MM-dd”），
cik:$scope.data.fund，
启动金额：10000，
基准：$scope.data.benchmark
}
}
$http.get（'/api/returns'，$scope.config）.success（函数（数据）{
变量标签=[]
var returnsList=[]；
var值=[]
$scope.chartData.series.push（fundName）
for（数据中的var d[“请求的”]）{
对于（var i，以月为单位）
如果（数据['requested'][d].hasOwnProperty（月[i]））{
labels.push（数据['requested'][d]['year']+''+shortMonth[i]）
推送（数据['请求][d][months[i]]
}
}
$scope.chartData.returns.push（值）
forEach（数据['benchmark']，函数（值，键）{
值=[]
for（var d值）{
对于（var i，以月为单位）{
if（值[d].hasOwnProperty（月[i]））{
价值推送（价值[d][months[i]]
}
}
}
$scope.chartData.series.push（BENCHMARKMAP[$scope.data.benchmark]）
$scope.chartData.returns.push（值）
})
$scope.gridOptions.data=data['requested']
$scope.chartData.labels=标签
}).错误（函数（）{
警报（“错误”）；
})
};
$scope.noWeekendsPredicate=函数（日期）{
var day=date.getDay（）；
返回日>0日和返回日<6日；
}
$scope.greaterThanStart=函数（日期）{
var day=date.getDay（）；
如果（天===0 | |天===6）{
返回false；
}
如果（date.getYear（）！=$scope.start.getYear（））返回日期.getYear（）>$scope.start.getYear（）；
else if（date.getMonth（）！=$scope.start.getMonth（））返回日期.getMonth（）>$scope.start.getMonth（）；
如果（date.getDate（）！=$scope.start.getDate（））返回日期.getDate（）>$scope.start.getDate（）；
返回false；
}
});

视图：

退换商品
对冲基金：
---请选择---
{{option.name}
基准：
---请选择---
{{option.name}


算计

任何帮助都将不胜感激。我不确定从哪里开始，或者我是否可以使用相同的控制器/我是否需要创建另一个javascript文件来使用google注释图表

<html>
  <div class="jumbotron text-center">
    <h1> Returns </h1>


    <form class="form-inline">
      <label for="singleSelectFund">Hedge Fund:</label>
      <select name="singleSelectFund" id="singleSelectFund" ng-model="data.fund" required>
        <option value="">---Please select---</option>
        <option ng-repeat="option in items" value="{{option.id}}">{{option.name}}</option>
      </select>

      <label for="singleSelectBenchmark">Benchmark:</label>
      <select name="singleSelectBenchmark" id="singleSelectBenchmark" ng-model="data.benchmark" required>
        <option value="">---Please select---</option>
        <option ng-repeat="option in benchmarks" value="{{option.code}}">{{option.name}}</option>
      </select><br>

         <button type="submit" class="btn btn-primary" ng-click="calculate()">Calculate</button>
    </form>

    <canvas id="line" class="chart chart-line" chart-data="chartData.returns"
      chart-labels="chartData.labels" chart-legend="true"
      chart-click="onClick" chart-series="chartData.series">
    </canvas>

    <div id="grid1" ui-grid="gridOptions" class="grid"></div>


  </div>
</html>