Попытка обновить метку sh при нажатии на нее. Не удается прочитать свойство _meta из неопределенного " - PullRequest
Новая
       3

Попытка обновить метку sh при нажатии на нее. Не удается прочитать свойство _meta из неопределенного "

0 голосов
/ 29 февраля 2020

Я пытаюсь, чтобы проценты в ap ie -chart refre sh при нажатии на легенду, чтобы скрыть данные.

Пока что я могу отображать график в процентах, но они не изменятся, если я скрою одну из легенд.

Это график: исходный график

Вот как выглядит после клика: после клика

Мы ожидаем, что вместо 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>

1 Ответ

0 голосов
/ 29 февраля 2020

Чтобы получить ожидаемый результат, вы должны определить 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>
...