-çift de ben iki model var

Question

Highcharts-ng ile bağımlılık enjeksiyon yapmak için: iposectors ve ipomarketcap, parametreye bağlı olarak modelin bir örneğini oluşturan bir Fabrika ve BindingCode Bu hep birlikte bağlanır. Modeller, test için sabit kodlanmış verilere sahiptir, ancak verileri API'dan almayı planlamaktadır. İşte keman: highcharts.

Hiçbir şey görünmüyor ... Hata ayıklayıcı satırında - Highchart nesnesinin oluşturulduğunu ve tüm verilerin eklendiğini, ancak yalnızca varsayılan başlığın göründüğünü görebiliyorum. Neyi eksik?

 var myapp = angular.module('myApp', ["highcharts-ng"]); 
    myapp.controller('myctrl', BindingCode); 
    myapp.factory("Factory", Factory); 

    function iposectors() { 
     this.charttitle = "Sector Distribution"; 
     this.apidata = [ 
      ['APP Android', 45.0], 
      ['APP Ios', 26.8], 
      ['Widget Web', 12.8], 
      ['MTC BAckoffice', 8.5], 
      ['Correo electrónico', 6.2], 
      ['Facebook', 6.2], 
      ['Twitter', 6.2], 
      ['Teléfono', 6.2], 
      ['Presencial', 6.2], 
     ]; 
     this.chartConfig = { 
      options: { 
       chart: { 
        type: 'pie' 
       }, 
       plotOptions: { 
        pie: { 
         dataLabels: { 
          enabled: false 
         } 
        } 
       }, 
       legend: { 
        enabled: true, 
        layout: 'vertical', 
        align: 'left', 
        height: 135, 
        width: 160, 
        verticalAlign: 'middle', 
        useHTML: true, 
        labelFormatter: function() { 
         return '<div style="text-align: left; width:120px;float:left;">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>'; 
        }, 
        itemStyle: { 
         color: '#421C40', 
         fontWeight: 'bold', 
         fontFamily: 'Century Gothic', 
         fontSize: '10px' 
        } 
       }, 
       tooltip: { 
        pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>' 
       }, 
      }, 
      title: { 
       text: this.charttitle, 
       align: 'center', 
       verticalAlign: 'top' 
      }, 
      series: [{ 
       name: 'Weight', 
       size: '75%', 
       showInLegend: true, 
       data: this.apidata 
      }], 
      loading: false 
     } 
    } 

    function ipomarketcap() { 
     this.charttitle = "Market Cap Distribution"; 
     this.apidata = [ 
      ['MC APP Android', 45.0], 
      ['MC APP Ios', 26.8], 
      ['MC Widget Web', 12.8], 
      ['MC MTC BAckoffice', 8.5], 
      ['MC Correo electrónico', 6.2], 
      ['MC Facebook', 6.2], 
      ['MC Twitter', 6.2], 
      ['MC Teléfono', 6.2], 
      ['MC Presencial', 6.2], 
     ]; 
     this.chartConfig = { 
      options: { 
       chart: { 
        type: 'pie' 
       }, 
       plotOptions: { 
        pie: { 
         dataLabels: { 
          enabled: false 
         } 
        } 
       }, 
       legend: { 
        enabled: true, 
        layout: 'vertical', 
        align: 'left', 
        height: 135, 
        width: 160, 
        verticalAlign: 'middle', 
        useHTML: true, 
        labelFormatter: function() { 
         return '<div style="text-align: left; width:120px;float:left;">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>'; 
        }, 
        itemStyle: { 
         color: '#421C40', 
         fontWeight: 'bold', 
         fontFamily: 'Century Gothic', 
         fontSize: '10px' 
        } 
       }, 
       tooltip: { 
        pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>' 
       }, 
      }, 
      title: { 
       text: this.charttitle, 
       align: 'center', 
       verticalAlign: 'top' 
      }, 
      series: [{ 
       name: 'Weight', 
       size: '75%', 
       showInLegend: true, 
       data: this.apidata 
      }], 
      loading: false 
     } 
    } 

    function BindingCode($scope, Factory) { 

     $scope.iposectors = Factory.CreatePieChart('iposectors'); 
     debugger; 
    } 

    function Factory() { 
     return { 
      CreatePieChart: function (type) { 
       if (type == 'iposectors') { 
        return new iposectors(); 
       } 
       else { 
        return new ipomarketcap(); 
       } 
      } 
     } 
    } 

html sayfası

<div ng-app="myApp"> 
     <div ng-controller="myctrl"> 
      @*<highchart id="chart1" config="highchartsNG"></highchart>*@ 
      <highchart id="chart1" config="chartConfig" class="span9"></highchart> 
     </div> 
    </div> 

Answer 1

sorun Highcharts-ng $scope değişkeni yapılandırma beklediğini ederken veri, iposectors mülke binded olmasıdır.

function BindingCode($scope, Factory) { 

    $scope.iposectors = Factory.CreatePieChart('iposectors'); 
    $scope.chartConfig = $scope.iposectors.chartConfig; 

} 

Canlı demo: