hinzufügen Referenzlinie auf NVD3 Graph

ich derzeit die Angular-NVD3 Bibliothek bin mit einem Graphen zu erzeugen, die wie folgt aussehen:hinzufügen Referenzlinie auf NVD3 Graph

ich mit dem Hinzufügen einer Referenzlinie auf dem Graphen damit beauftragt worden, die handeln als Zieldatum. Ich habe nach einer Möglichkeit gesucht, um eine Asymptote auf der Y-Achse hinzuzufügen, eine Möglichkeit, eine weitere Linie zu zeichnen, sowie eine Möglichkeit, ein Liniendiagramm auf derselben Achse hinzuzufügen. Leider ist nichts von meiner Suche gekommen. Mein Ziel ist es, eine Grafik in Code zu erstellen, die wie folgt aussehen:

Hat jemand wissen, wie ich dies tun kann?

Quelle

2016-05-13 Nicholas Robinson

Ein Ansatz könnte sein, Ihre Datensatzgruppe zu nehmen und Daten für eine neue Zeile hineinzuschieben, mit nur zwei Werten/Punkten, mit x Werten kurz vor und nach dem Zieldatum und y Werten darunter der Minimalwert im Dataset und über dem Maximalwert jeweils:

var targetDate = Date.parse('May 2022'); 

var targetLine = { 
    key: 'Target Date', 
    color: '#000', 
    area: false, 
    classed: 'target-date-line', 
    values: [ 
     [(targetDate - 1 msec), minValue], 
     [(targetDate + 1 msec), maxValue] 
    ] 
};

var app = angular.module('snippet', ['nvd3']); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    $scope.options = { 
 
    chart: { 
 
     type: 'lineChart', 
 
     height: 450, 
 
     margin : { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 80, 
 
     left: 75 
 
     }, 
 
     showLegend: false, 
 
     x: function(d){ return d[0]; }, 
 
     y: function(d){ return d[1]; }, 
 
     isArea: function (d) { 
 
     return d.area; 
 
     }, 
 
     xAxis: { 
 
     axisLabel: 'date', 
 
     tickFormat: function(d){ 
 
      return d3.time.format('%b %Y')(new Date(d)); 
 
     }, 
 
     tickPadding: 10, 
 
     axisLabelDistance: 10 
 
     }, 
 
     yAxis: { 
 
     axisLabel: 'value', 
 
     axisLabelDistance: 10 
 
     }, 
 
     tooltip: { 
 
     enabled: true 
 
     }, 
 
     callback: function(chart){ 
 
     console.log("!!! lineChart callback !!!"); 
 
     } 
 
    }, 
 
    title: { 
 
     enable: true, 
 
     text: 'Line Chart with Target' 
 
    } 
 
    }; 
 

 
    $scope.data = []; 
 
    
 
    
 
    var lineData = [ 
 
    {"key":"Some Val","area": true, "color":"#9bcd9b","values":[[1462075200000,0],[1525147200000,12],[1588305600000,26],[1651377600000,42],[1714536000000,60],[1777608000000,100]]}, 
 
    {"key":"Other Val","area": true, "color":"#e34343","values":[[1462075200000,0],[1525147200000,10],[1588305600000,21],[1651377600000,33],[1714536000000,46],[1777608000000,57]]} 
 
    ]; 
 
    
 
    var targetDate = Date.parse('May 2022'); 
 
    
 
    var minVal = _.min(_.flatten(_.map(lineData, function(dataset) { 
 
    return _.map(dataset.values, function(val) { 
 
     return val[1]; 
 
    }); 
 
    }))); 
 
    
 
    var maxVal = _.max(_.flatten(_.map(lineData, function(dataset) { 
 
    return _.map(dataset.values, function(val) { 
 
     return val[1]; 
 
    }); 
 
    }))); 
 

 
    var targetLine = { 
 
    key: 'Target Date', 
 
    color: '#000', 
 
    area: false, 
 
    classed: 'target-date-line', 
 
    /** 
 
    * set first x value to target date - 1 msec 
 
    * second x value to target + msec1 
 
    * 
 
    * set first y value to minimum of data values (or less) 
 
    * second y value to something higher than the max value in data 
 
    */ 
 
    values: [[targetDate - 1, minVal],[targetDate + 1,1.5*maxVal]] 
 
    } 
 

 
    lineData.push(targetLine); 
 
    $scope.data = lineData; 
 

 
});

.target-date-line { 
 
    stroke-dasharray: 5,5; 
 
} 
 

 
.target-date-line path.nv-line { 
 
    stroke-width: 1px; 
 
}

<!DOCTYPE html> 
 
<html ng-app="snippet"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Angular-nvD3 Line Chart</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>  
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    
 
    <nvd3 options="options" data="data"></nvd3> 
 
    
 
    </body> 
 

 
</html>

Quelle

2016-05-14 19:42:39

Sie könnten versuchen, ein Multicart (mit Balken + Linie) zu verwenden und einen Balken nur zum Zieldatum hinzuzufügen.

Quelle

2016-05-13 13:49:39

Antwort

Verwandte Themen