Plotly.js：无法显示完整的分类 x 轴

Question

我必须用 x 轴绘制关于时间的折线图。 x 轴类似于 ["00:00", "00:05", "00:10:, ... , "23:55"]，使其不是数字而是分类。 但是，我可能没有 y 轴上的完整数据列表。例如。只有从“00”00到“09:00”的数据。数据必须从“00:00”开始。

我制作的图表只能显示具有 y 值的范围。 （例如“00”00 到“09:00”），但我想要一个带有完整 x 轴的图表，即使图表的某些部分是空的。

我阅读了设置xaxis:{range: [fromValue, toValue]} 会有所帮助的文档。我试过了，但它只适用于数字 x 轴。有什么办法可以扩大x轴吗？

我做了一个pen 来说明这一点。 "a" 到 "g" 表示分类的 x 轴，比 y 轴的数组长。

Answer 1

我有一个类似的问题，使用 plotly.js 版本 plotly.js v1.28.3。通过使用 categoryorder 属性和 categoryarray 属性，我能够显示一组完整的 x 和 y 轴值，以下是对我有用的示例：

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']
         },
    };