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>