使用 angular.js 创建一个 highchart 图形答案

【问题标题】：Create a highchart graphic using angular.js使用 angular.js 创建一个 highchart 图形
【发布时间】：2013-06-19 02:36:13
【问题描述】：

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

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

【问题讨论】：

请看相关话题stackoverflow.com/questions/15904739/…

标签： jquery angularjs highcharts

【解决方案1】：

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

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

说了，这不是angular方式达到的效果。控制器不用于操作视图。

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

【讨论】：

感谢您的回答！这确实解决了问题，但如果正确的方法是使用指令，我会看看。

【解决方案2】：

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

*代码未测试

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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 是 highcharts 初始化选项 - 也关注变化。尽管对此进行更改会重新创建整个图表。

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

【讨论】：