plotly.js 中的分类轴顺序

我有一个plotly.js 条形图，我试图使 calcategories 轴的顺序正确。每个类别都有一个条形，但有时它们是绿色的，有时是黄色的。条形图应按从最高到最低的顺序排列，但情节似乎是根据不同的填充对它们进行排序。

数据：

var data = [
  {
    "marker": {
        "color": "#006666"
    },
    "x": ["A:0122", "A:0121", "A:0434", "A:0838", "A:0083", "A:0081", "A:0687"],
    "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0],
    "name": "Green",
    "type": "bar"
  }, 
  {
    "marker": {
        "color": "#C87B31"
    },
    "x": ["A:0169", "A:0175"],
    "y": [270.0, 0.0],
    "name": "Yellow",
    "type": "bar"
  }
];

布局：

var layout = {
    "margin": {
        "t": 0
    },
    "barmode": "stack",
    "tickangle": -90,
    "showlegend": true,
    "xaxis": {
        "title": "Idea",
        "tickmode": "array",
        "tickvals": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"]
    },
    "yaxis": {
        "title": "Result"
    }
};

其他配置：

{"showLink":false, "displaylogo":false}

但结果是这样的：

请注意，“A:0169”应该是第四个小节，但它却是最后一个。

如何让条形按照我指定的顺序排列tickvals？或者我可以用不同的方式指定它们的顺序吗？

您可以设置x and tickvals到有序数组，然后添加 x 轴标签ticktextIE。 数据：

    [{
    "marker": {"color": "#006666"},
    "x": [0, 1, 2, 4, 5, 7, 8],
    "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0],
    "name": "Green",
    "type": "bar"
    }, {
    "marker": {"color": "#C87B31"},
    "x": [3, 6],
    "y": [270.0, 0.0],
    "name": "Yellow",
    "type": "bar"
    }],

layout:

    {
    "margin": {"t": 0},
    "barmode": "stack",
    "tickangle": -90,
    "showlegend": true,
    "xaxis": {
      "title": "Idea",
      "tickmode": "array",
      "tickvals": [0, 1, 2, 3, 4, 5, 6, 7, 8],
      "ticktext": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083",             
                   "A:0175", "A:0081", "A:0687"]
    },
    "yaxis": {
      "title": "Result"
    }}

或者，如果您只关心条形的颜色，您可以绘制一条迹线并将颜色设置为数组：

    var data = [{
      "x": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083",  
            "A:0175", "A:0081", "A:0687"],
      "y": [1246.0, 1096.0, 1000.0, 270.0, 200.0, 0.0, 0.0, 0.0, 0.0],
      "type": "bar",
      "marker": {"color": ["#006666", "#006666", "#006666", "#C87B31", 
                  "#006666", "#006666", "#C87B31", "#006666"]}
    }],
    layout = {
      "margin": {"t": 0},
      "xaxis": {"title": "Idea"},
      "yaxis": {"title": "Result"}
    };