使用angular nvd3js指令绘制带有实线和虚线的折线图?

时间:2015-11-15 13:02:52

标签: javascript angularjs nvd3.js angularjs-nvd3-directives angular-nvd3

我使用angular-nvd3指令制作自定义折线图显示特定时段范围内的来宾数量,如下所示:

  1. 当前时间 - 2 - >当前时间:将显示为 直线
  2. 当前时间 - >当前时间+ 2 :将显示为 虚线
  3. 这是我的实施代码,只有直线:

    
    
    var app = angular.module('plunker', ['nvd3']);
    
    app.controller('MainCtrl', function($scope) {
      $scope.options = {
                chart: {
                    type: 'lineChart',
                    tooltips: false,
                    height: 450,
                    margin : {
                        top: 20,
                        right: 20,
                        bottom: 40,
                        left: 55
                    },
                    x: function(d){ return d.x; },
                    y: function(d){ return d.y; },
                    useInteractiveGuideline: false,
                    dispatch: {
                        stateChange: function(e){ console.log("stateChange"); },
                        changeState: function(e){ console.log("changeState"); },
                        tooltipShow: function(e){ console.log("tooltipShow"); },
                        tooltipHide: function(e){ console.log("tooltipHide"); }
                    },
                    xAxis: {
                        axisLabel: 'Time (ms)'
                    },
                    yAxis: {
                        axisLabel: 'Voltage (v)',
                        tickFormat: function(d){
                            return d3.format('.02f')(d);
                        },
                        axisLabelDistance: 30
                    },
                    callback: function(chart){
                        console.log("!!! lineChart callback !!!");
                    }
                },
                title: {
                    enable: true,
                    text: 'Title for Line Chart'
                }
                
            };
    
            $scope.data = sinAndCos();
    
            /*Random Data Generator */
            function sinAndCos() {
                var sin = [],sin2 = [],
                    cos = [];
    
                //Data is represented as an array of {x,y} pairs.
                for (var i = 0; i < 100; i++) {
                    sin.push({x: i, y: Math.sin(i/10)});
                    sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
                    cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
                }
    
                //Line chart data should be sent as an array of series objects.
                return [
                    {
                        values: [{x:7,y:100},{x:8,y:40},{x:9,y:70}],      
                        key: 'Sine Wave', //key  - the name of the series.
                        color: '#ff7f0e',  //color - optional: choose your own line color.
                        strokeWidth: 2    
                    },
                    {
                    
                        values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
                        key: 'Cosine Wave',
                        color: '#2ca02c'
                    },
                    {
                        values: [{x:7,y:300},{x:8,y:240},{x:9,y:270},{x:10,y:220},{x:11,y:280}],
                        key: 'Another sine wave',
                        color: '#7777ff'    
                    }
                ];
            };
    });
    &#13;
    &#13;
    &#13;

    以下是这方面的内容:http://plnkr.co/edit/lBKFld?p=preview

    任何人都可以提供一些让我非常欣赏的帮助。

    由于

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
            

{
            
                values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
                key: 'Cosine Wave',
                color: '#2ca02c',
                classed: 'dashed'  // <-- Now use CSS to make the line dashed
            }

STYLE!!!

.dashed {
            stroke-dasharray: 5,5;
        }
&#13;
&#13;
&#13;