如何设置此vega图表的宽度(尝试宽度：“容器”，但没有用)

Question

试图绘制类似于分组条形图的织女星图形，但面临一些与尺寸有关的问题。

你能帮我弄清楚它的故障在哪里吗？

参考这篇https://discuss.elastic.co/t/vega-bar-chart/283578文章来创建下面的示例代码

共享用于这的示例代码

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "transform": [
        {`enter code here`
            "fold": [
                "precision",
                "recall"
            ]
        }
    ],
    "data": {
        "name": "table",
        "values": [
            {
                "created": "2022-01-07",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-10",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-11",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 0,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-12",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 2,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-13",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-14",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 3,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-17",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 8,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-18",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 1,
                "visit_failed": 0,
                "pending": 2,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-19",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 2,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-20",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-01-21",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 5,
                "precision": 0,
                "recall": 0,
                "error": 1
            },
            {
                "created": "2022-01-24",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 2,
                "precision": 0,
                "recall": 0,
                "error": 2
            },
            {
                "created": "2022-01-25",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 9,
                "precision": 0,
                "recall": 0,
                "error": 2
            },
            {
                "created": "2022-01-27",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 2,
                "visit_failed": 0,
                "pending": 2,
                "precision": 1,
                "recall": 1,
                "error": 0
            },
            {
                "created": "2022-01-28",
                "survival_success": 100,
                "survival_failed": 0,
                "visit_success": 1,
                "visit_failed": 1,
                "pending": 0,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-02-01",
                "survival_success": 100,
                "survival_failed": 0,
                "visit_success": 3,
                "visit_failed": 0,
                "pending": 2,
                "precision": 1,
                "recall": 1,
                "error": 1
            },
            {
                "created": "2022-02-02",
                "survival_success": 50,
                "survival_failed": 50,
                "visit_success": 0,
                "visit_failed": 2,
                "pending": 1,
                "precision": 0,
                "recall": 0,
                "error": 1
            },
            {
                "created": "2022-02-03",
                "survival_success": 0,
                "survival_failed": 100,
                "visit_success": 1,
                "visit_failed": 0,
                "pending": 0,
                "precision": 1,
                "recall": 1,
                "error": 3
            },
            {
                "created": "2022-02-04",
                "survival_success": 100,
                "survival_failed": 0,
                "visit_success": 1,
                "visit_failed": 0,
                "pending": 3,
                "precision": 1,
                "recall": 1,
                "error": 0
            },
            {
                "created": "2022-02-07",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 2,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-02-08",
                "survival_success": 100,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 2,
                "pending": 2,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-02-09",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "precision": 0,
                "recall": 0,
                "error": 0
            },
            {
                "created": "2022-02-10",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 7,
                "precision": 0,
                "recall": 0,
                "error": 4
            },
            {
                "created": "2022-02-11",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 1,
                "visit_failed": 2,
                "pending": 10,
                "precision": 1,
                "recall": 1,
                "error": 0
            },
            {
                "created": "2022-02-14",
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 1,
                "visit_failed": 0,
                "pending": 0,
                "precision": 1,
                "recall": 1,
                "error": 3
            },
            {
                "created": "2022-02-15",
                "survival_success": 100,
                "survival_failed": 0,
                "visit_success": 1,
                "visit_failed": 0,
                "pending": 0,
                "precision": 1,
                "recall": 1,
                "error": 0
            },
            {
                "created": "2022-02-16",
                "survival_success": 0,
                "survival_failed": 100,
                "visit_success": 5,
                "visit_failed": 7,
                "pending": 4,
                "precision": 0.8333333333333334,
                "recall": 1,
                "error": 0
            },
            {
                "created": "2022-02-18",
                "survival_success": 57.14285714285714,
                "survival_failed": 42.857142857142854,
                "visit_success": 8,
                "visit_failed": 11,
                "pending": 8,
                "precision": 1,
                "recall": 1,
                "error": 0
            },
            {
                "created": "2022-02-22",
                "survival_success": 45.45454545454545,
                "survival_failed": 54.54545454545454,
                "visit_success": 7,
                "visit_failed": 9,
                "pending": 12,
                "precision": 0.6,
                "recall": 1,
                "error": 10
            },
            {
                "survival_success": 80,
                "survival_failed": 20,
                "visit_success": 5,
                "visit_failed": 3,
                "pending": 3,
                "error": 0,
                "precision": 0.7142857142857143,
                "recall": 1,
                "created": "2022-02-24"
            },
            {
                "survival_success": 25,
                "survival_failed": 75,
                "visit_success": 3,
                "visit_failed": 1,
                "pending": 2,
                "error": 1,
                "precision": 1,
                "recall": 1,
                "created": "2022-02-25"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 0,
                "error": 1,
                "precision": 0,
                "recall": 0,
                "created": "2022-03-04"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 0,
                "error": 2,
                "precision": 0,
                "recall": 0,
                "created": "2022-03-09"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 4,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-03-10"
            },
            {
                "survival_success": 83.33333333333334,
                "survival_failed": 16.666666666666664,
                "visit_success": 4,
                "visit_failed": 2,
                "pending": 4,
                "error": 2,
                "precision": 1,
                "recall": 1,
                "created": "2022-03-11"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "error": 1,
                "precision": 0,
                "recall": 0,
                "created": "2022-04-20"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "error": 1,
                "precision": 0,
                "recall": 0,
                "created": "2022-04-21"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "error": 3,
                "precision": 0,
                "recall": 0,
                "created": "2022-04-25"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 2,
                "error": 2,
                "precision": 0,
                "recall": 0,
                "created": "2022-04-26"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 7,
                "error": 5,
                "precision": 0,
                "recall": 0,
                "created": "2022-04-27"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 3,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-04-28"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 9,
                "error": 1,
                "precision": 0,
                "recall": 0,
                "created": "2022-04-29"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 3,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-02"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-04"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 3,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-06"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 6,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-09"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 21,
                "error": 15,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-13"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 3,
                "pending": 15,
                "error": 1,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-16"
            },
            {
                "survival_success": 100,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 1,
                "pending": 29,
                "error": 5,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-17"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 20,
                "error": 5,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-18"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 3560,
                "error": 3085,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-19"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1656,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-20"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-21"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 4,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-22"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 3,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-23"
            },
            {
                "survival_success": 0,
                "survival_failed": 0,
                "visit_success": 0,
                "visit_failed": 0,
                "pending": 1,
                "error": 0,
                "precision": 0,
                "recall": 0,
                "created": "2022-05-24"
            }
        ]
    },
    "mark": {
        "type": "bar",
        "tooltip": true
    },
    "encoding": {
        "column": {
            "field": "created",
            "timeUnit": "yearmonthdate",
            "type": "ordinal",
            "header": {
                "labelOrient": "bottom",
                "labelAngle": 60,
                "labelPadding": 30,
                "labelAlign": "left"
            },
            "title": "Time Range",
            "spacing": 20
        },
        "x": {
            "field": "key",
            "type": "ordinal",
            "axis": null
        },
        "y": {
            "field": "value",
            "type": "quantitative",
            "title": "Value(%)",
            "aggregate": null,
            "format": ".2f"
        },
        "color": {
            "field": "key",
            "type": "nominal",
            "scale": {
                "range": [
                    "#675193",
                    "#ca8861"
                ]
            },
            "title": "Performance Metrices",
            "legend": {
                "orient": "top",
                "padding": 20,
                "labelExpr": "upper(datum.label)"
            }
        }
    },
    "config": {
        "axis": {
            "grid": false
        },
        "view": {
            "stroke": "transparent"
        }
    }
}

Answer 1

如果是离散域，则需要指定每个条形图的宽度，而不是为整个图表指定宽度。

"width": {"step": 5},

那么图表的整个宽度将是number_of_bars * bar_width

在Vega编辑器中打开图表

如果您正在寻找动态/响应宽度(通过设置"width": "container"或"autosize": "fit-x")，不幸的是，我相信vega 不支持分面图表。