2

私はkpiのアプリを構築しようとしています.Angular jsを使用しています.チャートのリストを作成したい.各リストアイテムは異なる値を示し、各リストアイテムチャートはモデルに応じて異なるタイプを持っています.

私はhighcharts-ngディレクティブに基づいています。

次の ng-repeat を入力すると、属性によるチャートのリストが作成される、値、タイトル名、チャート タイプなどのいくつかの属性をハイチャート ディレクティブを介して注入したい

     <li ng-repeat="li in list">
       <highchart config="chart" chartTitle="{{li.name}}" kpiValue="{{li.data}}">
       </highchart>
     </li>

ここで私のコードを見つけることができます http://jsfiddle.net/Cp73s/62/

highcharts-ng へのリンク: https://github.com/pablojim/highcharts-ng

4

2 に答える 2

1

リストを作成してから、各チャート構成をそのリストに追加する必要があります。チャートのリストで ng-repeat を使用します。

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

 myapp.controller('myctrl', function ($scope) {   

//The list who will contain each chart
$scope.chartlist = [];

//Chart 1
$scope.chartConfig = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15]
    }],

}

//Chart 2
$scope.chartConfig2 = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7]
    }],

}

$scope.chartlist.push($scope.chartConfig);
$scope.chartlist.push($scope.chartConfig2);

});

次に、html でチャートのリストに ng-repeat を使用します。

<div ng-app="myapp">
<div ng-controller="myctrl">         
    <div ng-repeat="char in chartlist" class="row">
        <highchart id="chart1" config="char" class="span10"></highchart>            
    </div>           
</div>

動的データを使用する場合は、foreach を使用して各チャート構成を作成できます。この例では、配列「a」にチャート foreach オブジェクトを作成します。

$scope.chartlist = [];

var a = [[1, 2],[2,4]];

function chardata(){

    for (var i = 0; i < a.length; i++) {

        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'bar'
                }
            },
            series: [{
                data: a[i]
            }],

        }
        $scope.chartlist.push($scope.chartConfig);
     }

}




chardata();
于 2015-05-10T23:53:31.780 に答える