vega水平条形图 [英] vega horizontal bar charts

问题描述

vega文档/教程建议设置水平条形图很容易，但我不能为我的生活弄明白。如何更改垂直条形图，例如 http：// vega.github.io/vega-editor/index.html?spec=bar 到水平一个？

解决方案

像这样

  {
width：200，
height：210，
padding：auto，
data：[
 {
name：raw，
values：[
 {x：A，y：28}，
 {x：B，y：55}，
 {x：C y：43}，
 {x：D，y：91}，
 {x：E，y：81}，
 {x：F，y：53}，
 {x：G，y：19}，
 {x：H y：87}，
 {x：I，y：52} 
]，
format：{parse：{y： number}}，
transform：[{type：filter，test：（d.data.y！== null）}] 
} 
]，
scales：[]，
marks：[
 {
_name：cell，
type：group ，
properties：{
enter：{width：{value：200}，height：{value：210}} 
} 
scales：[
 {
name：x，
type：linear，
domain：{data ：raw，field：data.y}，
range：[0,200]，
zero：true，
reverse：false，
round：true，
nice：true 
}，
 {
name：y，
type：ordinal ，
domain：{data：raw，field：data.x}，
sort：true，
range：[0,210 ]，
bandWidth：21，
round：true，
nice：true，
points：true，
padding 1 
} 
]，
axes：[
 {
type：x，
scale：x 
properties：{
grid：{
stroke：{value：＃000000}，
opacity：{value： 0.08} 
} 
}，
layer：back，
format：，
ticks：5，
 titleOffset：38，
grid：true，
title：y
}，
 {
type：y 
scale：y，
properties：{
labels：{text：{template： truncate：25}}}}，
grid：{
stroke：{value：＃000000}，
opacity：{value： 0.08} 
} 
}，
layer：back，
titleOffset：28，
grid：true，
 title：x
} 
]，
marks：[
 {
type：rect，
 ：{data：raw}，
properties：{
enter：{
x：{scale：x，field data.y}，
x2：{value：0}，
yc：{scale：y，field：data.x} ，
height：{value：21，offset：-1}，
fill：{value：＃4682b4} 
}，
update：{
x：{scale：x，field：data.y}，
x2：{value：0} ，
yc：{scale：y，field：data.x}，
height：{value：21，offset：-1 }，
fill：{value：＃4682b4} 
} 
} 
} ] 
} 
] 
} 
  

  {
data：{
values：[
 {x ：A，y：28}，{x：B，y：55}，{x：C，y：43} x：D，y：91}，{x：E，y：81}，{x：F，y：53} b {x：G，y：19}，{x：H，y：87}，{x：I，y：52} 
 $ b}，
marktype：bar，
encoding：{
y：{type：O ：x}，
x：{type：Q，name：y} 
} 
} 
  
 
 
 
使用vega-lite（ https://vega.github.io/vega-lite/ ）。
 
The vega documentation/tutorials suggest that setting up a horizontal bar chart is easy, but I can't figure it out for the life of me. How would I go about changing a vertical bar chart, such as http://vega.github.io/vega-editor/index.html?spec=bar, to a horizontal one?
解决方案
Like this
{
  "width": 200,
  "height": 210,
  "padding": "auto",
  "data": [
    {
      "name": "raw",
      "values": [
        {"x": "A","y": 28},
        {"x": "B","y": 55},
        {"x": "C","y": 43},
        {"x": "D","y": 91},
        {"x": "E","y": 81},
        {"x": "F","y": 53},
        {"x": "G","y": 19},
        {"x": "H","y": 87},
        {"x": "I","y": 52}
      ],
      "format": {"parse": {"y": "number"}},
      "transform": [{"type": "filter","test": "(d.data.y!==null)"}]
    }
  ],
  "scales": [],
  "marks": [
    {
      "_name": "cell",
      "type": "group",
      "properties": {
        "enter": {"width": {"value": 200},"height": {"value": 210}}
      },
      "scales": [
        {
          "name": "x",
          "type": "linear",
          "domain": {"data": "raw","field": "data.y"},
          "range": [0,200],
          "zero": true,
          "reverse": false,
          "round": true,
          "nice": true
        },
        {
          "name": "y",
          "type": "ordinal",
          "domain": {"data": "raw","field": "data.x"},
          "sort": true,
          "range": [0,210],
          "bandWidth": 21,
          "round": true,
          "nice": true,
          "points": true,
          "padding": 1
        }
      ],
      "axes": [
        {
          "type": "x",
          "scale": "x",
          "properties": {
            "grid": {
              "stroke": {"value": "#000000"},
              "opacity": {"value": 0.08}
            }
          },
          "layer": "back",
          "format": "",
          "ticks": 5,
          "titleOffset": 38,
          "grid": true,
          "title": "y"
        },
        {
          "type": "y",
          "scale": "y",
          "properties": {
            "labels": {"text": {"template": "{{data | truncate:25}}"}},
            "grid": {
              "stroke": {"value": "#000000"},
              "opacity": {"value": 0.08}
            }
          },
          "layer": "back",
          "titleOffset": 28,
          "grid": true,
          "title": "x"
        }
      ],
      "marks": [
        {
          "type": "rect",
          "from": {"data": "raw"},
          "properties": {
            "enter": {
              "x": {"scale": "x","field": "data.y"},
              "x2": {"value": 0},
              "yc": {"scale": "y","field": "data.x"},
              "height": {"value": 21,"offset": -1},
              "fill": {"value": "#4682b4"}
            },
            "update": {
              "x": {"scale": "x","field": "data.y"},
              "x2": {"value": 0},
              "yc": {"scale": "y","field": "data.x"},
              "height": {"value": 21,"offset": -1},
              "fill": {"value": "#4682b4"}
            }
          }
        }
      ],
      "legends": []
    }
  ]
}
I generated this chart from
{
  "data": {
    "values": [
      {"x":"A", "y":28}, {"x":"B", "y":55}, {"x":"C", "y":43},
      {"x":"D", "y":91}, {"x":"E", "y":81}, {"x":"F", "y":53},
      {"x":"G", "y":19}, {"x":"H", "y":87}, {"x":"I", "y":52}
    ]
  },
  "marktype": "bar",
  "encoding": {
    "y": {"type": "O","name": "x"},
    "x": {"type": "Q","name": "y"}
  }
}
with vega-lite (https://vega.github.io/vega-lite/).

                        
这篇关于vega水平条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！