lang/js

Chat Of vega-lite

C/H 2021. 10. 21. 03:10

vega-lite-api

 

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>f 
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-tooltip@latest"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      const handler = new vegaTooltip.Handler()
      const yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
        description: 'A simple bar chart with embedded data.',
        data: {
          values: [
            { a: 'A', b: 28 },
            { a: 'B', b: 55 },
            { a: 'C', b: 43 },
            { a: 'D', b: 91 },
            { a: 'E', b: 81 },
            { a: 'F', b: 53 },
            { a: 'G', b: 19 },
            { a: 'H', b: 87 },
            { a: 'I', b: 52 },
          ],
        },
        mark: 'bar',
        encoding: {
          x: { field: 'a', type: 'ordinal' },
          y: { field: 'b', type: 'quantitative' },
        },
      }
      vegaEmbed('#vis', yourVlSpec, {
        tooltip: handler.call,
        mode: 'vega-lite',
        config: {
          mark: {
            tooltip: true,
          },
        },
      })
    </script>
  </body>
</html>

 

반응형