私は現在、次のようになり、グラフを生成するAngular-NVD3ライブラリを使用しています：NVD3グラフ上の基準線を追加します。
私は行動するグラフを上の基準線を追加する使命を帯びてきました目標の日付として。私はy軸に漸近線を追加する方法を探しました。別の線を描く方法は[targetDate, y] where y = [0:max]で、同じ軸に線グラフを追加する方法もあります。残念ながら、私の検索から何も来ていません。いずれかが、私はこれを行うことができる方法を知ってい
：私の目標は、次のようになり、コードのグラフを作成するのですか？
データセット配列を取得し、新しい行のデータを2つの値/ポイントでプッシュし、ターゲット日付の直前と直後のx値と、下のy値
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>マルチチャット（バー+ライン）を使用して、対象の日付にのみバーを追加できます。 http://krispo.github.io/angular-nvd3/#/multiChart