我有一个显示简单数据集的 NVD3 图表。我只是想用不同的颜色在该图上画一条线(它就像一个cut-off value
,它将是x=5
)
<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
答案 0 :(得分:0)
我找到了一种方法,如下所示。
<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>