Benutzerdefinierte vertikale Linie mit Plotly.js

Meine Anforderung ist, vertikale Linien an bestimmten Daten der X-Achse mit Plotly.js zu zeichnen. Ich bin neu zu plotten und ich habe es geschafft, eine Option zum Zeichnen der vertikalen Linie mit der Option "Shapes" zu finden.Benutzerdefinierte vertikale Linie mit 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' 
       } 
      }]

Aber die Hauptschwierigkeit i ist vor, wie Y-Achse Wert zu definieren, wenn vertikale Linie als Y-Achse Maßzeichnung auf Daten unterschiedlich eingeschätzt werden. Ich wollte, dass es dynamisch ist. Etwas wie y0: 0; y1: (height-margin.top-margin.bottom) in d3, mit dem wir eine vertikale Linie zeichnen.

Bitte um Hilfe und der Code ist hier http://codepen.io/anon/pen/VpwWmV?editors=0010#0

Quelle

2017-02-23 NewBie

Es gibt ein paar Möglichkeiten, die für Sie arbeiten könnte:

Verwenden yref: paper unabhängig von der y-Achse Skala werden (alle Werte sind normalisiert auf 0 bis 1)
Immer auf die max imum resp. min imum y-Wert
```
y1: Math.min(...trace1.y), 
```

Nimm den y-Wert des entsprechenden x-Wert

y1: trace1.y[trace1.x.indexOf('2000-01-02')],

Alle 3 Weisen unten umgesetzt werden.

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>

Quelle

2017-02-23 21:08:26

Vielen Dank. Die obige Lösung funktioniert perfekt so, wie wir es wollen – NewBie

Benutzerdefinierte vertikale Linie mit Plotly.js

Antwort

Verwandte Themen