plotly.js中的分类轴顺序 [英] Categorical axis order in plotly.js

问题描述

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

I have a plotly.js bar chart that I am trying to get the order of the categorical axis right. Each category has a single bar, but sometimes they are green and sometimes they are yellow. The bars should be in order from highest to lowest, but plotly seems to order them based on the different fills.

数据：

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应该是第四个，但它是最后一个。

Notice that "A:0169" should be the fourth bar, but instead it is the last.

如何按照我在 tickvals 中指定的顺序获取条形码？或者我可以用不同的方式指定订单吗？

How do I get the bars to be in the order I specify in tickvals? Or can I specify their order in a different way?

推荐答案

您可以设置 x 和 tickvals 到一个有序数组然后用 ticktext 添加xaxis标签，即
data：

You can set x and tickvals to an ordered array then add the xaxis labels with ticktext i.e. data:

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

或者，如果你'只关注条纹的颜色，你可以绘制一条痕迹并将颜色设置为数组：

alternatively, if you're only concerned about the color of the bars you can plot one trace and set color as an array:

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

这篇关于plotly.js中的分类轴顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！