vis.js工具提示3d圖形

DogLeftover發表於2024-04-24
JS3D
  • 程式碼案例
<!DOCTYPE html>
<html>
  <head>
    <title>Graph 3D demo</title>
    <style>
        body {
          font: 10pt arial;
        }
        div#info {
          width: 600px;
          text-align: center;
          margin-top: 2em;
          font-size: 1.2em;
        }

    </style>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script type="text/javascript">
        var data = null;
        var graph = null;

        function custom(x, y) {
          return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
          var style = document.getElementById("style").value;
          var withValue =
            ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;

          // Create and populate a data table.
          data = new vis.DataSet();
          var extra_content = [
            "Arbitrary information",
            "You can access data from the point source object",
            "Tooltip example content",
          ];

          // create some nice looking data with sin/cos
          var steps = 5; // number of datapoints will be steps*steps
          var axisMax = 10;
          var axisStep = axisMax / steps;
          for (var x = 0; x <= axisMax; x += axisStep) {
            for (var y = 0; y <= axisMax; y += axisStep) {
              var z = custom(x, y);
              if (withValue) {
                var value = y - x;
                data.add({
                  x: x,
                  y: y,
                  z: z,
                  style: value,
                  extra: extra_content[(x * y) % extra_content.length],
                });
              } else {
                data.add({
                  x: x,
                  y: y,
                  z: z,
                  extra: extra_content[(x * y) % extra_content.length],
                });
              }
            }
          }

          // specify options
          var options = {
            width: "600px",
            height: "600px",
            style: style,
            showPerspective: true,
            showLegend: true,
            showGrid: true,
            showShadow: false,

            // Option tooltip can be true, false, or a function returning a string with HTML contents
            tooltip: function (point) {
              // parameter point contains properties x, y, z, and data
              // data is the original object passed to the point constructor
              return "value: <b>" + point.z + "</b><br>" + point.data.extra;
            },

            // Tooltip default styling can be overridden
            tooltipStyle: {
              content: {
                background: "rgba(255, 255, 255, 0.7)",
                padding: "10px",
                borderRadius: "10px",
              },
              line: {
                borderLeft: "1px dotted rgba(0, 0, 0, 0.5)",
              },
              dot: {
                border: "5px solid rgba(0, 0, 0, 0.5)",
              },
            },

            keepAspectRatio: true,
            verticalRatio: 0.5,
          };

          var camera = graph ? graph.getCameraPosition() : null;

          // create our graph
          var container = document.getElementById("mygraph");
          graph = new vis.Graph3d(container, data, options);

          if (camera) graph.setCameraPosition(camera); // restore camera position

          document.getElementById("style").onchange = drawVisualization;
        }

        window.addEventListener("load", () => {
          drawVisualization();
        });

    </script>
  </head>
  <body onload="drawVisualization();">        
    <p>
      <label for="style">
        Style:
        <select id="style">
          <option value="bar">bar</option>
          <option value="bar-color">bar-color</option>
          <option value="bar-size">bar-size</option>
    
          <option value="dot">dot</option>
          <option value="dot-line">dot-line</option>
          <option value="dot-color">dot-color</option>
          <option value="dot-size">dot-size</option>
    
          <option value="grid">grid</option>
          <option value="line">line</option>
          <option value="surface">surface</option>
        </select>
      </label>
    </p>
    
    <div id="mygraph"></div>
                     
  </body>
</html>
  • 效果圖
點選檢視詳情

相關文章