Javascript 为每个数据集创建Highchart

我肯定有人已经遇到了这个问题，并张贴在这里，但我就是找不到它。很抱歉被骗了。 我正在制作一个仪表板，其中必须有数据库中每个数据集的图表

我尝试将数据发送到指令，并从指令的控制器中绘制图表，将数据传递到指令

这是部分观点

<div class="row">
<div class="col col-md-9">
    <input type="text" class="form-control" ng-model="nameFilter" placeholder="Search for...">
</div>
</div>

<div class="row" ng-if="loading">
<div class="col col-md-6 col-md-offset-3">
    <img src="../img/loader.gif"/>
</div>
</div>
<div class="row" ng-repeat="app in apps | filter: nameFilter">
     <app-card name="app.name" android="app.android" ios="app.ios" date="app.date"></app-card>
</div>

指令模板

<div class="panel panel-info app-card" ng-controller="appCardController">
    <div class="panel-heading">
        <div class="row">
            <h4 class="col col-md-5">{{name}}</h4>


        </div>
    </div>
    <div class="panel-body">
        <div class="col col-md-12">
            <h3>Android downloads: {{android}}</h3>
            <h3>iOS downloads: {{ios}}</h3>
            <div id="container" style="min-width: 310px; height:250px; margin: 0 auto;"></div>
        </div>
    </div>
</div>

{{name}}
Android下载：{{Android}}
iOS下载：{{iOS}

控制器看起来像这样

app.controller('appCardController', ['$scope', function($scope){
    console.log("Downloads: " + $scope.android);
    Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {

            text: 'Aantal downloads'
        },
        xAxis: {
            allowDecimals: false,
            categories: $scope.date
        },
        yAxis: {
            title: { text:'Donwloads' },
            floor: 0,
            ceiling: getMaxDownloadCount()
        },
        tooltip: {
            pointFormat: '{series.name} <b>{point.y:,.0f}</b>'
        },
        series: [{
            name: 'Android',
            data: convertAndroidArrayToInts($scope.android)
        },
        {
            name: 'iOS',
            data: convertIosArrayToInts($scope.ios)
        }]
    });

    function convertAndroidArrayToInts(array){
        var androidArray = new Array();
        for(var i =0; i < array.length; i++){
            androidArray.push(parseInt(array[i]));
        }

        return androidArray
    }
    function convertIosArrayToInts(array){
        var iosArray = new Array();
        for(var i =0; i < array.length; i++){
            iosArray.push(parseInt(array[i]));
        }
        console.log(iosArray);
        return iosArray
    }
}]);

app.controller（'appCardController'，['$scope'，函数（$scope）{
log（“下载：+$scope.android”）；
Highcharts.chart（'容器'{
图表：{
类型：“区域”
},
标题：{
文本：“安塔尔下载”
},
xAxis：{
allowDecimals:false，
类别：$scope.date
},
亚克斯：{
标题：{文本：'Donwloads'}，
楼层:0,，
上限：getMaxDownloadCount（）
},
工具提示：{
pointFormat:“{series.name}{point.y:，.0f}”
},
系列：[{
名称：“安卓”，
数据：ConvertAndroidArrayInts（$scope.android）
},
{
名称：“iOS”，
数据：convertIosArrayToInts（$scope.ios）
}]
});
函数转换器AndroidArrayInts（数组）{
var androidArray=新数组（）；
对于（var i=0；i

它使用正确的名称和数组值显示指令模板，唯一的问题是只绘制了一个图表，即列表中最后一项的图表，但它位于第一个模板中

---

我如何才能使每个模板都包含一个与其数据相关的图表？

我回答了一个与使用

角度图表相关的非常类似的问题，请参见我的Plunk：

问题/答案如下：

您面临的实际问题是ID是容器，并且DOM中不能有重复的“ID”属性，因此它只能找到第一个

假设“名称”是唯一的，更改控制器，使其使用
Highchart.chart
上的指令scope.name，并更改指令模板，使
变成
简单的HTML问题：元素ID属性必须是唯一的。如果您让每个数据集在元素“#container”中绘制一个图表，那么每个新图表都将覆盖上一个图表，因此您只能看到最后一个。是的，这似乎是问题所在，我认为，因为它通过一个指令传递数据，它们将具有作用域，而重复的id不会有多大影响。但我现在已经开始工作了。谢谢回复晚了，还对问题中的评论进行了评论，只是注意到您之前指出了这一点。开始工作了！谢谢你的帮助！
app.controller('appCardController', ['$scope', function($scope){
    console.log("Downloads: " + $scope.android);
    Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {

            text: 'Aantal downloads'
        },
        xAxis: {
            allowDecimals: false,
            categories: $scope.date
        },
        yAxis: {
            title: { text:'Donwloads' },
            floor: 0,
            ceiling: getMaxDownloadCount()
        },
        tooltip: {
            pointFormat: '{series.name} <b>{point.y:,.0f}</b>'
        },
        series: [{
            name: 'Android',
            data: convertAndroidArrayToInts($scope.android)
        },
        {
            name: 'iOS',
            data: convertIosArrayToInts($scope.ios)
        }]
    });

    function convertAndroidArrayToInts(array){
        var androidArray = new Array();
        for(var i =0; i < array.length; i++){
            androidArray.push(parseInt(array[i]));
        }

        return androidArray
    }
    function convertIosArrayToInts(array){
        var iosArray = new Array();
        for(var i =0; i < array.length; i++){
            iosArray.push(parseInt(array[i]));
        }
        console.log(iosArray);
        return iosArray
    }
}]);