英文:

In a Deneb bar chart with data labels, how do I sort the Y axis?

问题

我有一个使用Deneb创建的条形图，最初按照一个DAX度量值（"Measure1"）进行了排序。

在我添加了一个新的标记以显示数据标签后，图表的排序不再正确。

为什么会发生这种情况？

```{
  
  "title": {"text": "Simple Bar chart - labels", "fontSize": 14, "anchor": "start", "align": "left"},
  
  "data": {"name": "dataset"},

  "encoding": {
  "y": {
    "field": "Site Name", 
    "type": "nominal", 
    "sort":  {"field": "Measure1", "order": "ascending"}
    },
      
  "x": {
    "field": "Measure1", 
    "type": "quantitative"}
    },

  "layer": [

  {
    "mark":
     {"type": "bar", 
     "color": "pink"}
  },
    
  {
    "mark": 
    {"type": "text", 
    "color": "black", 
    "align": "left", 
    "dx": 6
    },
    
    "encoding": {
      "text": {"field": "Measure1", 
      "type": "quantitative"} }
  }
      
  ]
  
}

我希望条形图按照"Measure1"而不是"Site Name"进行排序。

<details>
<summary>英文:</summary>

I have a bar chart created with Deneb, which I originally sorted by a DAX measure (&quot;Measure1&quot;).

After I added a new mark to show data labels, the chart is not sorted correctly anymore.

Why is this happening?

{

"title": {"text": "Simple Bar chart - labels", "fontSize": 14, "anchor": "start", "align": "left"},

"data": {"name": "dataset"},

"encoding": {
"y": {
"field": "Site Name",
"type": "nominal",
"sort": {"field": "Measure1", "order": "ascending"}
},

"x": {
"field": "Measure1",
"type": "quantitative"}
},

"layer": [

{
"mark":
{"type": "bar",
"color": "pink"}
},

{
"mark":
{"type": "text",
"color": "black",
"align": "left",
"dx": 6
},

"encoding": {
  "text": {"field": "Measure1", 
  "type": "quantitative"} }

}

]

}

I'd like the bar chart to be sorted by "Measure1" instead of "Site Name"

</details>


# 答案1
**得分**: 1

我建议查看vega-lite的示例和文档。

这里有一个已排序的条形图供您查看：

https://vega.github.io/vega-lite/examples/bar_aggregate_sort_by_encoding.html

尝试以下选项之一按照x轴排序：

"sort": "-x"

"sort": "x"

**--更新 1**

另一个巧妙的技巧是创建一个**calculate transform**，将这两个数据字段组合起来，然后稍后可以拆分它们。
将此内容添加到您的数据下面。

"transform": [
{
"calculate": "format(datum.['Measure1'],'.0f') + '|' + datum['Site Name']", "as": "Full_Site_Name"
}
],

然后在y轴上，您可以执行以下操作，只显示站点名称。
[1] 选取了|字符后的第二部分。

"y": {
"field": "Full_Site_Name",
"type": "nominal",
"axis": {
"labelExpr": "split(datum.label, '|')[1]"
}
},

<details>
<summary>英文:</summary>

I recommend taking a look at the vega-lite examples and documentation.

Here is a sorted bar chart you can review:

https://vega.github.io/vega-lite/examples/bar_aggregate_sort_by_encoding.html


Try one of these options to sort by the x axis:

"sort": "-x"

"sort": "x"

**--UPDATE 1**

Another nifty tick is to create a **calculate transform** which combines these 2 data fields and then you can split them apart later.
Add this just under your data.

"transform": [
{
"calculate": "format(datum.['Measure1'],'.0f') + '|' + datum['Site Name']", "as": "Full_Site_Name"
}
],

Then in your y axis you can do this to just display the Site name.
[1] picks up the second part after the | character.

"y": {
"field": "Full_Site_Name",
"type": "nominal",
"axis": {
"labelExpr": "split(datum.label, '|')[1]"
}
},

</details>