Jquery 使用angular.js创建highchart图形

我花了4个小时试着让这件事成功。我对angular.js、jquery、highcharts和所有这些东西都很陌生，我找不到解决这个问题的方法

我想做的是在一个div中创建一个highchart图形。图形的json是从后端以正确的方式提供的，因此无需对json进行任何更改

因此，我做了以下工作：

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

首先，在html中：

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

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

如果现在你认为问题出在json上，这可能会让你的想法有所不同。如果我按以下形式更改控制器，则图形将完美显示：

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

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

---

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

资源的

查询

方法本质上是异步的。您需要在回调中进行数据绑定。因此，代码变为

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

也就是说，这不是以角度的方式来达到的效果。控制器不用于操纵视图

---

您应该查看

angularjs

指令以实现此功能。我在这里发现了一个这样的指令

DOM脚本在Angular Controller中是不受欢迎的，但不用担心这就是Angular指令的作用

试试像

JS*：

HTML*：

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

如果图表是交互式的，事情会变得更复杂。您必须使用并且可能使用“在本地范围属性和通过attr属性的值定义的name的父范围属性之间设置双向绑定”

---

*代码未测试

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

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

---

这里还有另一条指令

演示：

这允许您使用以下html创建highchart：

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

在上面的例子中，

chart.series

是一个javascript对象数组，表示图表上的系列，这些对象采用标准的Highcharts选项。然后angularjs会观察这些变化

chart.options

是highcharts初始化选项-也关注更改。尽管对其所做的更改会重新创建整个图表

---

chart.title

是highcharts的标题对象-也请注意更改。

请查看相关主题谢谢您的回答！这确实解决了问题，但如果正确的方法是使用指令，我将对此进行研究。

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