vue-chartjs 圆环图百分比显示

Question

我正在尝试显示这些存储的百分比，如下图所示。

我尝试了以下代码，但未显示百分比。

代码：

fillDoughnutData(i) {
        this.doughnutChartData.chartData = {
            datasets: [
                {
                    data: this.pieChart(i),
                    backgroundColor: ['#C4C4C4', '#F9BC0A']
                }
            ],
            labels: ['Volume used', 'Volume left'],
            tooltips: {
                callbacks: {
                    label(tooltipItem, data) {
                        return `${data.labels[tooltipItem.index]}: ${data.datasets[0].data[tooltipItem.index]}%`;
                    }
                }
            }
        };
    }

预期 output：

请问有什么帮助吗？

Answer 1

你可以在没有甜甜圈内的标签的情况下完成它。 使用 Vue ChartKick 和 Chart JS 只需将您的数据格式化为这种形式 [['Blueberry', 40], ['Strawberry', 60]] 并且对于 colors 也可以将其作为数组传递，否则您的甜甜圈将获得随机颜色

<pie-chart :donut="true" :data="[['Blueberry', 40], ['Strawberry', 60]]"></pie-chart>

然后在脚本标签内

import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(Chartkick.use(Chart))

Chartkick.options = {
  colors: ['#A52A2A', '#D3D3D3']
}

点击这里查看上面代码生成的甜甜圈

Answer 2

如果您想在工具提示中显示百分比，这是可能的。 您似乎将工具提示 object 放在图表数据 object 中，而它应该放在选项 object 中。 像这样：

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // DO NOT PUT tooltips HERE
    },
    options: {
        // PUT tooltips HERE
    }
})