一人もくもく会にQiitaと同じタグチャートを作ってみる

5968 ワード
PHP CakePHP Vue.js GoogleChartAPI cakephp3 PHP テキストリンク

一人もくもく会 にそこそこ自分の記事が溜まってきたので、Qiitaと同じタグチャートを作ってみた。
Google Chart APIを使うだけ。

ちなみにQiitaのは下記。（丁度トレンドにいた方の）

Vueで。

<template>
  <div ref="chart"></div>
</template>

<script>
export default {
  props: ['tags'],

  mounted() {
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(this.drawChart.bind(this));
  },

  methods: {
    drawChart() {
      const tags = this.tags.map(tag => {
        return [tag.tags.name, tag.cnt];
      });
      const data = new google.visualization.DataTable();
      data.addColumn("string", "Tag");
      data.addColumn("number", "Count");
      data.addRows(tags);
      const options = {
        width: 360,
        height: 256
      };
      const chart = new google.visualization.PieChart(this.$refs.chart);
      chart.draw(data, options);
    },
  }
};
</script>

呼び出し

<user-tag-chart :tags="<?= h(json_encode($tagSummary)) ?>"></user-tag-chart>

出来た。

すごく気持ち悪いのでQiitaと同じように(?)10位以下をまとめた。

成果が目に見えると気持ちが良い。

一人もくもく会