Shapes are misplaced when using numbers as categoryarray values

If X axis type is category, and categoryarray contains (string type) numbers, then shapes are horizontally misplaced, as x0 and x1 values in the shape are not considered as items, but as indices of the categoryarray.

Eg.

This one works perfectly:

<div id="tester"></div>
<script>
    var layout = {
      "xaxis": {
        "type": "category",
        "categoryarray": [
          "red", "green", "blue", "purple", "cyan", "yellow", "magenta"
        ],
      },
      "shapes": [
        {
          "type": "rect",
          "xref": "x",
          "yref": "y",
          "x0": "purple",
          "x1": "yellow",
          "y0": 10,
          "y1": 20,
          "fillcolor": "rgba(45,180,135,0.3)",
        }
      ]
    };

    var data = [
      {
        "x": [ "red", "blue", "cyan", "magenta" ],
        "y": [ 10, 20, 30, 40],
      },
    ];
    
    TESTER = document.getElementById('tester');
    Plotly.newPlot( TESTER, data, layout );
</script>

But if I replace the color names to numbers:

  // in "categoryarray":
      "10", "20", "30", "40", "50", "60", "70"
...
  // in "shapes" this won't work:
      "x0": "40",
      "x1": "60",
...
 // in data:
    "x": [ "10", "30", "50", "70" ],

It will work only if I replace the category values to their indices in the shapes:

      "x0": 3,
      "x1": 5,

Note: if this is not intended to be a bug, but an undocumented feature, please document it, so I can rely on it later. 😃

Bắt đầu với bản tái hiện JavaScript inline trong issue và so sánh hành vi của trục danh mục và shape đối với các nhãn màu với các nhãn chuỗi số. Tái hiện các shape bị đặt sai vị trí, sau đó xác minh rằng tọa độ của các shape sử dụng giá trị danh mục dạng số được căn chỉnh theo các danh mục tương ứng thay vì chỉ theo các chỉ mục của chúng.