Examples https://vuejs.org/examples/#svg
페이지 정보
본문
https://vuejs.org/examples/#svg
----------------------------------------------
<!--
Say Hello World with Vue!
-->
<script>
import PolyGraph from './PolyGraph.vue'
export default {
components: {
PolyGraph
},
data: () => ({
newLabel: '',
stats: [
{ label: 'A', value: 100 },
{ label: 'B', value: 100 },
{ label: 'C', value: 100 },
{ label: 'D', value: 100 },
{ label: 'E', value: 100 },
{ label: 'F', value: 100 }
]
}),
methods: {
add(e) {
e.preventDefault()
if (!this.newLabel) return
this.stats.push({
label: this.newLabel,
value: 100
})
this.newLabel = ''
},
remove(stat) {
if (this.stats.length > 3) {
this.stats.splice(this.stats.indexOf(stat), 1)
} else {
alert("Can't delete more!")
}
}
}
}
</script>
<template>
<svg width="200" height="200">
<PolyGraph :stats="stats"></PolyGraph>
</svg>
<!-- controls -->
<div v-for="stat in stats">
<label>{{stat.label}}</label>
<input type="range" v-model="stat.value" min="0" max="100">
<span>{{stat.value}}</span>
<button @click="remove(stat)" class="remove">X</button>
</div>
<form id="add">
<input name="newlabel" v-model="newLabel">
<button @click="add">Add a Stat</button>
</form>
<pre id="raw">{{ stats }}</pre>
</template>
<style>
polygon {
fill: #42b983;
opacity: 0.75;
}
circle {
fill: transparent;
stroke: #999;
}
text {
font-size: 10px;
fill: #666;
}
label {
display: inline-block;
margin-left: 10px;
width: 20px;
}
#raw {
position: absolute;
top: 0;
left: 300px;
}
</style>
---------------------------
AxisLabel.vue
<script>
import { valueToPoint } from './util.js'
export default {
props: {
stat: Object,
index: Number,
total: Number
},
computed: {
point: function () {
return valueToPoint(+this.stat.value + 10, this.index, this.total)
}
}
}
</script>
<template>
<text :x="point.x" :y="point.y">{{stat.label}}</text>
</template>
-------------------
PolyGraph.vue
<script>
import AxisLabel from './AxisLabel.vue'
import { valueToPoint } from './util.js'
export default {
components: {
AxisLabel
},
props: {
stats: Array
},
computed: {
// a computed property for the polygon's points
points() {
const total = this.stats.length
return this.stats
.map((stat, i) => {
const { x, y } = valueToPoint(stat.value, i, total)
return `${x},${y}`
})
.join(' ')
}
}
}
</script>
<template>
<g>
<polygon :points="points"></polygon>
<circle cx="100" cy="100" r="80"></circle>
<axis-label
v-for="(stat, index) in stats"
:stat="stat"
:index="index"
:total="stats.length"
>
</axis-label>
</g>
</template>
------------------------
util.js
export function valueToPoint(value, index, total) {
const x = 0
const y = -value * 0.8
const angle = ((Math.PI * 2) / total) * index
const cos = Math.cos(angle)
const sin = Math.sin(angle)
const tx = x * cos - y * sin + 100
const ty = x * sin + y * cos + 100
return {
x: tx,
y: ty
}
}