vue-chart.js を使おうぜ

参考
https://misc.0o0o.org/chartjs-doc-ja/axes/radial/linear.html

まずはインスコ。

npm install vue-chartjs chart.js --save

今回はレーダーチャートを作ってみる。
Radar なので綴に注意。

/resources/RadarChart.js

import { Radar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    extends: Radar,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
        // this.chartData is created in the mixin.
        // If you want to pass options please create a local options object
        this.renderChart(this.chartData, this.options)
    }
}

/resources/components/Graph.vue

<template>
    <div class="small">
        <radar-chart :chart-data="datacollection" :options="options"></radar-chart>
    </div>
</template>

<script>
    import RadarChart from '../RadarChart.js'

    export default {
        components: {
            RadarChart,
        },
        data () {
            return {

                fontColor: {
                    red: 'rgb(255, 99, 132,0.6)',
                    orange: 'rgb(255, 159, 64,0.6)',
                    yellow: 'rgb(255, 205, 86,0.6)',
                    green: 'rgb(75, 192, 192,0.6)',
                    blue: 'rgb(54, 162, 235,0.6)',
                    purple: 'rgb(153, 102, 255,0.6)',
                    grey: 'rgb(201, 203, 207,0.6)',
                },


                datacollection: null,

                options: {


                    scale: {
                        pointLabels: {
                            fontSize: 35,//レーダーチャートのラベルを変更
                        },
                    },

                    title: {
                        display: true,
                        fontSize: 35,
                        text: '好きな動物'
                    },
                }
            }
        },
        created () {
            this.RadarChart()
        },




        methods: {



            RadarChart () {
                this.datacollection = {
                    labels: ["夢", "希望", "未来","賢さ", "可愛さ", "素敵さ","人気"],
                    datasets: [
                        {
                            backgroundColor: 'red',
                            backgroundColor: this.fontColor.blue,
                            borderWidth: 1,

                            label: "どんべぇ売れ筋カラー",

                            data: [1, 40, 5,2, 7, 5,9]
                        }
                    ],
                }
            },


        }
    }
</script>

<style>
    .small {
        max-width: 600px;
        margin:  150px auto;
    }
</style>

背景色を白にする

import { Radar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    extends: Radar,
    mixins: [reactiveProp],
    props: ['options'],

    mounted () {
        // this.chartData is created in the mixin.
        // If you want to pass options please create a local options object

        this.addPlugin({
            beforeDraw: function (c) {

                var ctx = c.chart.ctx;
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, c.chart.width, c.chart.height);
                ctx.save();
            }
        });

        this.renderChart(this.chartData, this.options)
    }
}

これで画像を保存したときに背景色が白になる。