使用angular nvd3js指令在其中繪制實線和虛線的折線圖？

Question

我正在使用angular-nvd3指令來制作自定義折線圖，以顯示特定時段內的來賓計數，如下所示：

1. 當前時間-2->當前時間 ：將顯示為直線
2. 當前時間->當前時間+ 2 ：將顯示為虛線 。

這是我的實現代碼，只有直線：

 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 dx; }, y: function(d){ return dy; }, 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' } ]; }; }); 

這是為此的小插曲： http ://plnkr.co/edit/lBKFld?p=preview

任何人都可以提供一些幫助，這將令我非常感激。

謝謝

Answer 1

 { 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; }