使用angular.js創建一個高圖表

我花了最後4個小時試圖使這個工作。我對angular.js，jquery，highcharts和所有這些東西都很陌生，我找不到解決這個問題的方法。使用angular.js創建一個高圖表

我想要做的是在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) 
    }); 
    }); 
});

所以......我不知道爲什麼它沒有在使用工廠和資源控制器工作

來源

2013-06-19 Rumal

請看看相關主題http://stackoverflow.com/questions/15904739/rendering-highcharts-using-angular-js-directives –

資源上的query方法本質上是異步的。您需要在回調中進行數據綁定。所以代碼變成

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

說的是，這不是實現結果的角度方式。控制器不用於操縱視圖。

您應該看看angularjs指令來實現此功能。我在這裏發現了一個這樣的指令https://github.com/rootux/angular-highcharts-directive

來源

2013-06-19 03:05:03 Chandermani

謝謝你的回答！這真的解決了這個問題，但如果正確的方法是使用指令，我會看看這個。 – Rumal

在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屬性的值定義的名稱的父範圍屬性之間的雙向綁定」。

*代碼未測試

來源

2013-06-19 04:04:45 wmluke

當我綜合HighCharts到儀表板與AngularJS我發現我不得不使用$超時（）編碼。沒有延遲設置，因爲我只想將渲染放在線程堆棧上並在AngularJS $摘要完成後立即執行。事情是這樣的：

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

來源

2013-06-19 07:07:15 Phil

這裏有另一個指令https://github.com/pablojim/highcharts-ng

演示：http://jsfiddle.net/pablojim/Cp73s/

這允許你創建與下面的HTML一個highchart：

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

在上述情況下chart.series是代表圖表系列的JavaScript對象數組 - 這些都採用標準的Highcharts選項。然後這些被angularjs監視以進行任何更改。

chart.options是highcharts initalisation選項 - 也觀察變化。雖然對此的更改會重新創建整個圖表。

chart.title是highcharts標題對象 - 也觀察變化。

來源

2013-08-08 16:05:53 Pablojim

使用angular.js創建一個高圖表

回答

相關問題