在plotly.js时间序列的垂直线末端添加一个圆圈

问题描述

我正在使用带有添加的垂直红线（使用形状）的Plotly.js时间序列，如下所示：

Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv",function(err,rows){

  function unpack(rows,key) {
  return rows.map(function(row) { return row[key]; });
}


var trace1 = {
  type: "scatter",mode: "lines",name: 'AAPL High',x: unpack(rows,'Date'),y: unpack(rows,'AAPL.High'),line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",name: 'AAPL Low','AAPL.Low'),line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];

var layout = {
  title: 'Time Series with Rangeslider',xaxis: {
    autorange: true,range: ['2015-02-17','2017-02-16'],rangeselector: {buttons: [
        {
          count: 1,label: '1m',step: 'month',stepmode: 'backward'
        },{
          count: 6,label: '6m',{step: 'all'}
      ]},rangeslider: {range: ['2015-02-17','2017-02-16']},type: 'date'
  },yaxis: {
    autorange: true,range: [86.8700008333,138.870004167],type: 'linear'
  },shapes: [{
    type: 'line',x0: '2016-10-16',y0: 0,x1: '2016-10-16',y1: 150,line: {
       color: 'red',width: 3,dash: 'dot'
   }
}]
};

Plotly.newPlot('myDiv',data,layout);
})

产生：

我想在垂直线的顶部添加一个圆圈（以便用户可以单击该圆圈）。

我尝试在布局中添加另一个形状对象：

shapes: [{
    type: 'line',line: {
      color: 'red',dash: 'dot'
    }
},{
      type: 'circle',xref: 'x',yref: 'y',fillcolor: 'rgba(50,171,96,0.7)',y1: 190,line: {
        color: 'rgba(50,1)'
      }
    }
]

结果在另一行而不是圆上，与红色重叠，如下所示：

不确定发生了什么。

注意：我尝试在注释中使用@mit的方法，但这会导致圆在放大时伸展，因为用于创建圆的时间增量显然会随时间缩放。

解决方法

我最近再次偶然发现了这个问题，并找到了一个解决方案：您可以通过将圆添加为 SVG 路径来规避缩放问题。

Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv",function(err,rows){

  function unpack(rows,key) {
  return rows.map(function(row) { return row[key]; });
}


var trace1 = {
  type: "scatter",mode: "lines",name: 'AAPL High',x: unpack(rows,'Date'),y: unpack(rows,'AAPL.High'),line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",name: 'AAPL Low','AAPL.Low'),line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];

var layout = {
  title: 'Time Series with Rangeslider',xaxis: {
    autorange: true,range: ['2015-02-17','2017-02-16'],rangeselector: {buttons: [
        {
          count: 1,label: '1m',step: 'month',stepmode: 'backward'
        },{
          count: 6,label: '6m',{step: 'all'}
      ]},rangeslider: {range: ['2015-02-17','2017-02-16']},type: 'date'
  },yaxis: {
    autorange: true,range: [86.8700008333,138.870004167],type: 'linear'
  },shapes: [{
    type: 'line',x0: '2016-10-16',y0: 0,x1: '2016-10-16',y1: 150,line: {
      color: 'red',width: 3,dash: 'dot'
    }
},{
      fillcolor: 'green',type: 'path',xref: 'x',yref: 'paper',xanchor: '2016-10-16',yanchor: 1,ysizemode: 'pixel',xsizemode: 'pixel',path: 'M 0 0 C 10.5 0 10.5 -15 0 -15 C -10.5 -15 -10.5 0 0 0'
    }
] 
};

Plotly.newPlot('myDiv',data,layout);
})

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

不幸的是，plotly 对它接受哪种路径指令非常挑剔，因此构建正确的路径可能是最棘手的部分。

plotly.js

在plotly.js时间序列的垂直线末端添加一个圆圈

问题描述

解决方法

相关问答