我想要在我的 nvd3 图表中有一条简单的红线
I want a simple red line in my nvd3 charts
我制作了一张nvd3图表。我有个问题。我想沿着 y 轴画一条简单的红线。示例:x:i y:180。但我不想把它当成一个数据,比有没有价值。所以作为一条简单的线。
源代码:
vm.fhrOptions = {
chart: {
type: 'lineChart',
useInteractiveGuideline: true,
height: 300,
forceY:([60,200]),
lineY:([120,180]),
fitScreen: true,
margin : {
left:70,
bottom:0
},
transitionDuration: 1000,
xAxis: xAxisOptions,
yAxis: {
axisLabelDistance:50,
lines: {value: 120},
color : { pattern:['#1f77b4', '#aec7e8']},
axisLabel: 'FHR [pulzus/perc]',
tickFormat: function(d){
return d===null?'NaN':d3.format('d')(d);
},
rotateYLabel: -45,
showMaxMin: false,
domain:([80, 160]),
showLegend:true
}
}
};
使用以下命令在图表上画一条线,根据需要更改参数并将“#chart svg”更改为您的选择器名称。
d3.select('#chart svg')
.append('line')
.attr({
x1: 500 + chart.xAxis.scale()(0),
y1: 35 + chart.yAxis.scale()(10),
x2: 57 + chart.xAxis.scale()(3),
y2: 35 + chart.yAxis.scale()(10)
})
.style("stroke", "#FF0000")
.style("fill", "#ff0000");
我制作了一张nvd3图表。我有个问题。我想沿着 y 轴画一条简单的红线。示例:x:i y:180。但我不想把它当成一个数据,比有没有价值。所以作为一条简单的线。
源代码:
vm.fhrOptions = {
chart: {
type: 'lineChart',
useInteractiveGuideline: true,
height: 300,
forceY:([60,200]),
lineY:([120,180]),
fitScreen: true,
margin : {
left:70,
bottom:0
},
transitionDuration: 1000,
xAxis: xAxisOptions,
yAxis: {
axisLabelDistance:50,
lines: {value: 120},
color : { pattern:['#1f77b4', '#aec7e8']},
axisLabel: 'FHR [pulzus/perc]',
tickFormat: function(d){
return d===null?'NaN':d3.format('d')(d);
},
rotateYLabel: -45,
showMaxMin: false,
domain:([80, 160]),
showLegend:true
}
}
};
使用以下命令在图表上画一条线,根据需要更改参数并将“#chart svg”更改为您的选择器名称。
d3.select('#chart svg')
.append('line')
.attr({
x1: 500 + chart.xAxis.scale()(0),
y1: 35 + chart.yAxis.scale()(10),
x2: 57 + chart.xAxis.scale()(3),
y2: 35 + chart.yAxis.scale()(10)
})
.style("stroke", "#FF0000")
.style("fill", "#ff0000");