vue-chartjs 圆环图百分比显示答案

【问题标题】：vue-chartjs Doughnut chart percentage displayvue-chartjs 圆环图百分比显示
【发布时间】：2020-07-28 10:33:03
【问题描述】：

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

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

代码：

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]}%`;
                    }
                }
            }
        };
    }

预期输出：

有什么帮助吗？

【问题讨论】：

这段代码到底输出了什么？它怎么不符合您的期望？
它已经正确渲染了图表，但我希望它显示附件图像中的百分比。工具提示应该这样做，但由于某些原因我无法破译它不是。

标签： vue.js charts vue-chartjs

【解决方案1】：

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

<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']
}

Click here to view the donut generated from the code above

【讨论】：

嗨，Usman，感谢您的提醒，但我没有在我的项目中使用这些库。我正在使用 vue-chartjs。

【解决方案2】：

如果您想在工具提示中显示百分比，这是可能的。似乎您将 tooltips 对象放在 chartdata 对象中，而它应该放在 options 对象中。像这样：

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

【讨论】：