使用 Plotly.js 自定义垂直线

Posted 2023-02-18

【中文标题】使用 Plotly.js 自定义垂直线

【英文标题】：Custom Vertical Line using Plotly.js

【发布时间】：2017-07-14 08:56:00

【问题描述】：

我的要求是使用 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: (height-margin.top-margin.bottom) in d3，我们用来画一条垂直线。

请帮忙，代码在这里 http://codepen.io/anon/pen/VpwWmV?editors=0010#0

【参考方案1】：

有几种可能对您有用：

使用yref: paper 独立于 y 轴刻度（所有值都归一化为 0 到 1 之间）

始终吸引到maximum resp。 minimum y 值

y1: Math.min(...trace1.y),

取对应x值的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>