iT邦幫忙

0

Chart js長條圖上的數字要如何顯示

大家好,
我想請問chart.js長條圖,每條bar上面的數字,
要如何顯示呢? 示意圖如下:

我使用的版本是chart.js v3。
環境是Vite、Vue3。
這是我的程式碼:

<script setup>
    import { onMounted,ref } from '@vue/runtime-core';
    import Chart from 'chart.js/auto';

    const data1 = ref([1000,1200,500])
    const label1 = ref(["P1","P2","P3"])

    //測試
    const testData = ref([12, 19, 3])
  
    onMounted(()=>{
        var canvas = document.getElementById("myChart");
        var ctx = canvas.getContext("2d")

        // 通過 createLinearGradient 創建 CanvasGradient 對象
        var gradientStroke = ctx.createLinearGradient(0, 0, 0, 150);
        // 定義漸變的 偏移 和 顏色
        gradientStroke.addColorStop(0, "#00FFFF");
        gradientStroke.addColorStop(1, "#75d1b8");

        var chartData = {
            labels: label1.value,
            datasets: [{
                label: '',
                data: data1.value,
                backgroundColor: gradientStroke,//漸變色
                barPercentage: 0.8,
                borderColor:'#75d1b8',
                borderWidth: 1,
            }]
        }
        const myChart = new Chart(ctx, {
            type: 'bar',
            data:chartData,
            options: {
                responsive: true,
                plugins: {
                    legend:false,
                    title: false
                },
                scales: {
                    y: {
                        ticks: {
                            beginAtZero:true,//從0開始
                            color: 'white'
                        },
                        grid:{
                            borderColor:'white'
                        },
                        suggestedMax: 3000//顯示的區間,超出會自動調整
                    },
                    x: {
                        ticks: {
                            color: 'white'//x軸標籤顏色
                        },
                        grid:{
                            borderColor:'white',//x軸顏色
                            color:'white',//網格線顏色
                        }
                    }
                },
                animation:{
                    onComplete : function(){
                        //在這裡,使用fillText讓bar的數據顯示在bar上
                    }
                }
            }
        });
        //修改data
        var changeData = document.getElementById("changeData");
        changeData.addEventListener('click',()=>{
            myChart.data.datasets[0].data = testData.value
            myChart.update()
        })
    })
</script>

<template>
    <button id="changeData">改變data</button>
    <canvas id="myChart" width="1030" height="240"></canvas>
</template>

網路上找到一些資料,發現是v2版本的
我試著套用、修改,還是沒辦法TT
懇請大大幫忙~
/images/emoticon/emoticon41.gif

//v2版本
 onComplete: function () {
    var chartInstance = this.chart,
        ctx = chartInstance.ctx;
        ctx.textAlign = 'center';
        ctx.fillStyle = "rgba(0, 0, 0, 1)";
        ctx.textBaseline = 'bottom';
        // Loop through each data in the datasets
        this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function (bar, index) {
                var data = dataset.data[index];
                ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
        });
    }

【已解決】使用方法:下載npm i chartjs-plugin-datalabels@next

//(1)import
import ChartDataLabels from 'chartjs-plugin-datalabels';

const ctx = document.getElementById('myChart');
ctx.width = 200;
ctx.height = 200;
//(2)註冊
Chart.register(ChartDataLabels); 

const myChart = new Chart(ctx, {
    type: 'bar',
    // (3)註冊 plugin,
    plugins: [ChartDataLabels], 
    data: {......},
    options: {
        bezierCurve : false,
        animations:false,
        scales: {
            y: {
                beginAtZero: true
            }
        },
        //(4) 新增 plugins
        plugins: {
            datalabels: {
                anchor: 'end', 
                align: 'end',
                formatter: (val) => (`${val}%`),
                labels: {
                    value: {
                        color: 'blue'
                    }
                }
            }
        }
    }
}
Barron iT邦新手 5 級 ‧ 2021-12-01 17:34:19 檢舉
這是 chart.js 的插件
應該能滿足你的需求
https://github.com/chartjs/chartjs-plugin-datalabels
感謝你~~沒錯
能請你幫我回答嗎
我想選你為最佳答案

1 個回答

1
Barron
iT邦新手 5 級 ‧ 2021-12-02 09:25:11
最佳解答

這是 chart.js 的插件
應該能滿足這個的需求
https://github.com/chartjs/chartjs-plugin-datalabels

其實我只用過 chart.js
還沒用過這個插件
本來是看見你的問題我也想要來把這個功能給加上去
就找到這個插件了XD

很高興能幫上你的忙:)

感謝幫了大忙~
/images/emoticon/emoticon32.gif

我要發表回答

立即登入回答