我目前正在使用 Angular-NVD3库来生成如下所示的图表:
我的任务是在图表上添加一条引用线作为目标日期。我一直在寻找一种在 y 轴上添加渐近线的方法，一种绘制另一条线 [targetDate, y] where y = [0:max] 的方法，以及一种添加的方法同一轴上的折线图。不幸的是，我的搜索没有任何结果。我的目标是在代码中创建一个如下所示的图表:
有人知道我该怎么做吗？
最佳答案
一种方法可能是获取数据集数组并将新行的数据推送到其中，仅使用两个值/点，其中 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="lodash.js@4.6.1" 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>关于javascript - 在 NVD3 图表上添加引用线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37206720/