Шаблон:Graph:Chart

[просмотр] [править] [история] [обновить]

 Документация

---

Параметры

Примеры

Line Chart:
{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}
<graph>{"axes":[{"format":"d","type":"x","scale":"x"},{"format":"d","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"y","y":10},{"x":2,"series":"y","y":12},{"x":3,"series":"y","y":6},{"x":4,"series":"y","y":14},{"x":5,"series":"y","y":2},{"x":6,"series":"y","y":10},{"x":7,"series":"y","y":7},{"x":8,"series":"y","y":9}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}}],"width":400,"height":100,"marks":[{"from":{"data":"chart"},"properties":{"enter":{"strokeWidth":{"value":2.5},"stroke":{"field":"series","scale":"color"},"x":{"field":"x","scale":"x"},"y":{"field":"y","scale":"y"}},"update":{"stroke":{"field":"series","scale":"color"}},"hover":{"stroke":{"value":"red"}}},"type":"line"}],"scales":[{"range":"width","nice":true,"zero":false,"domain":{"field":"x","data":"chart"},"name":"x","type":"linear"},{"range":"height","nice":true,"zero":false,"domain":{"field":"y","data":"chart"},"name":"y","type":"linear"},{"range":"category10","name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}}],"version":2,"legends":[]}</graph>
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.

Area chart:
{{Graph:Chart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}
<graph>{"axes":[{"format":"d","type":"x","scale":"x"},{"format":"d","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"y","y":10},{"x":2,"series":"y","y":12},{"x":3,"series":"y","y":6},{"x":4,"series":"y","y":14},{"x":5,"series":"y","y":2},{"x":6,"series":"y","y":10},{"x":7,"series":"y","y":7},{"x":8,"series":"y","y":9}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}}],"width":400,"height":100,"marks":[{"from":{"data":"chart"},"properties":{"enter":{"fill":{"field":"series","scale":"color"},"y2":{"value":0,"scale":"y"},"x":{"field":"x","scale":"x"},"y":{"field":"y","scale":"y"}},"update":{"fill":{"field":"series","scale":"color"}},"hover":{"fill":{"value":"red"}}},"type":"area"}],"scales":[{"range":"width","nice":true,"zero":false,"domain":{"field":"x","data":"chart"},"name":"x","type":"linear"},{"range":"height","nice":true,"zero":true,"domain":{"field":"y","data":"chart"},"name":"y","type":"linear"},{"range":"category10","name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}}],"version":2,"legends":[]}</graph>
Note: The y-axis starts from zero

Bar chart:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}
<graph>{"axes":[{"format":"d","title":"X","type":"x","scale":"x"},{"format":"d","title":"Y","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"y","y":10},{"x":2,"series":"y","y":12},{"x":3,"series":"y","y":6},{"x":4,"series":"y","y":14},{"x":5,"series":"y","y":2},{"x":6,"series":"y","y":10},{"x":7,"series":"y","y":7},{"x":8,"series":"y","y":9}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}}],"width":400,"height":100,"marks":[{"from":{"data":"chart"},"properties":{"enter":{"fill":{"field":"series","scale":"color"},"width":{"band":true,"offset":-1,"scale":"x"},"y2":{"value":0,"scale":"y"},"x":{"field":"x","scale":"x"},"y":{"field":"y","scale":"y"}},"update":{"fill":{"field":"series","scale":"color"}},"hover":{"fill":{"value":"red"}}},"type":"rect"}],"scales":[{"range":"width","nice":true,"padding":0.2,"domain":{"field":"x","data":"chart"},"name":"x","zero":false,"type":"ordinal"},{"range":"height","nice":true,"zero":true,"domain":{"field":"y","data":"chart"},"name":"y","type":"linear"},{"range":"category10","name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}}],"version":2,"legends":[]}</graph>

