在現有的NVD3圖上繪製垂直線

我有一個NVD3圖顯示簡單的數據集。我只是想畫在用不同的顏色，圖中的線（它就像一個cut-off value，那將是x=5）在現有的NVD3圖上繪製垂直線

<meta http-equiv="content-type" content="text/html; charset=UTF8"> 
<script src="js/angular.js"></script> 
<script src="js/d3.js"></script> 
<script src="js/nv.d3.js"></script> 
<script src="js/moment.js"></script> 
<script src="../dist/angularjs-nvd3-directives.js"></script> 
<link rel="stylesheet" href="stylesheets/nv.d3.css"/> 
<script> 
    var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']); 

    function ExampleCtrl($scope){ 
     $scope.exampleData = [ 
      { 
       "key": "Github Api Mean Web Response Time", 
       "values": [[3,2],[4,6],[6,10],[2,6]] 
      }]; 
    } 

</script> 

<body ng-app='nvd3TestApp'> 
    <div ng-controller="ExampleCtrl"> 
    <nvd3-line-chart 
     data="exampleData" 
     id="exampleId" 
     width="1000" 
     height="400" 
     showXAxis="true" 
     showYAxis="true" 
     margin="{left:50,top:50,bottom:50,right:50}" 
     > 
    <svg></svg> 
    </nvd3-line-chart> 

    </div> 
</body>

誰能告訴我一個方法，以這種垂直線添加到圖表我現在有。如果我們可以爲該垂直線添加不同的顏色，則會更好。

注：這個例子我是從here。這是lineChart.ticks.html

來源

2015-09-04 prime

我找到了一種方法來做到這一點，如下所示。

<script> 
    var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']); 

    function ExampleCtrl($scope){ 
     $scope.exampleData = [ 
      { 
       "key": "Github Api Mean Web Response Time", 
       "values": [[3,2],[4,6],[6,10]] 
      }, 
      { 
       "key": "aaa", 
       "values": [[5,0],[5,10]] 
      }]; 
    } 

</script> 

<body ng-app='nvd3TestApp'> 

<div ng-controller="ExampleCtrl"> 
    <nvd3-cumulative-line-chart 
     data="exampleData" 
     id="exampleId" 
     width="1000" 
     height="400" 
     showXAxis="true" 
     showYAxis="true" 
     margin="{left:50,top:50,bottom:50,right:50}" 
     > 
    <svg></svg> 
    </nvd3-cumulative-line-chart> 

</div> 

</body>

來源

2015-09-04 11:52:16 prime

在現有的NVD3圖上繪製垂直線

回答

相關問題