我几乎已经找到了一种可以达到预期效果的解决方法.然而,有一件事我仍然在努力解决-这可能不是太困难,但我正在习惯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
          }
        }
      }
    }
  ]
}

有谁能帮帮忙吗? 非常感谢!(即感谢戴维德,他总是乐于助人:)

推荐答案

你应该能够适应这一点.

enter image description here

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

Json相关问答推荐

Vega-Lite:文本笔画在外部

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

如何使用JQ将JSON字符串替换为解析后的类似功能?

处理输入数据并转换为更简单的格式-PowerBI

织女星-没有循环的动画条形图第二部分(实际上是织女星)

有没有办法让serde_json正确/不正确地处理NaN、inf和-inf(IEEE 754特殊标准)?

Azure数据工厂-WEB活动输出赢得';t返回JSON

将 REST API - json 输出转换为表 Power BI

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

展平多个数组以保持顺序

使用本地 JSON api react TS Axios

父键中的 Perl JSON 数组

Microsoft GRAPH 查询使用端点 /deviceManagement/deviceHealthScripts 列出了一种不熟悉的检测脚本内容格式

解析包含换行符的 JSON

在 JSON API Wordpress 上启用 CORS

如何使用 jq 将 JSON 对象流转换为数组

json和空数组

是否可以将数据写入本地 json 文件,除了Angular 之外什么都没有?

Laravel 5 控制器将 JSON 整数作为字符串发送

Backbone.js 模型与集合