Plotly.js: Cannot show full categorical x-axis

问题

I have to plot a line chart with x-axis about time. The x-axis is like ["00:00", "00:05", "00:10:, ... , "23:55"], making it not numeric but categorical. However, I may not have a full list of data on y-axis. eg. there is data only from "00"00" to "09:00". The data must start from "00:00".

The chart I made can only show the range which has a y value. (eg. "00"00 to "09:00"), but I want to have a chart with full x-axis even though some parts of the graph is empty.

I read the documentation that setting xaxis:{range: [fromValue, toValue]} will help. I tried but it only works for numeric x-axis. Are there any ways to expand the x-axis?

I made a pen to illustrate this. "a" to "g" represent the categorical x-axis, which is longer than the array for y-axis.

回答1:

I had a similar problem, using plotly.js version plotly.js v1.28.3. I was able to display a full set of x and y axis values by using the categoryorder attribute and categoryarray attributes the following is an example that worked for me:

var layout = {
         xaxis: {
             title: 'x Axis Label'
             , autorange: false
             , type: 'category'
             , categoryorder: 'array'
             , categoryarray: ['0001','0002','0003']
         },
         yaxis: {
             title: 'Y Axis Label  %>'
             , autorange: false
             , type: 'category'
             , categoryorder: 'array'
             , categoryarray: ['one','two','three', 'etc']
         },
    };

来源：https://stackoverflow.com/questions/44490998/plotly-js-cannot-show-full-categorical-x-axis