使用Angular js指令渲染Highcharts

Question

我是Angular JS的新手，並試圖通過創建指令來渲染我的highcharts（基本線）。請告訴我我應該在這裏遵循的方法。任何幫助，將不勝感激。

這裏是我的highcharts腳本：

<script type="text/javascript"> 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: '°C' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }] 
    }); 
}); 


    </script> 

Answer 1

餅圖的例子：

http://jsfiddle.net/csTzc/

function MyCtrl($scope, limitToFilter) { 
    $scope.ideas = [ 
    ['ideas1', 1], 
    ['ideas2', 8], 
    ['ideas3', 5] 
    ]; 

    $scope.limitedIdeas = limitToFilter($scope.ideas, 2); 
} 

angular.module('myApp', []) 
    .directive('hcPie', function() { 
    return { 
    restrict: 'C', 
    replace: true, 
    scope: { 
     items: '=' 
    }, 
    controller: function ($scope, $element, $attrs) { 
     console.log(2); 

    }, 
    template: '<div id="container" style="margin: 0 auto">not working</div>', 
    link: function (scope, element, attrs) { 
     console.log(3); 
     var chart = new Highcharts.Chart(options); 
     scope.$watch("items", function (newValue) { 
     chart.series[0].setData(newValue, true); 
     }, true); 

    } 
    } 
}); 

Answer 2

替代實現這裏：http://jsfiddle.net/pablojim/Cp73s/

它使用https://github.com/pablojim/highcharts-ng

這允許創建一個highchart與以下HTML：

<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標題對象 - 也觀察變化。

Answer 3

app.directive('hcChart', function() { 
 
\t return { 
 
\t \t \t restrict: 'A', 
 
\t \t \t template: '<div></div>', 
 
\t \t \t scope: { 
 
\t \t \t \t \t options: '=' 
 
\t \t \t \t }, 
 
\t \t \t link: function (scope , element, attribute) { 
 
       Highcharts.chart('chart', { 
 
       \t chartOptions: { 
 
         type: 'line' 
 
        }, 
 
         
 
        title: { 
 
         text: 'Temperature data' 
 
        }, 
 
       series: [{ 
 
         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
        }] 
 
       }); 
 
\t \t \t } 
 
\t } 
 
\t \t \t 
 
});

<div id="chart" hc-chart>Placeholder for generic chart</div>

確保highchart LIB在您的index.html