2016-04-28 13 views
0

Angularjs NvD3を使用してLineとMultiBarグラフでマルチチャートグラフを作成したいとします。私は線グラフを作成する必要がありますが、マルチバーチャートを表示することができない、私はいくつかの間違いを犯すと思います。 // plnkr:ここplunker角度NvD3マルチチャットが動作していません

var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 
$scope.options = { 
     chart: { 
      type: 'multiChart', 
      height: 450, 
      margin : { 
       top: 30, 
       right: 60, 
       bottom: 50, 
       left: 70 
      }, 
      color: d3.scale.category10().range(), 
      //useInteractiveGuideline: true, 
      duration: 500, 
      xAxis: { 
       tickFormat: function(d){ 
        return d3.format(',f')(d); 
       } 
      }, 
      yAxis1: { 
       tickFormat: function(d){ 
        return d3.format(',.1f')(d); 
       } 
      }, 
      yAxis2: { 
       tickFormat: function(d){ 
        return d3.format(',.1f')(d); 
       } 
      } 
     } 
    }; 


    /***********Line*********/ 
    $scope.data = []; 
    $scope.data[0]={}; 
    $scope.data[0].key='Stream'; 
    $scope.data[0].yAxis=1; 
    $scope.data[0].type='line'; 
    $scope.data[0].values=[]; 
    $scope.data[0].values[0]={}; 
    $scope.data[0].values[0].x=0; 
    $scope.data[0].values[0].y=4; 
    $scope.data[0].values[1]={}; 
    $scope.data[0].values[1].x=1; 
    $scope.data[0].values[1].y=8; 


    $scope.data[1]={}; 
    $scope.data[1].key='Stream2'; 
    $scope.data[1].yAxis=1; 
    $scope.data[1].type='line'; 
    $scope.data[1].values=[]; 
    $scope.data[1].values[0]={}; 
    $scope.data[1].values[0].x=0; 
    $scope.data[1].values[0].y=4; 
    $scope.data[1].values[1]={}; 
    $scope.data[1].values[1].x=1; 
    $scope.data[1].values[1].y=8; 
    /*******************************/ 
    /********MultiBar Chart**********/ 
    $scope.data[2]={}; 
    $scope.data[2].key='Stream3'; 
    $scope.data[2].yAxis=2; 
    $scope.data[2].type='multiBarChart'; 
    $scope.data[2].values=[]; 

    $scope.data[2].values[0]={}; 
    $scope.data[2].values[0].key="Stream0"; 
    $scope.data[2].values[0].values=[]; 
    $scope.data[2].values[0].values[0]={}; 
    $scope.data[2].values[0].values[0].key="Stream0"; 
    $scope.data[2].values[0].values[0].series=0; 
    $scope.data[2].values[0].values[0].x=0; 
    $scope.data[2].values[0].values[0].y=5; 

    $scope.data[2].values[1]={}; 
    $scope.data[2].values[1].key="Stream1"; 
    $scope.data[2].values[1].values=[]; 
    $scope.data[2].values[1].values[0]={}; 
    $scope.data[2].values[1].values[0].key="Stream1"; 
    $scope.data[2].values[1].values[0].series=1; 
    $scope.data[2].values[1].values[0].x=0; 
    $scope.data[2].values[1].values[0].y=4; 
    /*********************************/ 
    console.log($scope.data); 


}); 

答えて

-2

がある

+0

コメントで

plunk、設定可能なツールチップと 「multichartとplunkrの下のhttpを条件付きの点のハイライト、面グラフ、棒グラフと折れ線グラフを見つけてください。コ/編集/ XBg8tUZOhWHt3sBPuPyL?P =プレビュー –

+0

上記のコードは動作しないとplunker例が作る、なぜそれが動作する理由についての説明がありません – Stephane

+0

http://plnkr.co/edit/nUPV1j2DzC70S3AQvSOU?p=preview 修正タラを見つけてくださいeを上記のリンクに入れます。問題はあなたがそのようなグラフタイプがないので、 'multiBarChart'としてグラフのタイプを言うことはできません(multiBarChartは、グラフのタイプにnvd3開発者によって与えられた名前で、エリア、散布、線などの複数のグラフsuvhを持つことができます。 ) –

関連する問題