首页 / 技术问答 / Json问答列表 / 问答详情

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

expected chartenter image description hereI want to create a Grouped Bar Chart , it look good when data is less but when data is large then bar overlap to each other See chart in Editor i want bar clearly display with eqaul width

推荐答案

UPDATE个

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

UPDATE END个

You have a param named BarWidth - just reduce that number. Here I have made it 5. enter image description here

{
  "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"
    }
  ]
}

Json相关问答推荐

如何在Power BI中集成API和JSON数据后将数据转换为表？

JQ如何获取特定子元素的所有父母

我发现GoFr响应总是包含在数据字段中，如何返回自定义响应？

Jolt变换将字段移动到数组的每个元素中

错误：在 NX 工作区中找不到模块../swagger.json

使用 Power BI 中的 Deneb 视觉效果绘制面积图中的 X 轴日期

Jolt 转换数组对象并将某些字段移动到嵌套数组

取消嵌套数组并将数组名称添加为附加字段

jq可以在两个JSON对象列表中依次添加对象吗？

如何在jolt中使用shift和modify-overwrite-beta

Oracle Apex - 将 JSON 对象分配给变量以返回

我无法在 Go - Gin 中解析日期/时间

如何从 JSON 中获取数据并通过 vb6 在网格中显示

使用 JQ 从文件中删除重复的 JSON 块

Json.Net：用于自定义命名的 JsonSerializer-Attribute

JSON 语法错误：'unexpected number' 或 'JSON.parse： expected ',' or '}' after property value in object'

JSON.NET JsonConvert 与 .NET JavaScriptSerializer

我可以使用空字符串作为对象标识符吗？

MVC JsonResult camelCase 序列化

Jersey 2.0 相当于 POJOMappingFeature

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630