plotly.js 中的分类轴顺序

Question

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

数据：

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 中指定的顺序排列？或者我可以用不同的方式指定它们的顺序吗？

Answer 1

您可以将 x 和 tickvals 设置为有序数组，然后添加带有 ticktext 的 x 轴标签，即数据：

    [{
    "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"
    }],

布局：

    {
    "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"}
    };

Answer 2

自Plotly.js 1.10.2起，您可以使用categoryorder和categoryarray来控制分类轴的顺序。这样您就可以将 x 保留为字符串列表。

用法：

var data = [
  {
    "x": ["A", "D", "B"],
    "y": [1, 2, 3],
    "type": "bar"
  }, 
  {
    "x": ["C", "E"],
    "y": [2, 3],
    "type": "bar"
}];

var layout = {
    "xaxis": {
        "categoryorder": "array",
        "categoryarray":  ["A", "B", "C", "D", "E"]
    }
};

对于您的确切示例：

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",
        "categoryorder": "array",
        "categoryarray":  ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"]
    },
    "yaxis": {
        "title": "Result"
    }
};

结果：

plotly.js 中的分类轴顺序

Categorical axis order in plotly.js

javascript

plotly