Plotly.js:无法显示完整的分类X轴 [英] Plotly.js: Cannot show full categorical x-axis

问题描述

我必须绘制一个关于x轴的折线图.x轴类似于["00:00"，"00:05"，"00:10:，...，" 23:55]，因此它不是数字的而是分类的.但是，我可能没有y轴上的完整数据列表.例如.只能从"00"至"00:00"到"09:00"之间的数据.数据必须从"00:00"开始.

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".

我制作的图表只能显示具有y值的范围.(例如，"00" 00到"09:00")，但是我希望有一个具有完整x轴的图表，即使该图表的某些部分为空.

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.

我阅读了有关设置 xaxis:{range:[fromValue，toValue]} 的文档.我尝试过，但仅适用于数字X轴.有什么方法可以扩展x轴吗?

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?

我制作了 pen 进行说明."a"到"g"表示分类的x轴，比y轴的数组长.

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

推荐答案

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

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

这篇关于Plotly.js:无法显示完整的分类X轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！