Vue js 如何在单击时在图表 js 上发出事件

Question

我将图表js与vue js结合使用，并在仪表板上显示一些数据。但我现在想做的是，当我单击图表以进入另一个视图的责任表时，也许还可以使用过滤器，创建一个函数。 我的意思是，如果我有一个图表，显示有多少用户以及用户表上有多少用户

is_suspended

，当我单击一侧时，我会看到用户表上有多少

is_suspended

，也许还可以添加过滤以仅显示

is_suspended

这是我的图表js

<template>
    <div class="container card mx-0 my-2 p-2">
        <Doughnut v-if="loaded"
            :chart-options="chartOptions"
            :chart-data="chartData"
            :width="width"
            :height="height"
        />
    </div>
</template>

<script>
    import { Doughnut } from 'vue-chartjs/legacy'
    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

    ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

    export default {
        name: 'PieChart',
        components: { Doughnut },

        props: {
            width: {
                type: Number,
                default: 200
            },
            height: {
                type: Number,
                default: 100
            },
        },  
        
        data: () => ({
            chartOptions: {
                responsive: true
            },
            loaded: false,
            chartData: {}
        }),
        async mounted () {
            this.loaded = false
        
            try {
                let response = await fetch('/home/user-statistics-doughnutchart')
                let userdata = await response.json()
                // console.log(userdata)
                this.chartData = userdata
        
                this.loaded = true
            } catch (e) {
                console.error(e)
            }
        }
    }
</script>

和我的控制器

$users = User::count();
        $active = User::where('is_suspended', 0)->count();
        $suspendedUsers = User::where('is_suspended', 1)->count();

        $post_data = array(
            'labels' => [
                'Accounts '.'('.$users.')',
                'Active '.'('.$active.')',
                'Suspended '.'('.$suspendedUsers.')', 
            ],
            'datasets' => [
                [
                    'backgroundColor' => ['#695CFE', '#191641', '#F2C335'],
                    'data' => [$users, $active, $suspendedUsers]
                ],
            ]
        );

Answer 1

这个解决方案在 Nuxt2 (Vue2) 中对我有用

<template>
  <Doughnut
    ref="doughnut"
    :chart-options="calcOptions"
    :chart-data="value"
    :height="+ +height"
    :styles="{height: height + 'px'}"
  />
</template>

<script>
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  PolarAreaController,
  RadialLinearScale,
  PointElement,
  LineElement,
  ArcElement,
} from 'chart.js';

import { Doughnut } from 'vue-chartjs';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  PolarAreaController,
  RadialLinearScale,
  PointElement,
  LineElement,
  ArcElement
);

export default {
  components: {
    Doughnut,
  },

  props: {
    height: {
      type: [String, Number],
      default: 300,
    },

    options: {
      type: Object,
      default() {return {}},
    },

    title: {
      type: String,
      default: '',
    },

    value: {
      type: Object,
      default() {return {}},
    },
  },

  methods: {
    handleClick (ev) {
      const points = this.$refs.doughnut.chart.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false);

      if (points.length) {
        const firstPoint = points[0];
        const label = this.value.labels[firstPoint.index];
        const value = this.value.datasets[firstPoint.datasetIndex].data[firstPoint.index];
        this.$emit('click', { label, value, index: firstPoint.index });
      }
    },
  },

  computed: {
    calcOptions () {
      if (Object.keys(this.options).length) {
        return this.options;
      }

      return {
        responsive: true,
        maintainAspectRatio: false,
        height: + +this.height,
        plugins: {
          title: {
            display: true,
            text: this.title,
            font: {
              size: 18,
            },
          },
          legend: {
            position: 'right',
          },
        },
      };
    },
  },

  mounted () {
    this.$refs.doughnut.chart.canvas.addEventListener('click', this.handleClick);
  },

  beforeDestroy () {
    this.$refs.doughnut.chart.canvas.addEventListener('click', this.handleClick);
  },
}
</script>