highcharts-ng 模型数据不工作

Question

我正在尝试用 .json 文件中的数据填充许多图表。我让图表按要求使用一些虚拟/硬编码值（在 plunker 中注释掉），但是当我尝试从 .json 文件/模型中添加值时它不起作用。

html模板：

<highchart config="chartConfig"></highchart>

控制器：

 series:[
    {
        data: ['part.before_hp','part.before_torque'], //this doesn't work
        //data: [2,3], //this works
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            y: 40,
            style: {
                fontSize: '24px',
                fontFamily: 'tg, sans-serif',
                textShadow: '0 0 3px black'
            }
        },
        borderColor: 'transparent',
        pointPadding: 0.03
    },
    {
        data: ['part.after_hp','part.after_torque'], //this doesn't work
        //data: [5,6], //this works
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            y: 40,
            style: {
                fontSize: '24px',
                fontFamily: 'tg, sans-serif',
                textShadow: '0 0 3px black'
            }
        },
        borderColor: 'transparent',
        pointPadding: 0.03
    }
],

我真的被困在这个问题上，已经尝试了几天来修复它，如果有人可以提供帮助，我将不胜感激。

我创建了这个plunker 来展示我在做什么。

Answer 1

好的，我想通了。这是一个更新的plunker - 真的希望这对其他人有所帮助。

基本上我添加了一个“更新（部分）；”单击任何部件按钮或在初始化时将调用的函数，该函数传递当前部件并使用它配置图表选项。

选择部件的按钮：

<button class="btn btn-info" ng-click="selectLevel2($index); car.parts.selected=part.id; update(part);" ng-class="{selected: $index == partsSelected}">{{part.name}}</button>'

ng-init 无需用户输入即可加载图表：

<div id="{{part.id}}" ng-if="car.parts.selected == part.id" class="my-switch-animation" ng-init="update(part);">
    <div ng-if="car.parts.selected == part.id" ng-class="{selected: $index == partSelected}" class="json">
        {{part}}
    </div>
    <highchart config="chartConfig"></highchart>
</div>

你可以在plunker代码中看到更新功能，我不想把帖子弄得太乱:-)