将 AngularJS 范围传递给 JS 图表

Question

我正在尝试使用控制器中的数组，该控制器位于我的 html 文件中某些 Javascript 中全局声明的 $scope 内。这可能吗？我尝试实施 $rootScope 但没有取得太大成功，不确定实施是否存在问题，但 $rootScope 首先被调用，我在控制台中得到未定义，然后控制器设置值。

这是我的控制器

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

这是我放在 HTML

中的 JS

    $(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，我测试过它并成功运行。

将 AngularJS 范围传递给 JS 图表

Passing AngularJS scope to a JS Chart

javascript

angularjs

angularjs-rootscope