vue-chartjs 是基於 Chart.js 實現的 vue 版本

更多精彩

• 更多技術部落格，請移步 asing1elife’s blog

官網

1. vue-chartjs
2. vue-chartjs-docs

需要寫在前面的注意點

不同圖表該使用什麼名稱進行引用

1. 個人認為不論是安裝方式，還是使用方式，chartjs 的文件都寫的比較清晰
2. 但唯獨不同圖表型別的引用名稱，真的很難以找到
3. 於是翻閱原始碼查詢到如下對應名稱

Radar 雷達圖的使用

目錄結構

1. 使用如下目錄結構是因為圖表存在多種型別，每種都需要單獨引用，所以應該單獨建立一個初始化元件

元件內容

1. 根據官方文件中的實現方式，在引用元件時，需要先將元件進行一次實現，之後再到具體的 DOM 結構中引用這個實現

<script>
  import { Radar, mixins } from 'vue-chartjs'

  const {reactiveProp} = mixins

  export default {
    name: 'inRadar',
    extends: Radar,
    mixins: [reactiveProp],
    props: ['options'],
    mounted()
 
 {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

元件引用

1. 按照如下引用方式，一開始很容易會認為在初始化資料中除了 datasets[0].data 是動態資料，其他都是靜態資料，可以放置到一開始的變數宣告中指定
2. 但其實不行，整個圖表的初始化 都需要在 DOM 元素載入之後才能進行，所以必須將所有指定的規則一起初始化
3. 對於圖表大小的控制，最簡單的方式還是將圖表通過父容器包裹，然後控制父容器的大小

<div class="chart-item"
 
>
  <in-radar :chart-data="radarData1"></in-radar>
</div>

<script>
	import inRadar from 'components/in-chart/in-radar'
	
	export default {
		data() {
			return {
				radarData1: {}
			}
		},
		mounted() {
			this._initChar()
		},
		methods: {
			_initChar() {
				this.radarData1 = {
  				labels: ['抗壓力', '精力', '適應力', '表達力', '邏輯力'],
  				datasets: [{
    					label: '',
    					borderColor: 'rgba(72,207,173,0.9)',
    					backgroundColor: 'rgba(72,207,173,0.5)',
    					data: currentFeature.radarData.one
  				}]
				}
			}
		},
		components: {
 			inRadar
		}
	}
</script>