CandyGraph 开源项目教程

CandyGraph 开源项目教程

candygraph Fast by default, flexible 2D plotting library. 项目地址: https://gitcode.com/gh_mirrors/ca/candygraph

1. 项目介绍

CandyGraph 是一个灵活且默认高效的 2D 绘图库，专为在 GPU 上以交互式速度渲染大型数据集而优化。它采用了 D3 的优雅比例概念，但在 GPU 上实现，以最大化数据吞吐量并在无额外成本的情况下处理比例变化。CandyGraph 在 GPU 上执行所有渲染工作，包括坐标轴和文本，这使得渲染和合成快速且简单。

2. 项目快速启动

首先，你需要安装 Node.js 环境来运行 CandyGraph。以下是如何快速启动并运行一个简单的 CandyGraph 示例的步骤：

// 引入 CandyGraph 相关模块
import CandyGraph, {
  createDefaultFont,
  LinearScale,
  OpaqueLineStrip,
  OrthoAxis,
  CartesianCoordinateSystem
} from 'candygraph';

// 主函数
async function main() {
  // 创建一个新的 CandyGraph 实例
  const cg = new CandyGraph();
  cg.canvas.width = cg.canvas.height = 384;

  // 生成一些 x 和 y 数据
  const xs = [];
  const ys = [];
  for (let x = 0; x <= 1; x += 0.001) {
    xs.push(x);
    ys.push(0.5 + 0.25 * Math.sin(x * 2 * Math.PI));
  }

  // 创建一个视口
  const viewport = {
    x: 0,
    y: 0,
    width: cg.canvas.width,
    height: cg.canvas.height
  };

  // 创建一个坐标系统
  const coords = new CartesianCoordinateSystem(
    cg,
    new LinearScale([0, 1], [32, viewport.width - 16]),
    new LinearScale([0, 1], [32, viewport.height - 16])
  );

  // 加载默认字体
  const font = await createDefaultFont(cg);

  // 清空视口
  cg.clear([1, 1, 1, 1]);

  // 渲染线段和数据轴
  cg.render(coords, viewport, [
    new OpaqueLineStrip(cg, xs, ys, { colors: [1, 0.5, 0.0], widths: 3 }),
    new OrthoAxis(cg, coords, "x", font, {
      labelSide: 1,
      tickOffset: -2.5,
      tickLength: 6,
      tickStep: 0.2,
      labelFormatter: (n) => n.toFixed(1)
    }),
    new OrthoAxis(cg, coords, "y", font, {
      tickOffset: 2.5,
      tickLength: 6,
      tickStep: 0.2,
      labelFormatter: (n) => n.toFixed(1)
    })
  ]);

  // 将绘图复制到新画布并添加到文档中
  document.body.appendChild(cg.copyTo(viewport));
}

main();

确保你的项目中有 CandyGraph 的依赖，你可以通过 npm 来安装它：

npm install candygraph

3. 应用案例和最佳实践

在开发数据可视化应用时，最佳实践是先定义你的数据集，然后根据数据集创建适当的比例和坐标轴。使用 CandyGraph，你可以轻松地实现复杂的数据可视化任务，例如绘制实时更新的图表或交互式数据探索工具。

以下是一个应用案例：

• 实时数据监控：创建一个动态更新的图表，显示实时数据流，如股票价格或传感器数据。

4. 典型生态项目

CandyGraph 可以与多种前端技术栈集成，例如 React 或 Vue，以创建更加丰富的交互式数据可视化。以下是一些与 CandyGraph 配合使用的典型生态项目：

• React+CandyGraph：使用 React 的组件状态来控制 CandyGraph 绘图组件的状态。
• Vue+CandyGraph：利用 Vue 的响应式数据特性来实时更新 CandyGraph 图表。

通过这些集成，开发者可以构建出功能强大且用户友好的数据可视化应用。

candygraph Fast by default, flexible 2D plotting library. 项目地址: https://gitcode.com/gh_mirrors/ca/candygraph