Load Highcharts dynamisch mit dynamischer Konfigurationsoption

Question

Ich verwende Highcharts. Ich lade Highcharts dynamisch mit ng-repeat.

<div ng-repeat="(key,value) in chartCheckboxes track by $index"> 
    <div class="card" id="{{key}}"> 
      <div class="card-body" id="{{key}}"> 
       <highchart id="{{value.chartId}}" config="value.chartConfig"></highchart> 
      </div> 
    </div> 
</div> 

Es gibt ein Objekt der Größe 20, das 20 Highcharts auf Ansichten lädt.

$scope.chartCheckboxes = { 
turnover :{ 
     checked : true, 
     title:"Turnover", 
     chartId: "chart1", 
     chartConfig: "highchartsTurnover" 
}, 
operatingProfits :{ 
     checked : true, 
     title:"Operating Profit", 
     chartId: "chart2", 
     chartConfig: "highchartsOperatingProfit" 
} 
//.....like wise another 18 objects 
} 

Problem ist Config Attribut innerhalb highcharts Element

<highchart id="{{item.chartId}}" config="item.chartConfig"></highchart> 

nicht dynamisch hinzugefügt Wert eingestellt, der in der Steuereinheit eingestellt wird. Ich habe die Interpolationsanweisung {{}} nicht verwendet, sie kann jedoch immer noch nicht angezeigt werden.

Ich habe Hilfe dieser Beitrag dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng

aber kann nicht der Lage Graphen zu laden. Aber, wenn es mit statischen Werten geladen wird, lädt es richtig.

<highchart id="{{item.chartId}}" config="highchartsTurnover"></highchart> 

Kann mir bitte jemand dabei helfen.

Answer 1

Grundsätzlich übergeben Sie nur einen string Wert der Konfigurationsvariable, idealerweise sollten Sie den Variablenwert aagainst scope & auswerten und ihn dann an das Attribut zurückgeben. Dies kann leicht durch Definieren einer Funktion erreicht werden.

Markup

<highchart id="{{item.chartId}}" 
    config="getComfig(item.chartConfig)"> 
</highchart> 

-Code

$scope.getConfig = function (configName) { 
    return $scope[configName]; 
}