又是美好的一天, 熟悉power bi 或者在日常工作有应用过该工具的小伙伴应该都遇到过以下场景，业务用户不知道从哪里搞来一张图对你说想要一样的效果, 你看了眼图片长这个样子.
这是一个在其他BI工具里很常见的渐变色柱形图, 但是要在power bi 中实现同样效果是很困难的,因为power bi 的颜色设置不支持单一渐变处理.
你看着业务说工具好像不支持做这样的效果,要不我给你个其他的展示形式吧? 比如说我只能实现以下效果
业务白了你一样说你这什么东西啊! 我不管我只要我这个样子的图,你自己想办法解决.
就这样你在心里疯狂问候业务可还是要想办法实现, 你想起老师傅曾说过如果工具现有的没办法满足你得需求,那么你就要想能不能用工具去创造自己想要的东西. 如果power bi目前的可视化功能不支持,那么可以选择自定义可视化插件啊!
说干就干.
这是一个提供其他开发者自制的可视化插件社区, 你可以通过这些插件去定制原工具不支持的图表效果, 由于插件众多你也不知道具体哪个可以实现同样效果,所以你索性想通过代码自己实现.
求人不如求自己, 不会前端代码的BI开发不是好的分析师 !
已知可以自行编写代码的可视化插件有以下几个, 分别是支持HTML的, 支持D3.js的, 支持echarts的 和 支持vega的插件
你想起自己还了解些Vega语法,再经过一些百度大法,你终于实现了业务口中想要的一模一样的效果
为了让大家夸你,你决定把实现代码也贴出来
{ "$schema": "vega.github.io/schema/vega…", "background": "#100c2a", "description": "A basic bar chart example.", "width": 200, "height": 100, "padding": 5,
"data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, {"category": "D", "amount": 91}, {"category": "E", "amount": 81}, {"category": "F", "amount": 53}, {"category": "G", "amount": 19}, {"category": "H", "amount": 87} ] } ],
"signals": [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] } ],
"scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05, "round": true }, { "name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ],
"axes": [ {"orient": "bottom", "labelColor": "grey", "scale": "xscale"}, {"orient": "left", "labelColor": "grey", "grid": true, "gridColor": "lightgrey", "gridOpacity": 0.2, "scale": "yscale"} ],
"marks": [ { "type": "rect", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category", "offset": {"scale": "xscale", "band": 0.25} }, "width": {"scale": "xscale", "band": 0.5}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0} }, "update": { "fill": {"value":{ "gradient": "linear", "stops": [ {"offset": 0, "color": "rgb(125,189,246)"}, {"offset": 1, "color": "rgb(24,141,240)"} ], "x1": 0, "y1": 0, "x2": 0, "y2": 1 }
}
},
"hover": {
"fill": {"value": "rgb(35,120,247)"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "grey"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
] }
关注队长, 学习更多power bi 小知识~
