Hiển thị Highcharts bằng Angular js Chỉ thị

Question

Tôi mới dùng JS Angular và cố gắng hiển thị highcharts của tôi (Basic Line) bằng cách tạo chỉ thị. Xin vui lòng cho tôi biết cách tiếp cận tôi nên làm theo ở đây. Bất kỳ trợ giúp sẽ được đánh giá cao.

Đây là kịch bản của tôi cho 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

Ví dụ về Biểu đồ hình tròn:

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

thực hiện thay thế ở đây: http://jsfiddle.net/pablojim/Cp73s/

này sử dụng https://github.com/pablojim/highcharts-ng

này cho phép bạn tạo ra một highchart với html dưới đây:

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

Trong trường hợp trên chart.series là một mảng của các đối tượng javascript đại diện cho hàng loạt trên bảng xếp hạng - những mất tùy chọn Highcharts chuẩn. Đây là những sau đó theo dõi bởi angularjs cho bất kỳ thay đổi.

chart.options là tùy chọn initalisation highcharts - cũng đã xem các thay đổi. Mặc dù những thay đổi này tái tạo toàn bộ biểu đồ.

chart.title là đối tượng tiêu đề highcharts - cũng đã xem các thay đổi.

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>

Hãy chắc chắn rằng highchart lib được thêm vào trong index.html