Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
626 views
in Technique[技术] by (71.8m points)

charts - Embedded Vega is missing tooltips

I have the following JSFiddle, demonstrating a small Vega Bar chart:

<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>

If you copy the vega object into Vega Editor you get a tooltip when hovering over the chart elements. Within the JSFiddle there is no tooltip.

Could someone please help me get a tooltip in the HTML-embedded version?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I have been able to get the full functionality through using vega-embed with versions listed below:

<!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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...