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

预期输出：

expected image

请帮忙吗？

Answer 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

Answer 2

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

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

vue-chartjs甜甜圈图百分比显示

2 个答案: