了解Vega

时间:2016-02-16 15:57:16

标签: javascript charts

我一直在玩Vega,但我无法理解如何将垂直条形图转换成水平条形图。

不久前在这里发布了一个类似的问题:vega horizontal bar charts但是提供的答案并不十分清楚,为了产生预期结果,对代码的确切做法是什么。我也无法让解决方案运行!

我现在的理解是你需要切换X和Y轴并进行缩放,但是我迷失的地方也是要翻转标记?我已经尝试设置“x”和“y”属性,但我只是得到一张空白的图表作为回报......真的感觉我只是因为我的轴是正确的而错过了一件事,但无法弄清楚它是什么是!

编辑:取得了一些进展!我的专栏现在正在出现,但他们的位置与实际的嘀嗒声相差很远。我已经研究过调整序数标度的“点”参数,但结果是最后一列

The plot I obtain right now.

And with the "points" parameter set to true for the y scale.

这是我到目前为止的代码

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "points": true
      "range": "height",
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": {
            "r": {
              "value": 66
            },
            "g": {
              "value": 190
            },
            "b": {
              "value": 244
            }
          }
        }
      }
    }
  ]
}

1 个答案:

答案 0 :(得分:0)

胜利!

这是一个有效的规范!

我使用"填充"顺序量表的属性,以获得理想的结果。

{
  "width": 400,
  "height": 400,
  "padding": {
    "top": 30,
    "left": 40,
    "bottom": 30,
    "right": 10
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "x": "Mon",
          "y": 2
        },
        {
          "x": "Tue",
          "y": 3
        },
        {
          "x": "Wed",
          "y": 10
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "height",
      "points": true,
      "padding": 1,
      "zero": false,
      "domain": {
        "data": "table",
        "field": "x"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "width",
      "domain": {
        "data": "table",
        "field": "y"
      },
      "nice": true
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "y"
    },
    {
      "type": "y",
      "scale": "x"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "properties": {
        "enter": {
          "x": {
            "scale": "y",
            "field": "y"
          },
          "x2": {
            "value": 0
          },
          "yc": {
            "scale": "x",
            "field": "x"
          },
          "height": {
            "value": 40
          },
          "fill": [
            66,
            190,
            244
          ]
        }
      }
    }
  ]
}