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

从 issue 中的 inline JavaScript 复现开始，比较颜色标签与数字字符串标签的分类轴和 shape 行为。复现位置错误的 shape，然后验证使用数字分类值的 shape 坐标是否与对应的分类对齐，而不仅仅是与其索引对齐。