JavaScript, Plotly : 막대 그래프에서 축 레이블을 사용자 정의하는 방법은 무엇입니까?

Question

x 축에 날짜 값이있는 막 대형 차트를 플로팅합니다. 빈과 막대 높이의 값을 설정하기 만하면 원하는 그림이 나오지만 축 레이블 (날짜 값)은 막대 중심 아래에 위치합니다 (스크린 샷 참조).

그러나 각 막대는 날짜 범위를 나타내며 레이블이 막대 가장자리 아래에 위치하도록하고 싶습니다. 어떻게해야합니까??

Answer 1

당신은 산란 선 그림에 플롯을 변환하고 x 축으로 채울 수 있습니다. x 축에 나타나는 레이블은 layout: xaxis: tickvals을 통해 지정할 수 있습니다.

동등한 크기의 막대가 필요한 경우 layout: xaxis: type을 category으로 설정하십시오.

var data = { 
 
    x: ['2013-11-02', '2013-11-04', '2013-11-05', '2013-11-07', '2013-11-09', '2013-11-11', '2013-11-13'], 
 
    y: [1, 3, 6, 4, 5, 2, 6], 
 
}; 
 
var trace = { 
 
    x: [], 
 
    y: [], 
 
    type: 'scatter', 
 
    mode: 'lines', 
 
    fill: 'tozeroy' 
 
}; 
 

 
for (var i = 0; i < data.x.length - 1; i += 1) { 
 
    trace.x.push(data.x[i]); 
 
    trace.y.push(0); 
 
    trace.x.push(data.x[i]); 
 
    trace.y.push(data.y[i]); 
 
    trace.x.push(data.x[i + 1]); 
 
    trace.y.push(data.y[i]); 
 
} 
 
trace.x.push(data.x[data.x.length - 1]); 
 
trace.y.push(0); 
 

 
var layout = { 
 
    xaxis: { 
 
    type: 'category', 
 
    tickvals: data.x, 
 
    tickangle: -45 
 
    } 
 
} 
 
Plotly.newPlot('myDiv', [trace], layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="myDiv"></div>