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添加xaxis标签，即数据：

    [{
    "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中的分类轴顺序

2 个答案: