ダイナミック設定オプションでハイチャートを動的にロード

Question

ハイチャートを使用しています。 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> 

ビューに20個のハイチャートを読み込むサイズ20のオブジェクトがあります。

$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 
} 

問題highcharts素子

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

コントローラに設定されている設定しない動的に追加値、内部の設定属性です。補間命令{{}}を使用していませんが、まだ表示できません。

私はこの記事の助けにdynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng

が、カントのグラフをロードすることができました。しかし、静的な値を使ってロードすると、正しくロードされます。

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

誰でもこれを手伝ってください。

Answer 1

基本的には、stringの設定変数の値だけを渡しています。理想的には、その変数値を評価して範囲&を評価し、属性に戻すのが理想的です。これは、関数を定義することで簡単に実現できます。

マークアップ

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

コード

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