Vue.js 项目中的 SVG 多边形图表实现解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00146/article/details/148322917

Vue.js 项目中的 SVG 多边形图表实现解析

vue vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。项目地址: https://gitcode.com/gh_mirrors/vu/vue

概述

在 Vue.js 官方示例中，有一个使用 SVG 实现多边形图表的经典案例。这个案例展示了如何利用 Vue 的组件化特性和响应式数据绑定来创建动态的、可交互的数据可视化图表。本文将深入解析这个 SVG 多边形图表的实现原理和技术细节。

核心数据结构

示例中使用了一个简单的数组来存储图表数据：

var globalStats = [
  { label: 'A', value: 100 },
  { label: 'B', value: 100 },
  { label: 'C', value: 100 },
  { label: 'D', value: 100 },
  { label: 'E', value: 100 },
  { label: 'F', value: 100 }
]

每个对象包含 label 和 value 两个属性，分别表示数据项的标签和数值。

多边形图表组件

示例中定义了一个名为 polygraph 的可复用组件：

Vue.component('polygraph', {
  props: ['stats'],
  template: '#polygraph-template',
  computed: {
    points: function () {
      var total = this.stats.length
      return this.stats
        .map(function (stat, i) {
          var point = valueToPoint(stat.value, i, total)
          return point.x + ',' + point.y
        })
        .join(' ')
    }
  },
  components: {
    'axis-label': {
      props: {
        stat: Object,
        index: Number,
        total: Number
      },
      template: '#axis-label-template',
      computed: {
        point: function () {
          return valueToPoint(+this.stat.value + 10, this.index, this.total)
        }
      }
    }
  }
})

组件特性分析

props 接收数据：组件通过 stats prop 接收外部传入的数据数组
计算属性生成 SVG 点：points 计算属性将数据转换为 SVG 多边形所需的点坐标字符串
嵌套子组件：内部包含一个 axis-label 子组件用于显示坐标轴标签

数学转换函数

核心的数学转换函数 valueToPoint 实现了将数值转换为极坐标系的点：

function valueToPoint(value, index, total) {
  var x = 0
  var y = -value * 0.8
  var angle = ((Math.PI * 2) / total) * index
  var cos = Math.cos(angle)
  var sin = Math.sin(angle)
  var tx = x * cos - y * sin + 100
  var ty = x * sin + y * cos + 100
  return {
    x: tx,
    y: ty
  }
}

数学原理详解

极坐标转换：将数据项的索引和总数转换为角度
三角函数应用：使用 Math.sin 和 Math.cos 计算点在圆周上的位置
坐标调整：通过 +100 的偏移将原点移动到中心位置
缩放因子：使用 0.8 的系数调整图表大小

Vue 实例与交互功能

主 Vue 实例实现了数据的增删功能：

new Vue({
  el: '#demo',
  data: {
    newLabel: '',
    stats: globalStats
  },
  methods: {
    add: function (e) {
      e.preventDefault()
      if (!this.newLabel) return
      this.stats.push({
        label: this.newLabel,
        value: 100
      })
      this.newLabel = ''
    },
    remove: function (stat) {
      if (this.stats.length > 3) {
        this.stats.splice(this.stats.indexOf(stat), 1)
      } else {
        alert("Can't delete more!")
      }
    }
  }
})