问在现有的NVD3图上绘制一条垂直线
EN

Stack Overflow用户

提问于 2015-09-04 11:33:12

回答 1查看 944关注 0票数 0

我有一个显示简单数据集的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>

有人能告诉我怎么把这条垂直线加到我现在的图表中吗？如果我们能给那条垂直线增加不同的颜色，那就更好了。

注意:我举的这个例子来自这里。是lineChart.ticks.html

html

angularjs

nvd3.js

回答 1

Stack Overflow用户

发布于 2015-09-04 11:52:16

我找到了一种像下面这样的方法。

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32397075

复制

相似问题

问在现有的NVD3图上绘制一条垂直线
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在现有的NVD3图上绘制一条垂直线EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在现有的NVD3图上绘制一条垂直线
EN