Line chart with more than one data series, using colors:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=line|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}
<graph>{"axes":[{"format":"d","title":"X","type":"x","scale":"x"},{"format":"d","title":"Y","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"y1","y":10},{"x":2,"series":"y1","y":12},{"x":3,"series":"y1","y":6},{"x":4,"series":"y1","y":14},{"x":5,"series":"y1","y":2},{"x":6,"series":"y1","y":10},{"x":7,"series":"y1","y":7},{"x":8,"series":"y1","y":9},{"x":1,"series":"y2","y":2},{"x":2,"series":"y2","y":4},{"x":3,"series":"y2","y":6},{"x":4,"series":"y2","y":8},{"x":5,"series":"y2","y":13},{"x":6,"series":"y2","y":11},{"x":7,"series":"y2","y":9},{"x":8,"series":"y2","y":2}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}}],"width":400,"height":100,"marks":[{"from":{"transform":[{"type":"facet","groupby":["series"]}],"data":"chart"},"marks":[{"type":"line","properties":{"enter":{"strokeWidth":{"value":2.5},"stroke":{"field":"series","scale":"color"},"x":{"field":"x","scale":"x"},"y":{"field":"y","scale":"y"}},"update":{"stroke":{"field":"series","scale":"color"}},"hover":{"stroke":{"value":"red"}}}}],"type":"group"}],"scales":[{"range":"width","nice":true,"zero":false,"domain":{"field":"x","data":"chart"},"name":"x","type":"linear"},{"range":"height","nice":true,"zero":false,"domain":{"field":"y","data":"chart"},"name":"y","type":"linear"},{"range":["#0000aa","#ff8000"],"name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}}],"version":2,"legends":[{"fill":"color","title":"Legend","stroke":"color"}]}</graph>

Area chart with more than one data series showing blended overlap:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
<graph>{"axes":[{"format":"d","title":"X","type":"x","scale":"x"},{"format":"d","title":"Y","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"y1","y":10},{"x":2,"series":"y1","y":12},{"x":3,"series":"y1","y":6},{"x":4,"series":"y1","y":14},{"x":5,"series":"y1","y":2},{"x":6,"series":"y1","y":10},{"x":7,"series":"y1","y":7},{"x":8,"series":"y1","y":9},{"x":1,"series":"y2","y":2},{"x":2,"series":"y2","y":4},{"x":3,"series":"y2","y":6},{"x":4,"series":"y2","y":8},{"x":5,"series":"y2","y":13},{"x":6,"series":"y2","y":11},{"x":7,"series":"y2","y":9},{"x":8,"series":"y2","y":2}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}}],"width":400,"height":100,"marks":[{"from":{"transform":[{"type":"facet","groupby":["series"]}],"data":"chart"},"marks":[{"type":"area","properties":{"enter":{"fill":{"field":"series","scale":"color"},"y2":{"value":0,"scale":"y"},"x":{"field":"x","scale":"x"},"y":{"field":"y","scale":"y"}},"update":{"fill":{"field":"series","scale":"color"},"fillOpacity":{"field":"series","scale":"transparency"}},"hover":{"fill":{"value":"red"}}}}],"type":"group"}],"scales":[{"range":"width","nice":true,"zero":false,"domain":{"field":"x","data":"chart"},"name":"x","type":"linear"},{"range":"height","nice":true,"zero":true,"domain":{"field":"y","data":"chart"},"name":"y","type":"linear"},{"range":["#0000aa","#ff8000"],"name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}},{"range":["0.50196078431373","0.50196078431373"],"name":"transparency","type":"ordinal"}],"version":2,"legends":[{"fill":"color","title":"Legend","stroke":"color"}]}</graph>

Bar chart with multiple data series:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=rect|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
<graph>{"axes":[{"format":"d","title":"X","type":"x","scale":"x"},{"format":"d","title":"Y","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"y1","y":10},{"x":2,"series":"y1","y":12},{"x":3,"series":"y1","y":6},{"x":4,"series":"y1","y":14},{"x":5,"series":"y1","y":2},{"x":6,"series":"y1","y":10},{"x":7,"series":"y1","y":7},{"x":8,"series":"y1","y":9},{"x":1,"series":"y2","y":2},{"x":2,"series":"y2","y":4},{"x":3,"series":"y2","y":6},{"x":4,"series":"y2","y":8},{"x":5,"series":"y2","y":13},{"x":6,"series":"y2","y":11},{"x":7,"series":"y2","y":9},{"x":8,"series":"y2","y":2}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}}],"width":400,"height":100,"marks":[{"scales":[{"range":"width","name":"series","type":"ordinal","domain":{"field":"series"}}],"marks":[{"type":"rect","properties":{"enter":{"fill":{"field":"series","scale":"color"},"width":{"band":true,"offset":-1,"scale":"series"},"y2":{"value":0,"scale":"y"},"x":{"field":"series","scale":"series"},"y":{"field":"y","scale":"y"}},"update":{"fill":{"field":"series","scale":"color"},"fillOpacity":{"field":"series","scale":"transparency"}},"hover":{"fill":{"value":"red"}}}}],"properties":{"enter":{"x":{"field":"key","scale":"x"},"width":{"band":true,"scale":"x"}}},"from":{"transform":[{"type":"facet","groupby":"x"}],"data":"chart"},"type":"group"}],"scales":[{"range":"width","nice":true,"padding":0.2,"domain":{"field":"x","data":"chart"},"name":"x","zero":false,"type":"ordinal"},{"range":"height","nice":true,"zero":true,"domain":{"field":"y","data":"chart"},"name":"y","type":"linear"},{"range":["#0000aa","#ff8000"],"name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}},{"range":["0.50196078431373","0.50196078431373"],"name":"transparency","type":"ordinal"}],"version":2,"legends":[{"fill":"color","title":"Legend","stroke":"color"}]}</graph>

Area chart with smoothed data values:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedarea|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}
<graph>{"axes":[{"format":"d","title":"X","type":"x","scale":"x"},{"format":"d","title":"Y","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"y1","y":10},{"x":2,"series":"y1","y":12},{"x":3,"series":"y1","y":6},{"x":4,"series":"y1","y":14},{"x":5,"series":"y1","y":2},{"x":6,"series":"y1","y":10},{"x":7,"series":"y1","y":7},{"x":8,"series":"y1","y":9},{"x":1,"series":"y2","y":2},{"x":2,"series":"y2","y":4},{"x":3,"series":"y2","y":6},{"x":4,"series":"y2","y":8},{"x":5,"series":"y2","y":13},{"x":6,"series":"y2","y":11},{"x":7,"series":"y2","y":9},{"x":8,"series":"y2","y":2}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}},{"source":"chart","name":"stats","transform":[{"groupby":["x"],"summarize":{"y":"sum"},"type":"aggregate"}]}],"width":400,"height":100,"marks":[{"from":{"transform":[{"groupby":["x"],"sortby":["series"],"type":"stack","field":"y"},{"type":"facet","groupby":["series"]}],"data":"chart"},"marks":[{"type":"area","properties":{"enter":{"fill":{"field":"series","scale":"color"},"x":{"field":"x","scale":"x"},"y2":{"field":"layout_end","scale":"y"},"interpolate":{"value":"monotone"},"y":{"field":"layout_start","scale":"y"}},"update":{"fill":{"field":"series","scale":"color"}},"hover":{"fill":{"value":"red"}}}}],"type":"group"}],"scales":[{"range":"width","nice":true,"zero":false,"domain":{"field":"x","data":"chart"},"name":"x","type":"linear"},{"range":"height","nice":true,"zero":true,"domain":{"field":"sum_y","data":"stats"},"name":"y","type":"linear"},{"range":["seagreen","orchid"],"name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}}],"version":2,"legends":[{"fill":"color","title":"Legend","stroke":"color"}]}</graph>

Bar chart with stacked data series:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|y1Title=Data A|y2Title=Data B|colors=seagreen, orchid}}
<graph>{"axes":[{"format":"d","title":"X","type":"x","scale":"x"},{"format":"d","title":"Y","type":"y","scale":"y"}],"data":[{"values":[{"x":1,"series":"Data A","y":10},{"x":2,"series":"Data A","y":12},{"x":3,"series":"Data A","y":6},{"x":4,"series":"Data A","y":14},{"x":5,"series":"Data A","y":2},{"x":6,"series":"Data A","y":10},{"x":7,"series":"Data A","y":7},{"x":8,"series":"Data A","y":9},{"x":1,"series":"Data B","y":2},{"x":2,"series":"Data B","y":4},{"x":3,"series":"Data B","y":6},{"x":4,"series":"Data B","y":8},{"x":5,"series":"Data B","y":13},{"x":6,"series":"Data B","y":11},{"x":7,"series":"Data B","y":9},{"x":8,"series":"Data B","y":2}],"name":"chart","format":{"type":"json","parse":{"x":"integer","y":"integer"}}},{"source":"chart","name":"stats","transform":[{"groupby":["x"],"summarize":{"y":"sum"},"type":"aggregate"}]}],"width":400,"height":100,"marks":[{"from":{"transform":[{"groupby":["x"],"sortby":["series"],"type":"stack","field":"y"},{"type":"facet","groupby":["series"]}],"data":"chart"},"marks":[{"type":"rect","properties":{"enter":{"fill":{"field":"series","scale":"color"},"width":{"band":true,"offset":-1,"scale":"x"},"y2":{"field":"layout_end","scale":"y"},"x":{"field":"x","scale":"x"},"y":{"field":"layout_start","scale":"y"}},"update":{"fill":{"field":"series","scale":"color"}},"hover":{"fill":{"value":"red"}}}}],"type":"group"}],"scales":[{"range":"width","nice":true,"zero":false,"domain":{"field":"x","data":"chart"},"name":"x","type":"ordinal"},{"range":"height","nice":true,"zero":true,"domain":{"field":"sum_y","data":"stats"},"name":"y","type":"linear"},{"range":["seagreen","orchid"],"name":"color","type":"ordinal","domain":{"field":"series","data":"chart"}}],"version":2,"legends":[{"fill":"color","title":"Legend","stroke":"color"}]}</graph>

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
<graph>{"axes":[],"data":[{"values":[{"x":"A","y":100},{"x":"B","y":200},{"x":"C","y":150},{"x":"D","y":300},{"x":"E","y":100},{"x":"F","y":100},{"x":"G","y":150},{"x":"H","y":50},{"x":"I","y":200}],"name":"chart","format":{"type":"json","parse":{"x":"string","y":"integer"}}}],"width":100,"height":100,"marks":[{"from":{"transform":[{"field":"y","type":"pie"}],"data":"chart"},"properties":{"enter":{"fill":{"field":"x","scale":"color"},"strokeWidth":{"value":1},"stroke":{"value":"white"},"startAngle":{"field":"layout_start"},"innerRadius":{"value":0},"outerRadius":{"value":100},"endAngle":{"field":"layout_end"}},"update":{"fill":{"field":"x","scale":"color"}},"hover":{"fill":{"value":"red"}}},"type":"arc"}],"scales":[{"range":"category10","name":"color","type":"ordinal","domain":{"field":"x","data":"chart"}}],"version":2,"legends":[{"fill":"color","title":"Legende","stroke":"color","properties":{"legend":{"y":{"value":-100}}}}]}</graph>

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}
<graph>{"axes":[],"data":[{"values":[{"x":"A","y":100},{"x":"B","y":200},{"x":"C","y":150},{"x":"D","y":300},{"x":"E","y":100},{"x":"F","y":100},{"x":"G","y":150},{"x":"H","y":50},{"x":"I","y":200}],"name":"chart","format":{"type":"json","parse":{"x":"string","y":"integer"}}}],"width":100,"height":100,"marks":[{"from":{"transform":[{"field":"y","type":"pie"}],"data":"chart"},"properties":{"enter":{"fill":{"field":"x","scale":"color"},"strokeWidth":{"value":1},"stroke":{"value":"white"},"startAngle":{"field":"layout_start"},"innerRadius":{"value":0},"outerRadius":{"value":100},"endAngle":{"field":"layout_end"}},"update":{"fill":{"field":"x","scale":"color"}},"hover":{"fill":{"value":"red"}}},"type":"arc"},{"from":{"transform":[{"type":"pie","field":"y"}],"data":"chart"},"properties":{"enter":{"fontSize":{"value":10},"angle":{"field":"layout_mid","mult":57.295779513082},"radius":{"value":100,"offset":-4},"fill":{"value":"white"},"x":{"mult":0.5,"group":"width"},"y":{"mult":0.5,"group":"height"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"theta":{"field":"layout_mid"}}},"type":"text"}],"scales":[{"range":"category10","name":"color","type":"ordinal","domain":{"field":"x","data":"chart"}}],"version":2,"legends":[{"fill":"color","title":"Legende","stroke":"color","properties":{"legend":{"y":{"value":-100}}}}]}</graph>

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|y2=7,8,9,8,8,9,10,9,5|showValues=}}
<graph>{"axes":[],"data":[{"values":[{"r":7,"x":"A","y":100},{"r":8,"x":"B","y":200},{"r":9,"x":"C","y":150},{"r":8,"x":"D","y":300},{"r":8,"x":"E","y":100},{"r":9,"x":"F","y":100},{"r":10,"x":"G","y":150},{"r":9,"x":"H","y":50},{"r":5,"x":"I","y":200}],"name":"chart","format":{"type":"json","parse":{"r":"integer","x":"string","y":"integer"}}}],"width":100,"height":100,"marks":[{"from":{"transform":[{"field":"y","type":"pie"}],"data":"chart"},"properties":{"enter":{"fill":{"field":"x","scale":"color"},"strokeWidth":{"value":1},"stroke":{"value":"white"},"startAngle":{"field":"layout_start"},"innerRadius":{"value":0},"outerRadius":{"field":"r","scale":"r"},"endAngle":{"field":"layout_end"}},"update":{"fill":{"field":"x","scale":"color"}},"hover":{"fill":{"value":"red"}}},"type":"arc"},{"from":{"transform":[{"type":"pie","field":"y"}],"data":"chart"},"properties":{"enter":{"fontSize":{"value":10},"angle":{"field":"layout_mid","mult":57.295779513082},"radius":{"field":"r","offset":-4,"scale":"r"},"fill":{"value":"white"},"x":{"mult":0.5,"group":"width"},"y":{"mult":0.5,"group":"height"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"theta":{"field":"layout_mid"}}},"type":"text"}],"scales":[{"range":"category10","name":"color","type":"ordinal","domain":{"field":"x","data":"chart"}},{"domain":{"field":"r","data":"chart"},"name":"r","type":"linear","range":[0,100]}],"version":2,"legends":[{"fill":"color","title":"Legende","stroke":"color","properties":{"legend":{"y":{"value":-100}}}}]}</graph>

{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
<graph>{"axes":[],"data":[{"values":[{"x":"A","y":100},{"x":"B","y":200},{"x":"C","y":150},{"x":"D","y":300},{"x":"E","y":100},{"x":"F","y":100},{"x":"G","y":150},{"x":"H","y":50},{"x":"I","y":200}],"name":"chart","format":{"type":"json","parse":{"x":"string","y":"integer"}}}],"width":100,"height":100,"marks":[{"from":{"transform":[{"field":"y","type":"pie"}],"data":"chart"},"properties":{"enter":{"fill":{"field":"x","scale":"color"},"strokeWidth":{"value":1},"stroke":{"value":"white"},"startAngle":{"field":"layout_start"},"innerRadius":{"value":40},"outerRadius":{"value":100},"endAngle":{"field":"layout_end"}},"update":{"fill":{"field":"x","scale":"color"}},"hover":{"fill":{"value":"red"}}},"type":"arc"}],"scales":[{"range":"category10","name":"color","type":"ordinal","domain":{"field":"x","data":"chart"}}],"version":2,"legends":[{"fill":"color","title":"Legende","stroke":"color","properties":{"legend":{"y":{"value":-100}}}}]}</graph>

Во избежание поломок страниц, использующих данный шаблон, желательно экспериментировать в своём личном пространстве.