是因为图表悬停需要声明一些东西吗?
JSON工具提示工作。下面我复制了我的json。json功能正确与vega-lite的工具提示,但任何JSON工具提示图表将不会显示工具提示时,嵌入在网站上。
如果需要,我可以发送HTML。
JSON格式:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "United Kingdom",
"subtitle": ["x", ""],
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "rgba(58, 59, 60)"
},
"config": {"background": "white", "view": {"stroke": "transparent"}},
"width": 300,
"height": 450,
"data": {
"url": "x",
"format": {"property": "features"}
},
"projection": {"type": "mercator"},
"mark": {
"type": "geoshape",
"color": "rgb(210, 210, 210)",
"stroke": "white",
"strokeWidth": 0.5
},
"encoding": {"tooltip": {"field": "properties.x"}}
}
CSS:
.myW7{
background-color: rgb(248,248,248);
}
.chart{
background-color: #fff;
padding-left: 35px;
padding-top: 6px;
border-radius: 5px;
margin: 1%;
}
.chart:hover{
transition: 0.3s;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
于飞:
<script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>
<div class="myW7">
<div class="chart" id="Chart17"></div>
</div>
var myChart17 = "chart17_ukEmptyRegionMap.json";
vegaEmbed('#Chart17', myChart17);
1条答案
按热度按时间g2ieeal71#
您是否正在使用工具提示插件?
https://vega.github.io/vega-lite/docs/tooltip.html#plugin