使用angular.js创建高图图形
我花了最后4个小时试图让这件事发挥作用。 我对angular.js，jquery，highcharts和所有这些东西都很新，我找不到解决这个问题的方法。
我想要做的是在div中创建一个高图图形。 图形的json从后端以正确的方式出现，因此没有必要对json进行任何更改。
所以，我做了以下事情：
首先，在html中：
为了收集数据，我做了以下内容：
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上，这可能会让你思考与众不同。 如果我以下面的forms更改控制器，图形将完美显示：
var termomether = angular.module('termomether', [ 'ngResource' ]); termomether.controller('ChartController', function($scope, $http) { $http.get('api/chart').success(function(items) { $(function() { $('#chartContainer').highcharts(items) }); }); });
因此……我不知道为什么它不能在使用工厂和资源的控制器中工作
资源上的query方法本质上是异步的。 您需要在回调中执行数据绑定。 所以代码变成了
Chart.query(function(data) { $('#chartContainer').highcharts(data); });
说，这不是实现结果的角度方式。 控制器不用于操纵视图。
您应该查看angularjs指令来实现此function。 我在这里找到了一个这样的指令https://github.com/rootux/angular-highcharts-directive
在角度控制器中不鼓励使用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 *：
如果您的图表是交互式的，事情会变得更复杂 您必须使用Scope。$ apply和可能的指令定义对象来“设置本地范围属性与通过attr属性的值定义的名称的父范围属性之间的双向绑定”。
*代码未经测试
当我将HighCharts集成到用AngularJS编码的仪表板中时，我发现我必须使用$ timeout（）。 没有延迟设置，因为我只想将渲染放在线程堆栈上并在AngularJS $ digest完成后立即执行。 像这样的东西：
$timeout(function() { var chart = new Highcharts.Chart(newSettings); });
这里还有另一个指令https://github.com/pablojim/highcharts-ng
演示： http ： //jsfiddle.net/pablojim/Cp73s/
这允许您使用以下html创建高图：
在上面的例子中， chart.series是一个javascript对象数组，表示图表上的系列 – 这些对象采用标准的Highcharts选项。 然后由angularjs观察这些变化。
chart.options是高等教育的初始化选项 – 也关注变化。 虽然对此的更改会重新创建整个图表。
chart.title是highcharts标题对象 – 也可以观察更改。