最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

json - Vega Lite: Dynamic Label Centered in Each Group - Stack Overflow

programmeradmin2浏览0评论

How should I modify the code to ensure that the labels for the major categories (Breakdown Type marked in red on the screenshot) are positioned at the center of their respective background colors? Currently, their positions are misaligned.

I have grouped by "Breakdown Type Number" to find center position for the label, but looks like something is wrong and does not centered correctly...

Thank you in advance for your help!!

here is my code::

"layer": [
 {
  "description": "CATEGORY BACKGROUND",

  "mark": {
    "type": "rect",
    "opacity": 0.2  // 透明度の調整
  },
  "encoding": {
    "x": {
      "field": "Breakdown",
      "type": "ordinal",
      "axis": {
        "labelAngle": 25,
        "title": null}
    },
    "y": {
      "value": 0
    },
    "y2": {
      "aggregate":{"argmax": "Total Amt"}
    },
    
    "color": {
      "field": "Breakdown Type Number",
      "type": "nominal",
      "scale": {
        "domainMin":{"expr": "minType"},
        "domainMax":{"expr": "maxType"},
       // Breakdown Typeの数値
        "range": ["#FFDDC1", "#C1E1FF", "#D1FFC1", "#FFC1E1"]  // 各カテゴリの背景色
      },
        "legend": null 
    }
  }
},
{
  "description": "Breakdown Type Labels",
  "transform": [
    {
      "window": [
        {"op": "min", "field": "Breakdown Number", "as": "minBreakdown"},
        {"op": "max", "field": "Breakdown Number", "as": "maxBreakdown"},
        {"op": "max", "field": "Total Amt", "as": "maxTotalAmt"}
      ],
      "groupby": ["Breakdown Type Number"]
    },
      {
      "calculate": "(datum.minBreakdown + datum.maxBreakdown) / 2",
      "as": "centerBreakdown"
    },
    {
      "window": [{"op": "max", "field": "maxTotalAmt", "as": "overallMaxTotalAmt"}]
    },
    {
      "calculate": "datum.overallMaxTotalAmt * 1.05",
      "as": "fixedLabelYPosition"
    },
    {
      "aggregate": [
        {"op": "mean", "field": "centerBreakdown", "as": "finalCenterBreakdown"},
        {"op": "mean", "field": "fixedLabelYPosition", "as": "finalLabelYPosition"}
      ],
      "groupby": ["Breakdown Type"]
    }
  ],
  "mark": {
    "type": "text",
    "align": "center",
    "baseline": "bottom",
    "fontSize": 12,
    "fontWeight": "bold",
    "dx": 0 // テキストの位置調整
  },
  "encoding": {
    "x": {
      "field": "finalCenterBreakdown",
      "type": "quantitative"
    },
    "y": {
      "field": "finalLabelYPosition",
      "type": "quantitative"
    },
    "text": {
      "field": "Breakdown Type",
      "type": "nominal"
    },
    "color": {
      "value": "black"
    }
  }
}```
发布评论

评论列表(0)

  1. 暂无评论