Canvas进阶-2、可视化应用

前言

Canvas 可以用来创建各种 数据可视化 图表和图形，通过绘制不同的形状、线条和颜色来展示数据的特征和趋势。

数据可视化的基本原理是将数据转化为可视化的图形元素，以便人们更容易理解和分析数据。这涉及到以下几个方面：

• 数据映射：将数据值映射到可视化元素的属性上，如位置、大小、颜色等。例如，将数值映射到柱状图的高度、折线图的点坐标或饼图的扇形角度。
• 视觉编码：选择合适的可视化元素和属性来传达数据的特征。例如，使用不同的颜色来区分不同的数据类别，使用线条的粗细来表示数据的大小。
• 布局和排版：合理安排可视化元素在画布上的位置，以提高可读性和美观度。例如，在柱状图中保持柱子之间的间距均匀，在折线图中使线条清晰可辨。
• 交互性：为可视化添加交互功能，如鼠标悬停显示数据值、缩放和平移等，以增强用户对数据的探索和理解。

柱状图

• 首先，确定数据和图表的尺寸。假设我们有一组数据表示不同类别的数量 Canvas 上绘制柱状图。
• 然后，计算每个柱子的宽度和间距。如果有 n 个数据点，那么柱子的宽度可以是画布宽度除以数据点数量，再减去一些间距。
• 接着，根据数据值计算每个柱子的高度。可以将数据值映射到画布的高度范围内，例如，数据值的最大值对应画布的高度，其他数据值按比例缩放。
• 最后，使用 fillRect() 方法在 Canvas 上绘制每个柱子。可以为不同的柱子设置不同的颜色，以区分不同的数据类别。

以下是一个简单的用 Canvas 绘制柱状图的示例代码：

    // 可视化（柱状图）
    init() {
   
   
      var canvas = document.getElementById('myCanvas')
      var ctx = canvas.getContext('2d')
      var data = [100, 200, 150, 250, 220, 140]
      var width = canvas.width
      var height = canvas.height
      var barWidth = width / data.length - 10 // 柱子宽度，减去一些间距
      var maxDataValue = Math.max(...data)

      for (var i = 0; i < data.length; i++) {
   
   
        var barHeight = (data[i] / maxDataValue) * height