admin管理员组文章数量:1438350
Power BI Vega 条形纵向折线组合图表
条形图和纵向折线图组合常用来展示绝对值和率值的组合。之前在知识星球分享过SVG的版本（使用内置表格加载），今天换一种实现方式，使用Deneb视觉对象：
把需要展示的维度和指标拖拽到Deneb，本例维度为城市，绝对值为[kpi]度量值，率值为[kpi2]度量值：
点击视觉对象边上的...，选择编辑，空白vega-lite，粘贴以下代码：
{
"data": {
"name": "dataset"
},
"layer": [
{
"mark": {
"type": "bar",
"opacity": 0.3,
"tooltip": true,
"cornerRadius": 8,
"cornerRadiusEnd": 8,
"color": {
"gradient": "linear",
"stops": [
{"offset": 0, "color": "#f0f0f0"},
{"offset": 1, "color": "#e0e0e0"}
]
},
"size": 12
},
"encoding": {
"x": {
"field": "KPI",
"type": "quantitative",
"scale": {
"nice": true
},
"axis": null
}
}
},
{
"mark": {
"type": "bar",
"tooltip": true,
"cornerRadius": 8,
"cornerRadiusEnd": 8,
"color": {
"gradient": "linear",
"stops": [
{"offset": 0, "color": "#9C27B0"},
{"offset": 1, "color": "#673AB7"}
]
},
"size": 25
},
"encoding": {
"x": {
"field": "KPI__highlight",
"type": "quantitative",
"axis": null
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0
},
"value": 1
}
}
},
{
"mark": {
"type": "line",
"tooltip": true,
"color": "#9E9E9E",
"strokeWidth": 2,
"strokeDash": [6, 4]
},
"encoding": {
"x": {
"field": "KPI2",
"type": "quantitative",
"scale": {
"nice": true
},
"axis": null
}
}
},
{
"mark": {
"type": "line",
"tooltip": true,
"color": "#FF9800",
"strokeWidth": 3
},
"encoding": {
"x": {
"field": "KPI2__highlight",
"type": "quantitative",
"axis": null
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0
},
"value": 1
}
}
},
{
"mark": {
"type": "point",
"tooltip": true,
"color": "#FF5722",
"size": 120,
"filled": true,
"stroke": "#FFFFFF",
"strokeWidth": 2
},
"encoding": {
"x": {
"field": "KPI2__highlight",
"type": "quantitative",
"axis": null
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0
},
"value": 1
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 10,
"color": "#3F51B5",
"fontSize": 16,
"font": "Segoe UI",
"fontWeight": "bold",
"fontStyle": "italic"
},
"encoding": {
"x": {
"field": "KPI__highlight",
"type": "quantitative",
"axis": null
},
"text": {
"field": "KPI__highlight",
"format": ".0f"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0
},
"value": 1
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 10,
"dy": -18,
"color": "#FF9800",
"fontSize": 16,
"font": "Segoe UI",
"fontWeight": "bold"
},
"encoding": {
"x": {
"field": "KPI2__highlight",
"type": "quantitative",
"axis": null
},
"text": {
"field": "KPI2__highlight",
"format": ".1%"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0
},
"value": 1
}
}
}
],
"encoding": {
"y": {
"field": "城市",
"type": "nominal",
"axis": {
"title": null,
"domain": false,
"ticks": false,
"labelFontSize": 16,
"labelFont": "Segoe UI",
"labelFontWeight": "bold",
"labelColor": "#424242",
"grid": false
},
"sort": {
"field": "KPI__highlight",
"order": "descending"
}
}
},
"resolve": {
"scale": {
"x": "independent"
}
},
"config": {
"axis": {
"grid": false,
"domain": false
},
"view": {
"stroke": "transparent"
},
"background": "#FAFAFA",
"font": "Segoe UI",
"title": {
"fontSize": 20,
"fontWeight": "bold",
"color": "#512DA8",
"font": "Segoe UI"
}
}
}点击三角形的应用按钮，即完工。样式可以按需修改，以下换了一个朴素的版本：
本文标签： Power BI Vega 条形纵向折线组合图表
版权声明：本文标题：Power BI Vega 条形纵向折线组合图表 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1747574511a2713716.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论