Vegalite 中分组条形图的偏移问题

Question

我想创建一个分组条形图，当数据较少时看起来不错，但当数据较大时条形相互重叠在编辑器中查看图表 我希望栏清晰显示，宽度相等

Answer 1

更新

{"name": "BarWidth", "expr": "length(data('source_0'))/3/4"},

更新结束

您有一个名为 BarWidth 的参数 - 只需减少该数字即可。这里我已经做到了5。

{
  "config": {
    "legend": {
      "layout": {"bottom": {"anchor": "middle"}, "top": {"anchor": "middle"}},
      "orient": {"expr": "LegendOrient"}
    }
  },
  "data": {
    "values": [
      {
        "Calendar Month ID - YYYYMM": "201201",
        "Measures": "Cancel-Tickets",
        "Measures Value": 223
      },
      {
        "Calendar Month ID - YYYYMM": "201201",
        "Measures": "Confirm-Ticket",
        "Measures Value": 1687
      },
      {
        "Calendar Month ID - YYYYMM": "201201",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 1910
      },
      {
        "Calendar Month ID - YYYYMM": "201202",
        "Measures": "Cancel-Tickets",
        "Measures Value": 140
      },
      {
        "Calendar Month ID - YYYYMM": "201202",
        "Measures": "Confirm-Ticket",
        "Measures Value": 1475
      },
      {
        "Calendar Month ID - YYYYMM": "201202",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 1615
      },
      {
        "Calendar Month ID - YYYYMM": "201203",
        "Measures": "Cancel-Tickets",
        "Measures Value": 207
      },
      {
        "Calendar Month ID - YYYYMM": "201203",
        "Measures": "Confirm-Ticket",
        "Measures Value": 1787
      },
      {
        "Calendar Month ID - YYYYMM": "201203",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 1994
      },
      {
        "Calendar Month ID - YYYYMM": "201204",
        "Measures": "Cancel-Tickets",
        "Measures Value": 196
      },
      {
        "Calendar Month ID - YYYYMM": "201204",
        "Measures": "Confirm-Ticket",
        "Measures Value": 1795
      },
      {
        "Calendar Month ID - YYYYMM": "201204",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 1991
      },
      {
        "Calendar Month ID - YYYYMM": "201205",
        "Measures": "Cancel-Tickets",
        "Measures Value": 277
      },
      {
        "Calendar Month ID - YYYYMM": "201205",
        "Measures": "Confirm-Ticket",
        "Measures Value": 1629
      },
      {
        "Calendar Month ID - YYYYMM": "201205",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 1906
      },
      {
        "Calendar Month ID - YYYYMM": "201206",
        "Measures": "Cancel-Tickets",
        "Measures Value": 349
      },
      {
        "Calendar Month ID - YYYYMM": "201206",
        "Measures": "Confirm-Ticket",
        "Measures Value": 1922
      },
      {
        "Calendar Month ID - YYYYMM": "201206",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 2273
      },
      {
        "Calendar Month ID - YYYYMM": "201207",
        "Measures": "Cancel-Tickets",
        "Measures Value": 416
      },
      {
        "Calendar Month ID - YYYYMM": "201207",
        "Measures": "Confirm-Ticket",
        "Measures Value": 2197
      },
      {
        "Calendar Month ID - YYYYMM": "201207",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 2614
      },
      {
        "Calendar Month ID - YYYYMM": "201208",
        "Measures": "Cancel-Tickets",
        "Measures Value": 67
      },
      {
        "Calendar Month ID - YYYYMM": "201208",
        "Measures": "Confirm-Ticket",
        "Measures Value": 705
      },
      {
        "Calendar Month ID - YYYYMM": "201208",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 772
      },
      {
        "Calendar Month ID - YYYYMM": "201209",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201209",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201209",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201210",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201210",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201210",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201211",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201211",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201211",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201212",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201212",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201212",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201301",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201301",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201301",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201302",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201302",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201302",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201303",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201303",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201303",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201304",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201304",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201304",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201305",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201305",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201305",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201306",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201306",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201306",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201307",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201307",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201307",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201308",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201308",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201308",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201309",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201309",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201309",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201310",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201310",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201310",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201311",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201311",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201311",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201312",
        "Measures": "Cancel-Tickets",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201312",
        "Measures": "Confirm-Ticket",
        "Measures Value": 0
      },
      {
        "Calendar Month ID - YYYYMM": "201312",
        "Measures": "WaiyingLIst-Ticket",
        "Measures Value": 0
      }
    ]
  },
  "params": [
    {"name": "ColorScheme", "value": "set2"},
    {"name": "LegendLabelBaseline", "value": "middle"},
    {"name": "LegendLabelColor", "value": "#000000"},
    {"name": "LegendLabelFontSize", "value": 13},
    {"name": "LegendLabellimit", "value": 0},
    {"name": "LegendLabelOffset", "value": 5},
    {"name": "LegendLabelOpicity", "value": 1},
    {"name": "LegendSymbolOpicity", "value": 1},
    {"name": "LegendSymbolSize", "value": 200},
    {"name": "LegendSymbol", "value": "square"},
    {"name": "YAxisTitleX", "value": -40},
    {"name": "LegendOrient", "value": "top"},
    {"name": "XAxisLabelAngle", "value": -45},
    {"name": "XAxisTitle", "value": "Measures"},
    {"name": "TitleAlign", "value": "center"},
    {"name": "XAxisTitleAngle", "value": 0},
    {"name": "TitleAnchor", "value": "middle"},
    {"name": "XAxisPostion", "value": 1},
    {"name": "XAxisLabelSize", "value": 13},
    {"name": "XAxisTickSize", "value": 5},
    {"name": "XAxisLabelLimit", "value": 0},
    {"name": "XAxisLabelColor", "value": "black"},
    {"name": "XAxisTitleColor", "value": "black"},
    {"name": "XAxisTitleFontSize", "value": 16},
    {"name": "TitleLimit", "value": 0},
    {"name": "TitleOffset", "value": -10},
    {"name": "TitleFontColor", "value": "black"},
    {"name": "TitleFontSize", "value": 16},
    {"name": "TitleBaseline", "value": "center"},
    {"name": "TitleText", "value": "MAT Chart"},
    {"name": "YAxisPostion", "value": 0},
    {"name": "YAxisTickSize", "value": 2},
    {"name": "YAxisLabelLimit", "value": 0},
    {"name": "YAxisLabelColor", "value": "black"},
    {"name": "YAxisLabelSize", "value": 13},
    {"name": "YAxisTitleColor", "value": "black"},
    {"name": "YAxisTitleFontSize", "value": 16},
    {"name": "YAxisTitle", "value": "Measures Value"},
    {"name": "YAxisLabelAngle", "value": -45},
    {"name": "Subtitle", "value": ""},
    {"name": "SubTitleColor", "value": "black"},
    {"name": "SubtitleFont", "value": "bold"},
    {"name": "SubtitleFontSize", "value": 16},
    {"name": "BarWidth", "value": 5},
    {"name": "BarCornerRadiusTopLeft", "value": 0},
    {"name": "BarCornerRadiusTopRight", "value": 0},
    {"name": "BarCornerRadiusBottomLeft", "value": 0},
    {"name": "BarCornerRadiusBottomRight", "value": 0},
    {"name": "BarOpacity", "value": 1},
    {"name": "YAxisTitleAngle", "value": 270},
    {"name": "LegendColumn", "value": 4},
    {"name": "TitleDx", "value": 0}
  ],
  "title": {
    "align": {"expr": "TitleAlign"},
    "anchor": {"expr": "TitleAnchor"},
    "baseline": {"expr": "TitleBaseline"},
    "color": {"expr": "TitleFontColor"},
    "dx": {"expr": "TitleDx"},
    "fontSize": {"expr": "TitleFontSize"},
    "limit": {"expr": "TitleLimit"},
    "offset": {"expr": "TitleOffset"},
    "subtitle": {"expr": "Subtitle"},
    "subtitleColor": {"expr": "SubTitleColor"},
    "subtitleFont": {"expr": "SubtitleFont"},
    "subtitleFontSize": {"expr": "SubtitleFontSize"},
    "text": {"expr": "TitleText"}
  },
  "vconcat": [
    {
      "encoding": {
        "x": {
          "axis": {
            "labelAngle": {"expr": "XAxisLabelAngle"},
            "labelColor": {"expr": "XAxisLabelColor"},
            "labelFontSize": {"expr": "XAxisLabelSize"},
            "labelLimit": {"expr": "XAxisLabelLimit"},
            "position": {"expr": "XAxisPostion"},
            "tickSize": {"expr": "XAxisTickSize"},
            "title": {"expr": "XAxisTitle"},
            "titleAngle": {"expr": "XAxisTitleAngle"},
            "titleColor": {"expr": "XAxisTitleColor"},
            "titleFontSize": {"expr": "XAxisTitleFontSize"}
          },
          "field": "Calendar Month ID - YYYYMM",
          "sort": {"field": "id"}
        }
      },
      "height": 250,
      "layer": [
        {
          "encoding": {
            "color": {
              "field": "Measures",
              "legend": {
                "columns": {"expr": "LegendColumn"},
                "labelBaseline": {"expr": "LegendLabelBaseline"},
                "labelColor": {"expr": "LegendLabelColor"},
                "labelFontSize": {"expr": "LegendLabelFontSize"},
                "labelLimit": {"expr": "LegendLabellimit"},
                "labelOffset": {"expr": "LegendLabelOffset"},
                "labelOpacity": {"expr": "LegendLabelOpicity"},
                "symbolOpacity": {"expr": "LegendSymbolOpicity"},
                "symbolSize": {"expr": "LegendSymbolSize"},
                "symbolType": {"expr": "LegendSymbol"}
              },
              "scale": {"scheme": {"expr": "ColorScheme"}},
              "title": ""
            },
            "xOffset": {"field": "Measures"},
            "y": {
              "axis": {
                "grid": true,
                "labelAngle": {"expr": "YAxisLabelAngle"},
                "labelColor": {"expr": "YAxisLabelColor"},
                "labelFontSize": {"expr": "YAxisLabelSize"},
                "labelLimit": {"expr": "YAxisLabelLimit"},
                "orient": "left",
                "position": {"expr": "YAxisPostion"},
                "tickSize": {"expr": "YAxisTickSize"},
                "title": {"expr": "YAxisTitle"},
                "titleAngle": {"expr": "YAxisTitleAngle"},
                "titleColor": {"expr": "YAxisTitleColor"},
                "titleFontSize": {"expr": "YAxisTitleFontSize"},
                "titleX": {"expr": "YAxisTitleX"}
              },
              "field": "Measures Value",
              "scale": {"zero": false},
              "type": "quantitative"
            }
          },
          "mark": {
            "cornerRadiusBottomLeft": {"expr": "BarCornerRadiusBottomLeft"},
            "cornerRadiusBottomRight": {"expr": "BarCornerRadiusBottomRight"},
            "cornerRadiusTopLeft": {"expr": "BarCornerRadiusTopLeft"},
            "cornerRadiusTopRight": {"expr": "BarCornerRadiusTopRight"},
            "opacity": {"expr": "BarOpacity"},
            "tooltip": true,
            "type": "bar",
            "width": {"expr": "BarWidth"}
          }
        }
      ],
      "resolve": {"scale": {"color": "independent", "shape": "independent"}},
      "width": "container"
    }
  ]
}