在现有的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图上绘制垂直线

回答

相关问题