Question

我有以下 JSFiddle，展示了一个小的 Vega 条形图：

<head>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
</head>

<body>
  <div id="view"></div>
  <script type="text/javascript">
    var view;

    var chart = { Vega code removed for brevity - please check JSFiddle}

    render(chart);
    
    function render(spec) {
      view = new vega.View(vega.parse(spec), {
        renderer:  'canvas',  // renderer (canvas or svg)
        container: '#view',   // parent DOM container
        hover:     true       // enable hover processing
      });
      return view.runAsync();
    }
    
    
  </script>
</body>

如果您将 vega 对象复制到 Vega Editor 中，您会在将鼠标悬停在图表元素上时获得一个工具提示。在 JSFiddle 中，没有工具提示。

有人可以帮我获取 HTML 嵌入版本中的工具提示吗？

Answer 1

通过将 vega-embed 与下面列出的版本一起使用，我已经能够获得全部功能：

<!DOCTYPE html>
<html>
<head>
  <script src="vega-5.17.3.min.js"></script>
  <script src="vega-lite-4.17.0.min.js"></script>
  <script src="vega-embed-6.15.0.min.js"></script>
</head>
<body>

<div id="vis"></div>

<script type="text/javascript">
    var spec = { Vega code removed for brevity - please check JSFiddle}
 vegaEmbed('#vis', spec).then(function(result) {
  }).catch(console.error);
</script>
</body>
</html>

嵌入式 Vega 缺少工具提示

1 个答案: