Nuxtから利用したChart.jsでイベントを発行する

はじめに

以前書いたNuxtでChart.jsを利用するで実装したdoughnut-chartにて、hover時とレンダリング完了時にそれぞれイベントが発行されるよう改修しました。

hoverイベントを発行

doughnut-chartはChart.jsのDoughnut Chartを利用しており、hover時に処理を実行するためにはoptions.onHoverにコールバック関数を渡すことで可能となります。
https://www.chartjs.org/docs/latest/general/interactions/events.html

そのため、doughnut-chartではコールバック関数をコンポーネントのメソッドとして実装し、renderChart時にonHoverプロパティの値として定義することとしました。

plugins/vue-chartjs.js

  // ・・・省略
  mounted() {
    this.renderChart(this.chartData, { onHover: this.hover, ...this.options });
  },
  methods: {
    hover: function(point, event) {
      const element = event[0] || null;
      if (element === null) {
        return;
      }
      this.$emit('hover', element._index);
    },
  },
});

実装したhoverメソッドでは2つの引数pointとeventを受け取り、これらにはそれぞれMouseEventとChartElementが渡されます。
ChartElementにはlabelやvalueをはじめとするChart情報が含まれており、今回はその中のindex情報を利用することとしました。
this.$emitにてカスタムイベントを発行することが可能なため、hoverイベントを発行しindexを返却しております。

plugins/vue-chartjs.js

<template>
  <v-container fluid>
    <doughnut-chart :chart-data="chartData" :options="chartOptions" @hover="hover"/>
    // ・・・省略
  </v-container>
</template>

<script>
  // ・・・省略
  methods: {
    // ・・・省略
    hover: function(index) {
      console.log(index);
    },
  },
};
</script>

doughnut-chartにてhoverイベントを発行するよう実装したため、呼び出し側からは上記のようにevent handlerをメソッドにて実装し、@hover="event handler名"にてイベントを受け取ることが可能となります。

renderedイベントを発行

次にレンダリングが完了した際にイベントを発行するようdoughnut-chartを改修します。
Chart.jsのDoughnut Chartでは、options.animation.onCompleteにコールバック関数を渡すことでレンダリング完了時に処理を実行することが可能です。
https://www.chartjs.org/docs/latest/configuration/animations.html

そこでhoverイベントの発行時と同様にoptionsプロパティにコールバック関数をdefault値として渡すことで実装しようと試みたのですが、onCompleteはanimationオブジェクトのプロパティであり一つネストした階層に定義する必要があるため、新たに算出プロパティoptionsMergedDefaultEventsを実装し、そこでdefaultのイベントをpropsで渡されたoptionsにmergeするようにしました。

plugins/vue-chartjs.js

  // ・・・省略
  computed: {
    optionsMergedDefaultEvents: function() {
      let options = this.options;
      const animation = this.options.animation || {};
      options.animation = {
        onComplete: this.rendered,
        ...animation,
      };

      options = {
        onHover: this.hover,
        ...options,
      };

      return options;
    },
  },
  mounted() {
    this.renderChart(this.chartData, this.optionsMergedDefaultEvents);
  },
  methods: {
    // ・・・省略
    rendered: function() {
      this.$emit('rendered');
    },
  },
  // ・・・省略

上記により、レンダリング完了時もhoverイベントと同様に呼び出し側から@rendered="event handler名"にてイベントを受け取ることが可能となりました。

plugins/vue-chartjs.js

<template>
  <v-container fluid>
    <doughnut-chart :chart-data="chartData" :options="chartOptions" @hover="hover" @rendered="rendered"/>
    // ・・・省略
  </v-container>
</template>

<script>
  // ・・・省略
  methods: {
    // ・・・省略
    rendered: function() {
      console.log('rendered');
    },
  },
};
</script>