json Vega Lite -无循环PART2的动画条形图(实际上是VEGA)

slsn1g29  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(56)

我几乎已经找到了一个可以达到预期效果的解决方案。然而,有一件事我仍然在努力解决-这可能不是太困难,但我正在习惯Vega,它与Vega Lite有点不同。
目前,条形从0增长到4000,使用硬编码值,该值应替换为与每个条形对应的动态值。
下面是需要修改的信号,以动态存储每个条形图的对应值,而不是使用硬编码值(代码中的第5-8行):

{
"name": "ceiling_value",
"value": 4000
}

字符串
然后,信号被传递到箝位功能,该功能确定杆的最小和最大范围:

{          
"type": "formula",
"as": "value",
"expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
}


完整代码:

{
  "width": 200,
  "height": 220,
  "signals": [
    {
      "name": "ceiling_value",
      "value": 4000
    },
    {
      "name": "increment",
      "value": 1,
      "on": [
        {
          "events": "timer{70}",
          "update": "increment + 500"
        }
      ]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {"day": "1", "value": 2200,"zero_measure": 0},
        {"day": "2", "value": 3200,"zero_measure": 0},
        {"day": "3", "value": 1800,"zero_measure": 0},
        {"day": "4", "value": -1500,"zero_measure": 0},
        {"day": "5", "value": 700,"zero_measure": 0}
      ],

      "transform": [
        {
          "type": "formula",
          "as": "day",
          "expr": "datum['day']"
        },
        {
          "type": "formula",
          "as": "value",
          "expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "table",
        "field": "day"
      },
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": [0, 6000],
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale"
    },
    {
      "orient": "bottom",
      "scale": "xscale"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "day"
          },
          "width": {
            "scale": "xscale",
            "band": 0.8,
            "offset": -1
          },
          "fill": {
            "value": "steelblue"
          },
          "cornerRadius": {"value": 4}
        },
        "update": {
          "y": {
            "scale": "yscale",
            "field": "value"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        }
      }
    }
  ]
}


有人能帮忙吗?非常感谢!(也就是感谢大卫谁总是愿意帮助:))

kse8i1jr

kse8i1jr1#

你应该能适应这个。


的数据

{
  "width": 200,
  "height": 220,
  "signals": [
    
    {
      "name": "increment",
      "value": 1,
      "on": [{"events": "timer{70}", "update": "increment + 500"}]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {"day": "1", "value": 2200, "zero_measure": 0},
        {"day": "2", "value": 3200, "zero_measure": 0},
        {"day": "3", "value": 1800, "zero_measure": 0},
        {"day": "4", "value": 1500, "zero_measure": 0},
        {"day": "5", "value": 700, "zero_measure": 0}
      ],
      "transform": [
        {"type": "formula", "as": "day", "expr": "datum['day']"}
          ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "day"},
      "range": "width"
    },
    {"name": "yscale", "type": "linear", "domain": [0, 6000], "range": "height"}
  ],
  "axes": [
    {"orient": "left", "scale": "yscale"},
    {"orient": "bottom", "scale": "xscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "day"},
          "width": {"scale": "xscale", "band": 0.8, "offset": -1},
          "fill": {"value": "steelblue"},
          "cornerRadius": {"value": 4}
        },
        "update": {
          "y": {"scale": "yscale", "value": 0},
          "y2": {"signal": "increment<=datum.value? scale('yscale',increment):scale('yscale',datum.value)"}
        }
      }
    }
  ]
}

字符串

相关问题