Question

我正在使用highcharts。我正在使用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元素中的config属性

<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的配置变量值，理想情况下你应该评估该范围内的变量值＆amp;然后将其传递回属性。这可以通过定义函数轻松实现。

<强>标记

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

<强>代码

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

使用动态配置选项

1 个答案: