如何在plotly.js 中将xaxis 范围设置为月份(jan、feb 到dec)?

发布时间:2021-02-25 06:28

所以,我想设置从一月到十二月的 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}); 
回答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>