1

在过去的 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)
    }); 
  });
});

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

4

4 回答 4

2

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

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

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

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

于 2013-06-19T03:05:03.790 回答
0

在 Angular 控制器中不鼓励使用 DOM 脚本，但不要担心这是 Angular 指令大放异彩的地方。

尝试类似...

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和可能的指令定义对象来“在本地范围属性和通过 attr 属性的值定义的名称的父范围属性之间设置双向绑定”。

*代码未经测试

于 2013-06-19T04:04:45.923 回答
0

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

$timeout(function() { var chart = new Highcharts.Chart(newSettings); });
于 2013-06-19T07:07:15.777 回答
0

这里还有另一个指令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是 highcharts 初始化选项 - 也注意变化。尽管对此的更改会重新创建整个图表。

chart.title是 highcharts 标题对象 - 也观察变化。

于 2013-08-08T16:05:53.693 回答