使用 Rough.js 创建动态水平条形图

本文由ScriptEcho平台提供技术支持

项目地址：传送门

## 使用 Rough.js 创建动态水平条形图

应用场景介绍

水平条形图是一种可视化数据类型，用于比较不同类别的数据值。它特别适用于比较具有不同范围或单位的数据集。Rough.js 是一个轻量级 JavaScript 库，用于创建具有手绘外观的可视化效果。结合使用 Rough.js 和水平条形图，我们可以创建具有独特美学吸引力的动态可视化效果。

代码基本功能介绍

本代码使用 Rough.js 库创建两个水平条形图。第一个条形图使用较低的粗糙度值（0），产生更光滑、更精致的外观。第二个条形图使用较高的粗糙度值（5），产生更粗糙、更随意的外观。两个条形图都具有相同的数据和配置，但粗糙度值的差异会产生明显不同的视觉效果。

功能实现步骤及关键代码分析说明

1. 安装 Rough.js

   import { BarH } from 'rough-viz'

2. 创建 BarH 实例

   new BarH({
     element: '#barh-0',
     data: {
       labels: ['North', 'South', 'East', 'West'],
       values: [10, 5, 8, 3],
     },
     title: 'Regions',
     margin: { top: 45, left: 45, right: 45, bottom: 45 },
     roughness: 0,
     color: 'darkorange',
     stroke: 'grey',
     strokeWidth: 1,
     fillStyle: 'zigzag-line',
     innerStrokeWidth: 0.5,
     fillWeight: 0.95,
   })

   此代码创建一个 BarH 实例，并指定其元素 ID、数据、标题、边距和各种样式选项。roughness 选项控制条形图的粗糙度，较高的值产生更粗糙的外观。

3. 设置样式选项

   本代码演示了 Rough.js 提供的各种样式选项，包括颜色、描边、填充样式和填充权重。这些选项允许用户自定义条形图的外观，以匹配他们的品牌或设计需求。

总结与展望

经验与收获

• 使用 Rough.js 创建具有手绘外观的可视化效果可以为数据可视化增添独特的美学元素。
• 调整 roughness 选项可以控制条形图的粗糙度，从而提供从光滑到粗糙的不同视觉效果。
• Rough.js 提供广泛的样式选项，允许用户根据自己的喜好定制条形图。

未来拓展与优化

• 将交互性添加到条形图，例如允许用户悬停或单击条形以查看更多详细信息。
• 探索使用其他 Rough.js 组件创建更复杂的可视化效果，例如散点图或折线图。

• 整合 Rough.js 与其他数据可视化库，例如 D3.js 或 Chart.js，以创建更强大的可视化体验。

  更多组件：
  <img src="https://block-design.oss-cn-shenzhen.aliyuncs.com/haomo-ai/image/id-1792727437764952065.png" />

  获取更多Echos

  本文由ScriptEcho平台提供技术支持

  项目地址：传送门

  扫码加入AI生成前端微信讨论群：