Vega Chart JSON规范更改Y的范围

编程问答 2022-06-09

问题描述

enter image description here

我已经使用以下Vega（带有NodeJS）JSON规范生成了上面的图表：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json","description": "A basic line chart example.","width": 300,"height": 300,"padding": 0,"signals": [
    {
      "name": "interpolate","value": "linear","bind": {
        "input": "select","options": [
          "basis","cardinal","catmull-rom","linear","monotone","natural","step","step-after","step-before"
        ]
      }
    }
  ],"scales": [
    {
      "name": "x","type": "point","range": "width","domain": {
        "data": "table","field": "x"
      }
    },{
      "name": "y","type": "linear","range": "height","nice": true,"zero": true,"field": "y"
      }
    },{
      "name": "color","type": "ordinal","range": "category","field": "c"
      }
    }
  ],"axes": [
    {
      "orient": "bottom","scale": "x","zindex": 1
    },{
      "orient": "left","scale": "y","zindex": 1
    }
  ],"marks": [
    {
      "type": "group","from": {
        "data": "table"
      },"marks": [
        {
          "type": "line","from": {
            "data": "table"
          },"encode": {
            "enter": {
              "x": {
                "scale": "x","field": "x"
              },"y": {
                "scale": "y","field": "y"
              },"stroke": {
                "scale": "color","field": "c"
              },"strokeWidth": {
                "value": 2
              }
            },"update": {
              "interpolate": {
                "signal": "interpolate"
              },"strokeOpacity": {
                "value": 1
              }
            },"hover": {
              "strokeOpacity": {
                "value": 0.5
              }
            }
          }
        }
      ]
    }
  ]
}

我想知道：

  1. 确切地说明了如何更改规格，以使y比例仅从图形上的最小值（介于10k和11k之间）到图形上的最大值（介于11k和12k之间）之间变化。基本上是从10k到12k左右开始缩放，而不是从0开始一直

  2. 删除折线图下方底部的所有空白区域。

理想情况下，我的预期输出应如下所示：

enter image description here

我不想对y-scale的范围进行硬编码，因为它应该是动态的，具体取决于保存到JSON文件中的数据。

我从未进行过数据可视化，也从未使用过Vega，请原谅我，谢谢！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

chartsdata-visualizationjavascriptvega