Пользовательская вертикальная линия с использованием Plotly.js

Мое требование - рисовать вертикальные линии в определенные даты оси X с помощью Plotly.js. Я новичок в сюжете, и мне удалось найти вариант для рисования вертикальной линии с помощью параметра «Фигуры».

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) в d3, который мы используем для рисования вертикальной линии.

Пожалуйста, помогите, и код здесь http://codepen.io/anon/pen/VpwWmV?editors=0010# 0

4 голоса | спросил NewBie 23 FebruaryEurope/MoscowbThu, 23 Feb 2017 21:10:53 +0300000000pmThu, 23 Feb 2017 21:10:53 +030017 2017, 21:10:53

1 ответ


0

Есть несколько возможностей, которые могут работать для вас:

  • Используйте yref: paper, чтобы стать независимым от шкалы оси Y (все значения нормализованы, чтобы быть между 0 и 1)
  • Всегда рисуйте в max imum соответственно. min imum y-value

    y1: Math.min(...trace1.y),
    
  • Возьмите значение y соответствующего значения x

    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>
ответил Maximilian Peters 24 FebruaryEurope/MoscowbFri, 24 Feb 2017 00:08:26 +0300000000amFri, 24 Feb 2017 00:08:26 +030017 2017, 00:08:26

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132