json vega-lite中的条件轴标签权重(labelFontWeight)

ars1skjm  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(70)

我在vega-lite中尝试了许多不同的配置，但我似乎不能让这个工作。任何来自社区的帮助都将不胜感激。
正确的结果将是只有项目1是粗体，因为该记录有相位=“0”我已经尝试设置“相位”作为字符串和数字。
谢谢

"labelFontWeight": {"condition": {"test": {"field": "datum.phase","equal": "0"},"value": "bold"},"value": "normal"}

字符串
x1c 0d1x的数据

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "data": {
    "values": [
      {
        "phase": "0",
        "name": "Project 1",
        "start": "2023-03-01",
        "end": "2023-03-15",
        "pay": "2023-04-15",
        "status": "On track",
        "description": "This is the description of project 1."
      },
      {
        "phase": "1",
        "name": "Project 2",
        "start": "2023-03-10",
        "end": "2023-04-15",
        "pay": "2023-05-15",
        "status": "Delayed",
        "description": "This is the description of project 2."
      },
      {
        "phase": "2",
        "name": "Project 3",
        "start": "2023-04-01",
        "end": "2023-05-15",
        "pay": "2023-06-15",
        "status": "Behind schedule",
        "description": "This is the description of project 3."
      }
    ]
  },
  "transform": [
    {"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))", "as": "currentDate"}
  ],
  "title": {
    "text": "Gantt Chart with Rule Line for Today's Date",
    "fontSize": 14,
    "anchor": "start",
    "dy": -15,
    "color": "#706D6C"
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusTopRight": 4,
        "cornerRadiusBottomRight": 4
      },
      "encoding": {
        "y": {
          "field": "name",
          "type": "nominal",
          "axis": {
            "domain": true,
            "grid": false,
            "ticks": false,
            "labels": true,
            "labelFontSize": 14,
            "labelPadding": 10,
            "labelFontWeight": {"condition": {"test": {"field": "datum.phase","equal": "0"},"value": "bold"},"value": "normal"}
            },
          "title": null
        },
        "x": {
          "field": "start",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "axis": {
            "format": "%d-%b",
            "domain": true,
            "grid": false,
            "ticks": true,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x2": {"field": "end"},
        "color": {
          "title": null,
          "field": "status",
          "type": "nominal",
          "legend": {
            "padding": 0,
            "labelFontSize": 11,
            "labelColor": "#706D6C",
            "rowPadding": 8,
            "symbolOpacity": 0.9,
            "symbolType": "square"
          }
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeDash": [2, 2], "strokeWidth": 2},
      "encoding": {
        "x": {
          "field": "currentDate",
          "type": "temporal",
          "axis": {"format": "%d-%b"}
        }
      }
    },
    {
      "mark": {"type": "tick", "thickness": 1, "bandSize": 2, "color": "gray"},
      "encoding": {
        "x": {"field": "pay", "type": "temporal", "axis": {"format": "%d-%b"}},
        "y": {
          "field": "name",
          "type": "nominal",
          "title": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "right",
        "baseline": "middle",
        "dx": -5
      },
      "encoding": {
        "x": {"field": "pay", "type": "temporal"},
        "y": {"field": "name", "type": "nominal"},
        "text": {"field": "pay", "type": "temporal", "format": "%d-%b"},
        "color": {"value": "gray"}
      }
    }
  ],
  "config": {"view": {"stroke": null}}
}

型

JSON

2条答案

按热度按时间
piah890a

piah890a1#

对于这个问题，我发现了一个更灵活的解决方案。
只需创建一个新的计算转换，您可以在其中将任意多个字段连接到标签。例如，我在此处将名称、开始日期和任务连接到一个新标签：project_full_descr

"transform": [
{"calculate": "datum.name + ' | Start:' + utcFormat(datum.start,'%B %d, %Y') + ' | Task:' + format(datum.task, '.0f')", "as": "project_full_descr"}
  ],

字符串
然后在轴设置中我们可以检查标签是否包含特定的数据。这里我正在搜索Task：0并将其设置为粗体和黑色。

"labelFontWeight": {"expr": "indexof(datum.label, 'Task:0') !== -1 ?'bold':'normal'"}, 
"labelColor": {"expr": "indexof(datum.label, 'Task:0') !== -1 ? 'black':'gray'"},

型
现在，我们还可以添加一个表达式，通过选择第一个表达式之前的文本来清理标签描述|竖线字符。

"labelExpr": "split(datum.label, '|')[0]"

型
您可以在Vega编辑器上使用的整个解决方案：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "data": {
    "values": [
      {
        "task": 0,
        "name": "Project 1",
        "start": "2023-03-01",
        "end": "2023-03-15",
        "pay": "2023-04-15",
        "status": "On track",
        "description": "This is the description of project 1."
      },
      {
        "task": 1,
        "name": "Project 2",
        "start": "2023-03-10",
        "end": "2023-04-15",
        "pay": "2023-05-15",
        "status": "Delayed",
        "description": "This is the description of project 2."
      },
      {
        "task": 2,
        "name": "Project 3",
        "start": "2023-04-01",
        "end": "2023-05-15",
        "pay": "2023-06-15",
        "status": "Behind schedule",
        "description": "This is the description of project 3."
      }
    ]
  },
  "transform": [
    {"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))", "as": "currentDate"},
    {"calculate": "datum.name + ' | Start:' + utcFormat(datum.start,'%B %d, %Y') + ' | Task:' + format(datum.task, '.0f')", "as": "project_full_descr"}
  ],
  "title": {
    "text": "Gantt Chart with Rule Line for Today's Date",
    "fontSize": 14,
    "anchor": "start",
    "dy": -15,
    "color": "#706D6C"
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusTopRight": 4,
        "cornerRadiusBottomRight": 4
      },
      "encoding": {
        "y": {
          "field": "project_full_descr",
          "type": "nominal",
          "axis": {
            "domain": true,
            "grid": false,
            "ticks": false,
            "labels": true,
            "labelLimit": 800,
            "labelFontSize": 14,
            "labelPadding": 10,
            "labelFontWeight": {"expr": "indexof(datum.label, 'Task:0') !== -1 ?'bold':'normal'"}, 
            "labelColor": {"expr": "indexof(datum.label, 'Task:0') !== -1 ? 'black':'gray'"},
            "labelExpr": "split(datum.label, '|')[0]"
          },
          "title": null
        },
        "x": {
          "field": "start",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "axis": {
            "format": "%d-%b",
            "domain": true,
            "grid": false,
            "ticks": true,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x2": {"field": "end"},
        "color": {
          "title": null,
          "field": "status",
          "type": "nominal",
          "legend": {
            "padding": 0,
            "labelFontSize": 11,
            "labelColor": "#706D6C",
            "rowPadding": 8,
            "symbolOpacity": 0.9,
            "symbolType": "square"
          }
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeDash": [2, 2], "strokeWidth": 2},
      "encoding": {
        "x": {
          "field": "currentDate",
          "type": "temporal",
          "axis": {"format": "%d-%b"}
        }
      }
    },
    {
      "mark": {"type": "tick", "thickness": 1, "bandSize": 2, "color": "gray"},
      "encoding": {
        "x": {"field": "pay", "type": "temporal", "axis": {"format": "%d-%b"}},
        "y": {"field": "project_full_descr", "type": "nominal", "title": null}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "right",
        "baseline": "middle",
        "dx": -5
      },
      "encoding": {
        "x": {"field": "pay", "type": "temporal"},
        "y": {"field": "project_full_descr", "type": "nominal"},
        "text": {"field": "pay", "type": "temporal", "format": "%d-%b"},
        "color": {"value": "gray"}
      }
    }
  ],
  "config": {"view": {"stroke": null}}
}

型
我希望这对社区有帮助。

赞(0）分享  回复(0）举报  5个月前
snz8szmq

snz8szmq2#

给你


的数据

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "data": {
    "values": [
      {
        "phase": "0",
        "name": "Project 1",
        "start": "2023-03-01",
        "end": "2023-03-15",
        "pay": "2023-04-15",
        "status": "On track",
        "description": "This is the description of project 1."
      },
      {
        "phase": "1",
        "name": "Project 2",
        "start": "2023-03-10",
        "end": "2023-04-15",
        "pay": "2023-05-15",
        "status": "Delayed",
        "description": "This is the description of project 2."
      },
      {
        "phase": "2",
        "name": "Project 3",
        "start": "2023-04-01",
        "end": "2023-05-15",
        "pay": "2023-06-15",
        "status": "Behind schedule",
        "description": "This is the description of project 3."
      }
    ]
  },
  "transform": [
    {"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))", "as": "currentDate"}
  ],
  "title": {
    "text": "Gantt Chart with Rule Line for Today's Date",
    "fontSize": 14,
    "anchor": "start",
    "dy": -15,
    "color": "#706D6C"
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusTopRight": 4,
        "cornerRadiusBottomRight": 4
      },
      "encoding": {
        "y": {
          "field": "name",
          "type": "nominal",
          "axis": {
            "domain": true,
            "grid": false,
            "ticks": false,
            "labels": true,
            "labelFontSize": 14,
            "labelPadding": 10,
            "labelFontWeight": {
              "expr": "datum.label == 'Project 1'?'bold':'normal'"
            }
          },
          "title": null
        },
        "x": {
          "field": "start",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "axis": {
            "format": "%d-%b",
            "domain": true,
            "grid": false,
            "ticks": true,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x2": {"field": "end"},
        "color": {
          "title": null,
          "field": "status",
          "type": "nominal",
          "legend": {
            "padding": 0,
            "labelFontSize": 11,
            "labelColor": "#706D6C",
            "rowPadding": 8,
            "symbolOpacity": 0.9,
            "symbolType": "square"
          }
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeDash": [2, 2], "strokeWidth": 2},
      "encoding": {
        "x": {
          "field": "currentDate",
          "type": "temporal",
          "axis": {"format": "%d-%b"}
        }
      }
    },
    {
      "mark": {"type": "tick", "thickness": 1, "bandSize": 2, "color": "gray"},
      "encoding": {
        "x": {"field": "pay", "type": "temporal", "axis": {"format": "%d-%b"}},
        "y": {"field": "name", "type": "nominal", "title": null}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "right",
        "baseline": "middle",
        "dx": -5
      },
      "encoding": {
        "x": {"field": "pay", "type": "temporal"},
        "y": {"field": "name", "type": "nominal"},
        "text": {"field": "pay", "type": "temporal", "format": "%d-%b"},
        "color": {"value": "gray"}
      }
    }
  ],
  "config": {"view": {"stroke": null}}
}

字符串

赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com