单击标签时尝试刷新标签。无法读取未定义的属性 '_meta'”

Question

我正在尝试在单击图例以隐藏数据时刷新饼图中的百分比。

到目前为止，我可以用百分比显示图表，但如果我隐藏其中一个图例，它们不会改变。

这是图表：initial chart

这是点击后的样子：after click

我们预计是 55.6%，但实际显示是 100%。

到目前为止，这是我的代码：

 <script>
    import {Pie} from "vue-chartjs";
    import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels';

    export default {
        extends: Pie,
        ChartJsPluginDataLabels,

        props: {
            data: Array,
            bg: Array,
            labels: Array
        },
        data() {
            return {

            }
        },
        computed: {
            chartData() {
                return this.data
            },
            bgData() {
                return this.bg
            },
            total() {
              return this.data.reduce((a, b) => a + (b || 0), 0)
            }
        },
        methods: {
            renderPieChart() {
                this.renderChart({
                    labels: this.labels,
                    datasets: [
                        {
                            label: "Data One",
                            backgroundColor: this.bgData,
                            data: this.chartData,
                            hoverBackgroundColor: "#f78733"
                        }
                    ]
                }, {
                    responsive: true,
                    plugins: {
                        datalabels: {
                            formatter: (value) => {
                                let sum = this
                                    .$refs.canvas.getContext('2d').dataset._meta[1].total; //use this.total to fix percentages
                                let percentage = (value * 100 / sum).toFixed(1) + "%";
                                return percentage;
                            },
                            color: '#fff'
                        }
                    }
                })
                console.log()

            },
            updateSelected(point, event) {
                const item = event[0]
                this.selected = {
                    index: item._index,
                    value: this
                        .chartData
                        .datasets[0]
                        .data[item._index]
                }
            }

        },
        watch: {
            bg: function () {

                this.renderPieChart();
            },
            data: function () {

                this.renderPieChart();
            }

        },
    }
</script>

Answer 1

为了获得预期的结果，您应该定义plugins.datalabels.formatter如下：

formatter: (value, context) => {   
  return (value * 100 / context.dataset._meta[0].total).toFixed(1) + "%";
}

new Chart(document.getElementById("myChart"), {
  type: "pie",
  data: {
    labels: ['Savings', 'House'],
    datasets: [{
      label: "Data One",
      backgroundColor: ['#4e9258', '#64e986'],
      data: [9, 7],
      hoverBackgroundColor: "#f78733"
    }]
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (value, context) => {   
          return (value * 100 / context.dataset._meta[0].total).toFixed(1) + "%";
        },
        color: '#fff'
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="myChart" height="100"></canvas>

单击标签时尝试刷新标签。无法读取未定义的属性 '_meta'”

Trying to refresh label when click on it. Cannot read property '_meta' of undefined"

chart.js

vuejs2

vue-chartjs

单击标签时尝试刷新标签。无法读取未定义的 属性 '_meta'”

Trying to refresh label when click on it. Cannot read property '_meta' of undefined"

chart.js

vuejs2

vue-chartjs

单击标签时尝试刷新标签。无法读取未定义的属性 '_meta'”