如何在plotly.js中将xaxis范围设置为月份（一月，二月到十二月）？答案

【问题标题】：How to set xaxis range to months like (jan, feb to dec) in plotly.js?如何在plotly.js中将xaxis范围设置为月份（一月，二月到十二月）？
【发布时间】：2021-05-27 12:19:17
【问题描述】：

所以，我想将 x 轴范围设置为从 1 月到 12 月。所以 x_data 和 y_data 是动态的，例如 x_data = [ 'Jan', 'Feb] 和 y_data = [10, 20]。因此，该图仅在 x 轴上显示了两个值（仅限 1 月和 2 月），但如果数据不可用，我希望所有月份都在 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});

【问题讨论】：

标签： javascript jquery graph charts plotly

【解决方案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>

范围可用于类型编号和日期。它不适用于字符串。您可以只附加对 0 不可用的值。希望这在一定程度上有所帮助。

【讨论】：