I am try to create a chart using vconcat composition, i create a vconcat[0] as main chart and vconcat[1] for customize scroller , that bind with main chart to behave like a scroller. case first-issue is that xaxis label show that data is plot incorrectly , how i fix this. initially not rendering chart in a month series order Editor link Second case- when chart is initially render in a order but on using scroller (just drag mouse over the white strip to select area i.e vconca[1] and used that to move back and forth ) and then double click on scroller , chart is not comming with correct order month on X-axis label get mix not come in proper sequence of month and year as expected.chart initally render in sequence by adding sort null in x axis Editor link

我希望图表正确与顺序或预期,并在使用滚动后退和堡垒正确查看结果,也显示正确的结果时,所有的数据在正确的顺序,当双击条带{vconat[1]} 意味着滚动条在滚动和拖动NAD时总是显示正确的数据,也可以在双击时显示.

推荐答案

这就是你想要的吗?

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"Count": 210.64, "month": "Jan-21", "name": "DRC"},
      {"Count": 179.95, "month": "Feb-21", "name": "WER"},
      {"Count": 155.48, "month": "Mar-21", "name": "GHJ"},
      {"Count": 230.72, "month": "Apr-21", "name": "THE"},
      {"Count": 167.27, "month": "May-21", "name": "JUY"},
      {"Count": 35.02, "month": "Jun-21", "name": "EDC"},
      {"Count": 234.97, "month": "Jul-21", "name": "QSD"},
      {"Count": 176.2, "month": "Aug-21", "name": "AXC"},
      {"Count": 163.84, "month": "Sep-21", "name": "FDS"},
      {"Count": 191.01, "month": "Oct-21", "name": "ASD"},
      {"Count": 182.99, "month": "Nov-21", "name": "THN"},
      {"Count": 119.79, "month": "Dec-21", "name": "RFV"},
      {"Count": 124.74, "month": "Jan-22", "name": "WSX"},
      {"Count": 241.88, "month": "Feb-22", "name": "QSA"},
      {"Count": 163.01, "month": "Mar-22", "name": "KOI"},
      {"Count": 137.3, "month": "Apr-22", "name": "YHN"},
      {"Count": 0, "month": "May-22", "name": "YHJ"},
      {"Count": 160.51, "month": "Jun-22", "name": "KLO"}
    ]
  },
  "transform": [{"window": [{"op": "row_number", "as": "row"}]}],
  "description": "Google's stock price over time.",
  "vconcat": [
    {
      "height": 250,
      "layer": [
        {
          "encoding": {
            "x": {
              "field": "month",
              "type": "nominal",
              "sort": {"field": "row", "order": "ascending"}
            },
            "y": {
              "field": "Count",
              "scale": {"zero": false},
              "type": "quantitative"
            }
          },
          "mark": {"line": true, "point": true, "tooltip": true, "type": "area"}
        }
      ],
      "transform": [{"filter": {"param": "brush"}}],
      "width": "container"
    },
    {
      "encoding": {
        "color": {"value": "lightGray"},
        "x": {
          "axis": {
            "labels": false,
            "ticks": false,
            "title": null
          },
          "field": "month",
          "type": "nominal",  "sort": {"field": "row", "order": "ascending"}
        },
        "y": {
          "field": "Count",
          "scale": {"zero": false},
          "type": "quantitative"
        }
      },
      "height": 40,
      "mark": {"opacity": 1, "type": "area"},
      "params": [
        {
          "name": "brush",
          "select": {"encodings": ["x"], "translate": true, "type": "interval"}
        }
      ],
      "width": "container"
    }
  ]
}

Json相关问答推荐

如何使用Laravel在MariaDB JSON kolumn中使用unicode字符

最新版本的Deneb在数据溢出时不支持滚动

Flutter -控制器问题-JSON API

jq:将一个数组与多个数组连接起来

删除 JOLT 中的方括号

在 postgres 14 中将记录转换为所需的 json 格式

基于JQ中另一个对象的值 Select 对象

从 oracle 数据库中的 json blob 打印值

NiFi 使用嵌套数组将 avro 转换为 JSON 数组格式

将 colly 包输出文本添加到 golang 中的映射

JOLT 在 struct 体中间添加一个 JSON 字段

嵌套 JSON 到 CSV(多级)

ORA-01422: 精确提取返回的行数超过了与 json 对象组合的请求数

JSON Schema 与 XML Schema 的比较及其future

未捕获的类型错误:无法读取 null 的属性props

如何创建 JSON 对象 Node.js

获取一个数字的 PHP 对象属性

MVC JsonResult camelCase 序列化

python追加到json对象中的数组

如何在本地存储中存储对象数组?