Vue.js + SVG練習2 : Sparkline
あまり体調がよくない（言い訳）ので、今日は軽め。
何の変哲もないsparkline。可愛くもなんともない。
Sparkline.vue
<template>
<svg width="300" height="50">
<polyline fill="none" stroke="#793" :points="points"></polyline>
</svg>
</template>
<script>
export default {
data(){
return {
dat: []
}
},
computed:{
points(){
return this.dat.map((item, i)=>{
return `${i},${item}`
}).join(" ")
}
},
mounted(){
//ランダムデータ
for(let i =0; i < 300; i++){
this.dat.push(
(Math.random() + Math.random() + Math.random() + Math.random()) / 4 * 50
)
}
}
}
</script>
ポイント
- 乱数はいわゆる「コクのある乱数」
- そもそもpolylineって要素があるのを初めて知った
- Vueの場合だと、pointsにバインドして、半角スペースで座標列をjoinすればおわり
- こういう時computedのありがたみを感じる
- 何かインタラクション入れたかったけど、まぁ寝よう
