javascript - AngularJS 与 Highcharts 不带 JQuery

Question

所以我知道 JQuery 经常与 highcharts 一起使用，但出于我的目的，我没有使用它。我仅使用 javascript 将 highcharts 实现为 Angular，现在我尝试使用 .json 文件填充图表的系列数据。由于某种原因，当我尝试在 http.get 调用中加载图表(以读取 json 文件)时，图表不再显示。我不明白为什么。关于为什么会发生这种情况有什么见解吗？

http.get('data.json').success(function(data) {

 $scope.chartOptions =  {
   chart: { type: 'line' },
   title: { text: 'Fruit Consumption' },
   xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] },
   yAxis: { title: { text: 'Fruit eaten' } },
   series: [
      { name: 'Jane', data: [1, 0, 4] }, 
      { name: 'John', data: [5, 7, 3] }
   ]
 };
});

app.directive("highcharts", function() {
  return {
    link: function(scope, element, attrs) {
    var options = scope.$eval(attrs.highcharts);
    options.chart.renderTo = element[0];
    new Highcharts.Chart(options);
  }
};

});

Answer 1

在图表标记中，添加 ng-if="chartOptions"，以便在该对象存在之前不会加载。