JSON工具提示本身功能正常,但嵌入webiste后工具提示消失

ee7vknir  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(109)

是因为图表悬停需要声明一些东西吗?
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);
g2ieeal7

g2ieeal71#

您是否正在使用工具提示插件?
https://vega.github.io/vega-lite/docs/tooltip.html#plugin

相关问题