在Angular中将折线图转换为Google注释图表

Question

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

现在网格很好，但我想调整图表，使其看起来更像谷歌财务图表，给出累积回报，可以像谷歌财务允许的那样放大和缩小时间段（最好是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;
    }

});

查看：

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

非常感谢任何帮助。我不确定从哪里开始，或者如果我甚至可以使用相同的控制器/我是否需要创建另一个javascript文件来使用谷歌注释图表。