将AngularJS范围传递给JS图表

Question

我试图使用一个控制器中的数组，该控制器在我的html文件中某个Javascript中的该控制器中全局声明的$ scope中。 这可能吗？ 我尝试实现$ rootScope并没有成功，不确定实现是否存在问题，但是先调用$ rootScope，然后在控制台中将其定义为undefined，然后由控制器设置值。

这是我的控制器

function HomeCtrl($rootScope, $scope, $http, $filter){
    $rootScope.temp1 = [[gd(2016, 6, 1), 82], [gd(2016, 6, 7), 23], [gd(2016, 6, 14), 66]];
}

这是我的JS放在我的HTML中

    $(document).ready(function($rootScope) {

    console.log($rootScope.temp1);

    var data1 = $rootScope.temp1;

    var data2 = [
      [gd(2016, 6, 1), 82],
      [gd(2016, 6, 7), 23],
      [gd(2016, 6, 14), 66],
      [gd(2016, 6, 21), 9],
      [gd(2016, 6, 28), 119],
      [gd(2016, 6, 29), 6],
      [gd(2016, 6, 30), 9]
    ];

    var data3 = [
      [gd(2016, 6, 1), 822],
      [gd(2016, 6, 7), 232],
      [gd(2016, 6, 14), 626],
      [gd(2016, 6, 21), 92],
      [gd(2016, 6, 28), 1219],
      [gd(2016, 6, 29), 62],
      [gd(2016, 6, 30), 92]
    ];
    $("#canvas_dahs").length && $.plot($("#canvas_dahs"), [
      data1, data2, data3
    ], {
      series: {
        lines: {
          show: false,
          fill: true
        },
        splines: {
          show: true,
          tension: 0.4,
          lineWidth: 1,
          fill: 0.4
        },
        points: {
          radius: 0,
          show: true
        },
        shadowSize: 2
      },
      grid: {
        verticalLines: true,
        hoverable: true,
        clickable: true,
        tickColor: "#d5d5d5",
        borderWidth: 1,
        color: '#fff'
      },
      colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
      xaxis: {
        tickColor: "rgba(51, 51, 51, 0.06)",
        mode: "time",
        tickSize: [1, "day"],
        //tickLength: 10,
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
      },
      yaxis: {
        ticks: 8,
        tickColor: "rgba(51, 51, 51, 0.06)",
      },
      tooltip: false

    });

    function gd(year, month, day) {
      return new Date(year, month - 1, day).getTime();
    }
  });

Answer 1

我们不能将AngularJs变量传递到独立的JS图表库中，而需要使用直接与调用连接的图表。 我发现了其中两个，并通过@Nemeros建议了实际实现的angular-chart.js。

另一个是我测试的Angular-nvD3，它运行成功。