vue-chartjsグラフライブラリの配置と使用

公式サイト

公式文書はChart.jsとVue.jsを使って簡単で綺麗なグラフです.

ギthub/vue-chartjs

vue-chartjsはChart.jsに基づいて実現されたvueバージョンです.
npm

npm install vue-chartjs chart.js --save

コンポーネント

Bar
HorizontalBar
Doughnut
Line
Pie
PolarArea
Radar
Bubble
Scatter
mixins
generateChert

参照

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    this.renderChart(data, options)
  }
}

this.render Chart()方法は、Barコンポーネントによって提供され、2つのオブジェクトパラメータを受信する.一つ目はあなたのグラフのデータで、二つ目は配置対象です.この文書では、提供したいオブジェクト構造のChart.js docsを確認します.

export default {
    extends: Bar,

    props: [
        'data',
        'max',
        'min',
    ],
    mounted() {
        const {
            labels,
            data,
            bgColors,
        } = (this as any)
        .data.chartData;

        const thisTitle = (this as any).data.label;
        const units = (this as any).data.unit && (this as any).data.unit.data.find((i: any) => i);
        const tableTitle = this.$t(thisTitle) + '(' + (units) + ')';

        // const max = (this as any).data.max;
        const maxVal = Number(Math.max.apply(null, this.data.chartData.data)) * 1.2;
        const max =  Math.ceil(maxVal);
        const min = 0;

        const datacollection = {
            labels,
            datasets: [{
                backgroundColor: bgColors,
                data,
            } ],
        };

        const options: any = {
            animation: {
                duration: 100,
                onComplete: function() {
                    const chartInstance = (this as any).chart;
                    const ctx = chartInstance.ctx;
                    // ctx.font = Chart.helpers.fontString(
                    //     Chart.defaults.global.defaultFontSize,
                    //     Chart.defaults.global.defaultFontStyle,
                    //     Chart.defaults.global.defaultFontFamily
                    // );
                    ctx.textAlign = 'center';
                    // ctx.textBaseline = "bottom";
                    // ctx.fillStyle = "#F5A623";
                    (this as any).data.datasets.forEach(function(dataset, i) {
                    const meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function(bar, index) {
                        ctx.fillText(
                        `${dataset.data[index]}`,
                        bar._model.x,
                        bar._model.y - 5,
                        );
                    });
                    });
                },
            },
            bars: {
                maxBarThickness: 20,
            },
            events: ['null'],
            responsive: true,
            maintainAspectRatio: true,
            legend: {
                display: false,
                position: 'top', //      
                fullWidth: 'true',
     
                //   labels:{ //      
                //         boxWidth:10 ,//      
                //         fontSize:"20", //       
                //         fontStyle:"normal" //    
                //         fontColor："red" , //      
                //         padding:10 //         
                //         fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" //    
                //        usePointStyle:false //             （    
                //                    fontSize，         boxWidth）  
                //     
                // }        
            },
             title: {                
                display: true,
                text: tableTitle,
                position: 'top',
                // fontSize:20,   //        12px
                // fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" //      
                // fontColor:'#666'
                // fontStyle:'bold' //     
                // padding:10 //                 
                // lineHeight:10 //        
            },
            tooltips: {
                enabled: true,
                mode: 'point',
            },
            scales: {
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true,
                        fontSize: 11,
                        max,
                        min,
                        fontColor: '#9E9E9E',
                    },
                }],
                xAxes: [{
                    barThickness: 18,
                    ticks: {
                        fontSize: 13,
                        fontColor: '#353535',
                    },
                }],
            },
        };

        (this as any)
        .renderChart(datacollection, options);
    },
};