Question

我花了最后4个小时试图让这件事发挥作用。我对angular.js，jquery，highcharts以及所有这些东西都很新，我找不到解决这个问题的方法。

我要做的是在div中创建一个高图图形。图形的json从后端以正确的方式出现，因此没有必要对json进行任何更改。

所以，我做了以下事情：

首先，在html中：

<div ng-controller="ChartController">
  <div class="chart-container" id="chartContainer"></div>
</div>

为了收集数据，我做了以下内容：

var termomether = angular.module('termomether', [ 'ngResource' ]);

termomether.factory('Chart', function($resource) {
  return $resource('/app/api/chart', {}, {
    query : {
      method : 'GET',
      params : {},
      isArray : true
    }
  });
});

termomether.controller('ChartController', function($scope, Chart) {
  $('#chartContainer').highcharts(Chart.query())
});

结果是图形显示但是为空。它具有我预期的大小，但没有数据，它显示一个空白框。

如果在这一刻你认为问题与json有关，这可能会让你思考与众不同。如果我以下面的形式更改控制器，图形将完美显示：

var termomether = angular.module('termomether', [ 'ngResource' ]);

termomether.controller('ChartController', function($scope, $http) {
  $http.get('api/chart').success(function(items) {
    $(function() {
      $('#chartContainer').highcharts(items)
    }); 
  });
});

因此......我不知道为什么它不能在使用工厂和资源的控制器中工作

Answer 1

资源上的query方法本质上是异步的。您需要在回调中执行数据绑定。所以代码变成了

Chart.query(function(data) {
$('#chartContainer').highcharts(data);
});

说，这不是实现结果的角度方式。控制器不用于操纵视图。

您应该查看angularjs指令以实现此功能。我在这里找到了一个这样的指令https://github.com/rootux/angular-highcharts-directive

Answer 2

在角度控制器中不鼓励使用DOM脚本，但担心这不是Angular Directives的亮点。

尝试类似......

JS *：

(function () {

    function SomeController($scope, $http) {
        // Load your chart data
        $http.get('/chart/123').success(function (data) {
            $scope.chartOpts = data;
        });
    }

    function highChartDirective() {
        return function (scope, $element, attr) {
            // Create the chart when the scope variable specified by the value of the `options` attribute changes
            // - If `options` is updated more than once, then you may have to destroy/reset the highchart instance.
            scope.$watch(attr.options, function (options) {
                if (options) {
                    $element.highcharts(options);
                }
            });
        };
    }

    // Note, controllers and directives should be defined in separate modules.
    angular.module('app', [])
        .controller('SomeController', ['$scope', '$http', SomeController])
        .directive('highChart', [highChartDirective]);
}());

HTML *：

<div ng-controller="SomeController">
    <div high-chart options="chartOpts"></div>
</div>

如果您的图表是交互式的，事情会变得更复杂。您必须使用Scope.$apply并可能使用Directive Definition Object来“设置本地范围属性与通过attr属性值定义的名称的父范围属性之间的双向绑定”。 / p>

*代码未经过测试

Answer 3

当我将HighCharts集成到用AngularJS编码的仪表板中时，我发现我必须使用$ timeout（）。没有延迟设置，因为我只想将渲染放在线程堆栈上并在AngularJS $ digest完成后立即执行。像这样：

$timeout(function() { var chart = new Highcharts.Chart(newSettings); });

Answer 4

这里有另一个指令https://github.com/pablojim/highcharts-ng

演示：http://jsfiddle.net/pablojim/Cp73s/

这允许您使用以下html：

创建高图

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

在上面的例子中，chart.series是一个表示图表系列的javascript对象数组 - 这些对象采用标准的Highcharts选项。然后由angularjs观察这些变化。

chart.options是高等教育资本化的选择 - 也关注变化。虽然对此的更改会重新创建整个图表。

chart.title是highcharts标题对象 - 也会进行更改。

使用angular.js创建高图图形

4 个答案: