Question

我正在使用带有添加的垂直红线（使用形状）的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",
  mode: "lines",
  name: 'AAPL Low',
  x: unpack(rows, 'Date'),
  y: unpack(rows, '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: 'month',
          stepmode: 'backward'
        },
        {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',
    x0: '2016-10-16',
    y0: 0,
    x1: '2016-10-16',
    y1: 150,
    line: {
      color: 'red',
      width: 3,
      dash: 'dot'
    }
},
    {
      type: 'circle',
      xref: 'x',
      yref: 'y',
      fillcolor: 'rgba(50, 171, 96, 0.7)',
      x0: '2016-10-16',
      y0: 0,
      x1: '2016-10-16',
      y1: 190,
      line: {
        color: 'rgba(50, 171, 96, 1)'
      }
    }
]

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

不确定发生了什么。

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

Answer 1

我最近再次偶然发现了这个问题，并找到了一个解决方案：您可以通过将圆添加为 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",
  mode: "lines",
  name: 'AAPL Low',
  x: unpack(rows, 'Date'),
  y: unpack(rows, '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: 'month',
          stepmode: 'backward'
        },
        {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时间序列的垂直线末端添加一个圆圈

1 个答案: