所以,我想设置从一月到十二月的 x 轴范围。所以 x_data 和 y_data 是动态的,例如 x_data = [ 'Jan', 'Feb] 和 y_data = [10, 20]。所以图表只显示了 x 轴上的两个值(仅限 jan 和 feb),但如果数据不可用,我想要 x 轴上的所有月份。我试图将 xaxis 的范围设置为 ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct' , 'Nov', 'Dec'] 但它不起作用。 (代码如下)
var trace1 = {
x: x_data,
y: y_data,
type: 'bar',
marker: {
color: '#FEDB41',
}
};
var data = [trace1];
var layout = {
xaxis: {
type : 'category',
categoryorder : "array",
categoryarray : MONTHS,
zeroline: false,
showline: false,
tickfont : {
size : 10,
color : 'white'
},
// type: 'date',
automargin: true,
tickformat: '%d, %b',
range:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
"yaxis": {
"visible": false,
"showgrid": false,
"zeroline": false
},
// barmode: 'group',
margin: {
l: 2,
r: 2,
b: 20,
t: 2,
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
};
Plotly.newPlot(div_id, data, layout, {displayModeBar: false});
var trace1 = {
x:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
y: [10,20,30,40,0,0,0,0,0,0,0,0],
type: 'bar',
marker: {
color: '#FEDB41',
}
};
var data = [trace1];
var layout = {
xaxis: {
type : 'category',
categoryorder : "array",
zeroline: false,
showline: true,
tickfont : {
size : 10,
color : 'black'
},
// type: 'date',
automargin: true,
autorange:false,
tickformat: '%d, %b'
},
"yaxis": {
"visible": false,
"showgrid": false,
"zeroline": false
},
// barmode: 'group',
margin: {
l: 2,
r: 2,
b: 20,
t: 2,
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
};
Plotly.newPlot("chart", data, layout, {displayModeBar: false});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>