如何知道在分組堆疊條（chartjs）中單擊了哪個堆棧？

Question

我創建了一個類似於圖片的條形圖。 我使用兩個堆棧作為一個組。 每個堆棧可能有多個數據集。 我正在使用 Vue.js 和 vue-chartjs。

我正在使用 Chart.js 的onClick選項， e是事件， i是圖表中使用的數據集數組。 通過知道其中一個數據集的索引，我們知道點擊了哪個組。 這樣，我就知道點擊了哪個組。 但是我需要知道點擊了哪個堆棧。

onClick: (e, i ) => {
  console.log(i[0]._index)
}

我用於圖表的數據：

this.datacollection = {
  labels: [...Object.keys(total)],
  datasets: [
    {
      label: 'Started',
      stack: 'Stack 0',
      backgroundColor: 'rgb(112,108,236,0.2)',
      borderColor: 'rgb(112,108,236,0.3)',
      borderWidth: 5,
      data: Object.values(active)
    },
    {
      label: 'Assigned (all)',
      stack: 'Stack 0',
      backgroundColor: 'rgb(137,37,252 , 0.2)',
      borderColor: 'rgb(137,37,252 , 0.2)',
      borderWidth: 5,
      data: Object.values(total),
    },
    {
      label: 'Finished',
      stack: 'Stack 0',
      backgroundColor: 'rgba(30,135,246, 0.3)',
      borderColor: 'rgba(30,135,246, 0.4)',
      borderWidth: 5,
      data: Object.values(done)
    },
    {
      label: 'Rated',
      stack: 'Stack 0',
      backgroundColor: pattern.draw('dot-dash', 'rgb(98,241,58 , 0.5)'),
      borderColor: 'rgb(98,241,58 , 0.5)',
      borderWidth: 5,
      data: Object.values(rated)
    },
    {
      label: 'Trashed',
      stack: 'Stack 1',
      backgroundColor: 'rgb(236,108,127,0.5)',
      borderColor: 'rgb(236,108,127,0.5)',
      borderWidth: 5,
      data: Object.values(trashed)
    },
  ]
}

這是圖表的選項

{
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    xAxes: [
      {
        stacked: true
      }
    ],
    yAxes: [
      {
        ticks: {
          beginAtZero: true
        },
        stacked: false
      }
    ]
  },
  onClick: (e, i) => { console.log(i[0]._index) }
}

以上信息可能對您來說已經足夠了，但是如果您想查看完整代碼： test.vue ：

<template>
  <div>
    <bar-chart :chart-data="datacollection" :options="options"></bar-chart>
  </div>
</template>

<script>
import BarChart from '@/components/Charts/BarChart.js'
import pattern from 'patternomaly';

export default {
  components: {
    BarChart,
  },
  data() {
    return {
      datacollection: null,
      loaded: false,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          xAxes: [{stacked: true}],
          yAxes: [{
            ticks: {
              beginAtZero: true
            },
            stacked: false
          }]
        },
        onClick: (e, i ) => {
            console.log(e);
        }
      }
    }
  },
  mounted() {
    this.fillData()
  },
  methods: {
    fillData() {
      this.loaded = false;

      window.axios.get('/api/reports/tests', {
        params: {
          dateRange: this.dateRange
        }
      })
        .then((res) => {
          let total = res.data.total;
          let done = res.data.done;
          let active = res.data.active;
          let trashed = res.data.trashed;
          let rated = res.data.rated;

          this.datacollection = {
            labels: [...Object.keys(total)],
            datasets: [
              {
                label: 'Started',
                stack: 'Stack 0',
                backgroundColor: 'rgb(112,108,236,0.2)',
                borderColor: 'rgb(112,108,236,0.3)',
                borderWidth: 5,
                data: Object.values(active)
              },
              {
                label: 'Assigned (all)',
                stack: 'Stack 0',
                backgroundColor: 'rgb(137,37,252 , 0.2)',
                borderColor: 'rgb(137,37,252 , 0.2)',
                borderWidth: 5,
                data: Object.values(total),
              },
              {
                label: 'Finished',
                stack: 'Stack 0',
                backgroundColor: 'rgba(30,135,246, 0.3)',
                borderColor: 'rgba(30,135,246, 0.4)',
                borderWidth: 5,
                data: Object.values(done)
              },
              {
                label: 'Rated',
                stack: 'Stack 0',
                backgroundColor: pattern.draw('dot-dash', 'rgb(98,241,58 , 0.5)'),
                borderColor: 'rgb(98,241,58 , 0.5)',
                borderWidth: 5,
                data: Object.values(rated)
              },
              {
                label: 'Trashed',
                stack: 'Stack 1',
                backgroundColor: 'rgb(236,108,127,0.5)',
                borderColor: 'rgb(236,108,127,0.5)',
                borderWidth: 5,
                data: Object.values(trashed)
              },
            ]
          }
          this.loaded = true;
        })
    }
  }
}
</script>

條形圖.js：

import { Bar , mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['chartData' , 'options'],
  mounted () {
    if (this.chartdata)
      this.renderChart(this.chartdata)
  }
}

Answer 1

我找到了一種chart.getElementAtEvent(evt)的方法

let chart = this.$refs.barChart.$data._chart;

                let datasetIndex = chart.getElementAtEvent(evt)[0]._datasetIndex

                let stack = chart.getDatasetMeta(datasetIndex).stack;