2017-06-29 3 views
0

Ich habe diesen Code folgenden: Wie Symbole wie "%" in Etiketten in Vega hinzufügen?

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

Ich möchte nur in meinen Etiketten aufgeführt% 91% und 9% hat.

Ich denke, das ist in der letzten Zeile: "Text": {"Feld": "Datum.Wert"}, aber ich kann nicht nur Folgendes tun: "Text": {"Feld": "Datum .value "+"% "} oder so ähnlich ...

Jeder kann mir bitte helfen ?? Vielen Dank im Voraus :)

Antwort

0

Ich bin mir nicht ganz sicher, das ist Best Practice, aber es funktioniert und basiert auf der Vega Ausdrücke Dokumentation von format.

{ 
    "$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

Verwandte Themen