我的要求是使用plotly.js在x轴的某些日期上绘制垂直线。我是Plotly的新手,我设法找到了使用"形状"选项绘制垂直线的选项。
shapes: [{
type: 'line',
x0: '2000-01-11',
y0: 0,
x1: '2000-01-11',
y1: 7,
line: {
color: 'grey',
width: 1.5,
dash: 'dot'
}
}]
,但我面临的主要困难是如何根据数据来定义Y轴值,因为Y轴尺度将根据数据而有所不同。我希望它能像y0:0一样动态。Y1 :(高度 - 毛线 - top-margin.bottom)在我们用来绘制垂直线的D3中。
请帮助,代码在这里http://codepen.io/anon/pen/vpwwmv?editors=0010#0
有几种可能对您有用的可能性:
- 使用
yref: paper
独立于y轴刻度(所有值都归一化为0到1) -
始终绘制到
max
imum resp。min
imum y-valuey1: Math.min(...trace1.y),
-
以相应的x值的y值
进行y值y1: trace1.y[trace1.x.indexOf('2000-01-02')],
下面实现了所有3种方法。
var trace1 = {
x: ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-15', '2000-01-16', '2000-01-17', '2000-01-18', '2000-01-19', '2000-01-20', '2000-01-21', '2000-01-22', '2000-01-23', '2000-01-24', '2000-01-25', '2000-01-26', '2000-01-27', '2000-01-28', '2000-01-29', '2000-01-30', '2000-01-31'],
y: [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5, -16.9, -12, -6.1, -6.6, -7.9, -10.8, -14.8, -11, -4.4, -1.3, -1.1],
mode: 'lines',
type: 'scatter',
name: '2000'
};
var data = [trace1];
var layout = {
xaxis: {
type: 'date',
title: 'January Weather'
},
yaxis: {
title: 'Daily Mean Temperature'
},
shapes: [{
type: 'line',
x0: '2000-01-11',
y0: 0,
x1: '2000-01-11',
yref: 'paper',
y1: 1,
line: {
color: 'grey',
width: 1.5,
dash: 'dot'
}
}, {
type: 'line',
x0: '2000-01-17',
y0: 0,
x1: '2000-01-17',
y1: Math.min(...trace1.y),
line: {
color: 'grey',
width: 1.5,
dash: 'dot'
}
}, {
type: 'line',
x0: '2000-01-02',
y0: 0,
x1: '2000-01-02',
y1: trace1.y[trace1.x.indexOf('2000-01-02')],
line: {
color: 'grey',
width: 1.5,
dash: 'dot'
}
}],
title: '2000 Toronto January Weather'
};
Plotly.plot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:100%;height:400px;"></div>