如何在plotly.js中将xaxis范围设置为（1月、2月至12月）这样的月份？

Question

因此，我想将x轴范围设置为从1月到12月。所以x_data和y_data是动态的，例如x_data = [ 'Jan'， 'Feb] 和 y_data = [10， 20]。所以图表在 x 轴上只显示两个值（仅限 jan 和 feb），但如果数据不可用，我希望所有月份都在 x 轴上。我试图将xaxis的范围设置为[“1月”，“2月”，“3月”，“4月”，“5月”，“6月”，“7月”，“8月”，“9月”，“10月”，“11月”，“12月”]，但它不起作用。（下面的代码）

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}); 

Answer 1

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>