十分钟学会数据滚动可视化大屏，JS基础，新手也能轻松搞定！

2023-03-08 22:34:32

使用 JS 代码构建交互式数据滚动可视化大屏：分步指南

概述

在当今数据驱动的世界中，能够有效地可视化和呈现数据至关重要。数据滚动可视化大屏提供了一种引人入胜的方式，可以实时展示动态数据，并允许用户与数据交互。在本教程中，我们将深入探讨如何使用 JavaScript (JS) 代码构建一个交互式数据滚动可视化大屏，让你可以将你的数据转化为生动且有影响力的可视化效果。

准备工作

在开始构建大屏之前，你需要准备好以下内容：

掌握基本的 JS 语法以及 HTML/CSS 知识
准备好要展示的数据，以 JSON 格式或其他可解析的格式
选择你喜欢的代码编辑器或 IDE
设置一个 Web 服务器或本地开发环境

分步指南

现在，让我们一步一步地构建我们的数据滚动可视化大屏：

创建 HTML 文件并包含必要代码

创建一个 HTML 文件，并添加以下代码：

<html>
  <head>
    
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #myCanvas {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script src="script.js"></script>
  </body>
</html>

在 HTML 中添加 <canvas> 元素

<canvas> 元素将充当绘制数据的画布：

<canvas id="myCanvas"></canvas>

获取数据并初始化绘图上下文

使用 JS 获取要展示的数据，然后初始化一个绘图上下文：

// 获取数据
const data = ...

// 初始化绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

将数据转换为可视化图形

将数据转换为可视化图形，例如条形图或折线图：

const bars = data.map(d => {
  return {
    x: d.name,
    y: d.value,
    width: 50,
    height: d.value * 10
  };
});

绘制图形

使用绘图上下文绘制可视化图形：

bars.forEach(bar => {
  ctx.fillStyle = 'blue';
  ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
});

实现数据自动滚动

通过定期更新绘图上下文的平移，实现数据自动滚动：

setInterval(() => {
  // 更新平移
  ctx.translate(-scrollSpeed, 0);

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 重新绘制图形
  bars.forEach(bar => {
    ctx.fillStyle = 'blue';
    ctx.fillRect(bar.x + scrollPosition, bar.y, bar.width, bar.height);
  });
}, 100);

实现光标控制暂停/继续滚动

使用光标控制暂停或继续滚动：

canvas.addEventListener('mousemove', e => {
  if (e.clientY < canvas.height / 2) {
    scrollSpeed = 0;
  } else {
    scrollSpeed = 1;
  }
});

示例代码

完整的示例代码如下：

<html>
  <head>
    
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #myCanvas {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      // 获取数据
      const data = [
        {
          name: 'A',
          value: 10
        },
        {
          name: 'B',
          value: 20
        },
        {
          name: 'C',
          value: 30
        }
      ];

      // 初始化绘图上下文
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      // 将数据转换为可视化图形
      const bars = data.map(d => {
        return {
          x: d.name,
          y: d.value,
          width: 50,
          height: d.value * 10
        };
      });

      // 绘制图形
      bars.forEach(bar => {
        ctx.fillStyle = 'blue';
        ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
      });

      // 实现数据自动滚动
      let scrollSpeed = 1;
      let scrollPosition = 0;

      setInterval(() => {
        scrollPosition += scrollSpeed;
        ctx.translate(-scrollSpeed, 0);

        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 重新绘制图形
        bars.forEach(bar => {
          ctx.fillStyle = 'blue';
          ctx.fillRect(bar.x + scrollPosition, bar.y, bar.width, bar.height);
        });

        // 判断是否需要重置滚动位置
        if (scrollPosition > canvas.width) {
          scrollPosition = 0;
        }
      }, 100);

      // 实现光标控制暂停/继续滚动
      canvas.addEventListener('mousemove', e => {
        if (e.clientY < canvas.height / 2) {
          scrollSpeed = 0;
        } else {
          scrollSpeed = 1;
        }
      });
    </script>
  </body>
</html>