通过创建一个angular.js图形highchart [英] Create a highchart graphic using angular.js

问题描述

我已经花了近4小时试图让这件事的工作。我很新与angular.js，jQuery的，highcharts和所有的东西，我不能找到解决这一问题的方式。

I've spent the last 4 hours trying to make this thing work. I'm very new with angular.js, jquery, highcharts and all that stuff and I can't find the way to fix this.

我试图做的是创建一个div一个highchart图形。为显卡的JSON进来从后端的正确方法，所以没有必要进行任何更改了JSON。

What I'm trying to do is create a highchart graphic in a div. The json for the graphics came in the right way from the backend, so it isn't necessary to make any change to the json.

所以，我做了以下内容：

So, I've done the following:

首先，在html：

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

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

And in order to gather the data, I've made the following:

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())
});

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

And the result is that the graphic is displayed, but empty. It has the size that I'm expected to have but doesn't have the data, it shows an empty white box.

如果在这个时候你在想这个问题是使用JSON，这也许是会让你觉得不同。如果我更改了以下形式的控制器，图形完美呈现：

If in this moment you are thinking that the problem is with the json, this maybe is going to make you think different. If I change the controller in the following form, the graphic is showed perfectly:

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

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

所以...我不知道为什么它没有在使用工厂和资源的控制工作。

Therefore... I don't have idea why it isn't working in the controller that use a factory and a resource

推荐答案

的查询对资源的方法是异步的性质。你需要做数据绑定回调。因此，code变为

The query method on resource is async in nature. You need to do data bind in the callback. So the code becomes

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

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

Said that, this is not the angular way to achieve the result. Controllers are not used to manipulate view.

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

You should look at angularjs directives to achieve this functionality. I found one such directive here https://github.com/rootux/angular-highcharts-directive

这篇关于通过创建一个angular.js图形highchart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！