Question

我确定有人已经遇到过这个问题并发布在这里，但我找不到它。抱歉对不起。我正在制作一个仪表板，其中必须有来自数据库的每个数据集的图表。

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

这是局部视图

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

部分将数据发送到指令

var app = angular.module('app');

app.directive('appCard', function() {
    return {
        restrict: 'E',
        scope: {
            name: '=name',
            android: '=android',
            ios: '=ios',
            date: '=date'
        },
        templateUrl: 'http://testsite.nl/dashboard/partials/directives/app-card.html'
    };
});

指令模板

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

控制器看起来像这样

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
    }
}]);

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

我怎么能够这样做，所以每个模板都包含一个与其数据相似的图表？

Answer 1

我回答了一个与使用angular-chart相关的非常相似的问题，请在此处查看我的plunker：https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview

这里的问题/答案：angular ng-repeat with directive

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

假设“name”是唯一的，请更改控制器，使其使用Highchart.chart上的指令scope.name并更改指令模板，以使<div id="container">变为<div id="{{name}}"

在此之后你应该有唯一的ID，它会起作用

希望这是有道理的。

为每个数据集创建一个Highchart

1 个答案: