2017-06-29 167 views
0

我有這樣的代碼如下: 如何在Vega的標籤中添加符號「%」?

{ 
 
    "$schema": "https://vega.github.io/schema/vega/v3.0.json", 
 
    "width": 700, 
 
    "height": 100, 
 
    "padding": 5, 
 
    "data": [ 
 
    { 
 
     "name": "table", 
 
     "values": [ 
 
     {"category": "MOYENNE","position": 0,"value": 91}, 
 
     {"category": "MOYENNE","position": 1,"value": 9} 
 
     ] 
 
    } 
 
    ], 
 
    "scales": [ 
 
    { 
 
     "name": "yscale", 
 
     "type": "band", 
 
     "domain": {"data": "table","field": "category"}, 
 
     "range": "height" 
 
    }, 
 
    { 
 
     "name": "xscale", 
 
     "type": "linear", 
 
     "domain": {"data": "table","field": "value"}, 
 
     "range": "width", 
 
     "round": true, 
 
     "zero": true, 
 
     "nice": true 
 
    }, 
 
    { 
 
     "name": "color", 
 
     "type": "ordinal", 
 
     "domain": {"data": "table","field": "position"}, 
 
     "range": ["#C8E6C9", "#FF8A65"] 
 
    } 
 
    ], 
 
    "axes": [ 
 
    { 
 
     "orient": "left", 
 
     "scale": "yscale", 
 
     "tickSize": 0, 
 
     "labelPadding": 4, 
 
     "zindex": 1 
 
    } 
 
    ], 
 
    "marks": [ 
 
    { 
 
     "type": "group", 
 
     "from": { 
 
     "facet": { 
 
      "data": "table", 
 
      "name": "facet", 
 
      "groupby": "category" 
 
     } 
 
     }, 
 
     "encode": { 
 
     "enter": {"y": {"scale": "yscale","field": "category"}} 
 
     }, 
 
     "signals": [{"name": "height","update": "bandwidth('yscale')"}], 
 
     "scales": [ 
 
     { 
 
      "name": "pos", 
 
      "type": "band", 
 
      "range": "height", 
 
      "domain": {"data": "facet","field": "position"} 
 
     } 
 
     ], 
 
     "marks": [ 
 
     { 
 
      "name": "bars", 
 
      "from": {"data": "facet"}, 
 
      "type": "rect", 
 
      "encode": { 
 
      "enter": { 
 
       "y": {"scale": "pos","field": "position"}, 
 
       "height": {"scale": "pos","band": 1}, 
 
       "x": {"scale": "xscale","field": "value"}, 
 
       "x2": {"scale": "xscale","value": 0}, 
 
       "fill": {"scale": "color","field": "position"} 
 
      } 
 
      } 
 
     }, 
 
     { 
 
      "type": "text", 
 
      "from": {"data": "bars"}, 
 
      "encode": { 
 
      "enter": { 
 
       "x": {"field": "x2","offset": 15}, 
 
       "y": { 
 
       "field": "y", 
 
       "offset": {"field": "height","mult": 0.5} 
 
       }, 
 
       "fill": {"value": "black"}, 
 
       "align": {"value": "right"}, 
 
       "baseline": {"value": "middle"}, 
 
       "text": {"field": "datum.value"} 
 
      } 
 
      } 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
}

我只是想把%的我的標籤有91%和9%。我認爲這是最後一行:「text」:{「field」:「datum.value」},但我不能只是做以下幾點:「文本」:{「field」:「datum .value「+」%「}或類似的東西...

任何人都可以幫助我?非常感謝您提前:) :)

回答

0

我不完全確定這是最佳實踐,但它確實有效,並且基於關於format的Vega表達式文檔。

{ 
    "$schema": "https://vega.github.io/schema/vega/v3.0.json", 
    "width": 700, 
    "height": 100, 
    "padding": 5, 
    "data": [ 
    { 
     "name": "table", 
     "values": [ 
     {"category": "MOYENNE","position": 0,"value": 91}, 
     {"category": "MOYENNE","position": 1,"value": 9} 
     ], 
     "transform": [ 
     { 
      "type": "formula", 
      "expr": "format(datum.value/100,'0.0p')", 
      "as": "percentvalue" 
     } 
     ] 
    } 
    ], 
    "scales": [ 
    { 
     "name": "yscale", 
     "type": "band", 
     "domain": {"data": "table","field": "category"}, 
     "range": "height" 
    }, 
    { 
     "name": "xscale", 
     "type": "linear", 
     "domain": {"data": "table","field": "value"}, 
     "range": "width", 
     "round": true, 
     "zero": true, 
     "nice": true 
    }, 
    { 
     "name": "color", 
     "type": "ordinal", 
     "domain": {"data": "table","field": "position"}, 
     "range": ["#C8E6C9", "#FF8A65"] 
    } 
    ], 
    "axes": [ 
    { 
     "orient": "left", 
     "scale": "yscale", 
     "tickSize": 0, 
     "labelPadding": 4, 
     "zindex": 1 
    } 
    ], 
    "marks": [ 
    { 
     "type": "group", 
     "from": { 
     "facet": { 
      "data": "table", 
      "name": "facet", 
      "groupby": "category" 
     } 
     }, 
     "encode": { 
     "enter": {"y": {"scale": "yscale","field": "category"}} 
     }, 
     "signals": [{"name": "height","update": "bandwidth('yscale')"}], 
     "scales": [ 
     { 
      "name": "pos", 
      "type": "band", 
      "range": "height", 
      "domain": {"data": "facet","field": "position"} 
     } 
     ], 
     "marks": [ 
     { 
      "name": "bars", 
      "from": {"data": "facet"}, 
      "type": "rect", 
      "encode": { 
      "enter": { 
       "y": {"scale": "pos","field": "position"}, 
       "height": {"scale": "pos","band": 1}, 
       "x": {"scale": "xscale","field": "value"}, 
       "x2": {"scale": "xscale","value": 0}, 
       "fill": {"scale": "color","field": "position"} 
      } 
      } 
     }, 
     { 
      "type": "text", 
      "from": {"data": "bars"}, 
      "encode": { 
      "enter": { 
       "x": {"field": "x2","offset": 15}, 
       "y": { 
       "field": "y", 
       "offset": {"field": "height","mult": 0.5} 
       }, 
       "fill": {"value": "black"}, 
       "align": {"value": "right"}, 
       "baseline": {"value": "middle"}, 
       "text": {"field": "datum.percentvalue"} 
      } 
      } 
     } 
     ] 
    } 
    ] 
} 

screenshot of percent values on chart