Javascript 如何在ng repeat angularjs中显示highcharts

我正在尝试以

ng repeat

以下是html：

<tr ng-repeat="perspective in perspectives">
   <td>
      <highcharts-pie class="hc-pie" items="value"></highcharts-pie>
   </td>
   <td>{{perspective.perfomance}}</td>
   <td class="right-align">{{perspective.current}}</td>
   <td class="right-align">{{perspective.previous}}</td>
   <td class="right-align isPluse-{{perspective.plus}}">{{perspective.variance}}</td>
</tr>

以下是指令：

.directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: element[0],
          type: 'column',
          backgroundColor: null
        },
        title: {
          text: null
        },
        subtitle: {
          text: null
        },
        xAxis: {
          categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
          ],
          labels: {
            enabled: false
          },
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          lineColor: 'transparent',
          tickLength: 0
        },
        yAxis: {
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          lineColor: 'transparent',
          min: 0,
          title: {
            text: null
          },
          labels: {
            enabled: false
          }
        },
        tooltip: {
          enabled: false
        },
        plotOptions: {
          column: {
            pointPadding: 0,
            borderWidth: 0,
            states: {
              hover: {
                color: '#FFFFFF'
              }
            }
          }
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'Value',
          color: '#EC5B00',
          data: scope.items
        }]
      });
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
        console.log(scope.items);
      }, true);
    }
  }
});

指令（'hcPie'，函数（）{ 返回{ 限制：“C”， 替换：正确， 范围：{ 项目：'=' }, 控制器：函数（$scope、$element、$attrs）{ }, 模板：“不工作”， 链接：函数（范围、元素、属性）{ var图表=新的Highcharts.图表({ 图表：{ renderTo:元素[0]， 键入：“列”， 背景颜色：空 }, 标题：{ 文本：空 }, 副标题:{ 文本：空 }, xAxis：{ 类别：[ “一月”， 二月,， “三月”， “四月”， “五月”， "六月",， 七月,， "八月",， "九月",， “十月”， 十一月,， “十二月” ], 标签：{ 已启用：false }, 网格线宽：0， minorGridLineWidth:0， lineColor:'透明'， 长度：0 }, 亚克斯：{ 网格线宽：0， minorGridLineWidth:0， lineColor:'透明'， 分:0,， 标题：{ 文本：空 }, 标签：{ 已启用：false } }, 工具提示：{ 已启用：false }, 打印选项：{ 专栏：{ 点填充：0， 边框宽度：0， 国家：{ 悬停：{ 颜色：“#FFFFFF” } } } }, 图例：{ 已启用：false }, 系列：[{ 名称：“值”， 颜色：“#EC5B00”， 数据：scope.items }] }); 范围.$watch（“项目”），功能（newValue）{ chart.series[0].setData（newValue，true）； console.log（scope.items）； }，对）； } } }); 我也试过了

<highcharts-pie class="hc-pie" items="perspectives.graphData.value"></highcharts-pie>

控制台显示我需要的值， 但是我不能用HTML显示它

---

我的错误是什么？

您需要在使用数据之前对其进行预处理，可以这样做：

  $scope.processed = $scope.perspectives[0].graphData.map(function(elem,i){
    return [i,elem.value];
  });

highcharts需要一个特定的系列格式来工作

var myApp=angular.module（“myApp”，[]）；
控制器（“myCtrl”，函数（$scope）{
$scope.perspectives=[{
表演：“a”，
当前：“1”，
上一篇：'2'，
差异：'-1'，
加：错，
图数据：[{
价值：32.4
}, {
价值：13.2
}, {
价值：84.5
}, {
价值：19.7
}, {
价值：22.6
}, {
价值：65.5
}, {
价值：77.4
}, {
数值：90.4
}, {
价值：17.6
}, {
价值：59.1
}, {
价值：76.8
}, {
价值：21.1
}]
}];
$scope.processed=$scope.perspecties[0].graphData.map（函数（elem，i）{
返回[i，元素值]；
});
})
.directive（'hcPie'，function（）{
返回{
限制：“C”，
替换：正确，
范围：{
项目：'='
},
控制器：函数（$scope，$element，$attrs）{}，
模板：“不工作”，
链接：函数（范围、元素、属性）{
日志（范围、元素）；
var图表=新的Highcharts.图表({
图表：{
renderTo:元素[0]，
键入：“列”，
背景颜色：空
},
标题：{
文本：空
},
副标题:{
文本：空
},
xAxis：{
类别：[
“一月”，
二月,，
“三月”，
“四月”，
“五月”，
"六月",，
七月,，
"八月",，
"九月",，
“十月”，
十一月,，
“十二月”
],
标签：{
已启用：false
},
网格线宽：0，
minorGridLineWidth:0，
lineColor:'透明'，
长度：0
},
亚克斯：{
网格线宽：0，
minorGridLineWidth:0，
lineColor:'透明'，
分:0,，
标题：{
文本：空
},
标签：{
已启用：false
}
},
工具提示：{
已启用：false
},
打印选项：{
专栏：{
点填充：0，
边框宽度：0，
国家：{
悬停：{
颜色：“#FFFFFF”
}
}
}
},
图例：{
已启用：false
},
系列：[{
名称：“值”，
颜色：“#EC5B00”，
数据：scope.items
}]
});
范围.$watch（“项目”），功能（newValue）{
chart.series[0].setData（newValue，true）；
console.log（scope.items）；
}，对）；
}
}
});

{{perspective.performance}}
{{perspective.current}
{{perspective.previous}}
{{perspective.variance}}
{{processed}}
能否创建片段或bin？perspectives.graphData.value未定义，因为它是数组。。。。在第一个示例中，值未定义，请使用perspective.graphDatainstead@Vanojx1，我试过了，但没用
  $scope.processed = $scope.perspectives[0].graphData.map(function(elem,i){
    return [i,elem.value];
  });