# chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie

# index.vue

<template>
    <div>
        <barchart :labels="bar.labels" :datasets="bar.datasets"/>
        <linechart :labels="line.labels" :datasets="line.datasets"/>
        <piechart :labels="pie.labels" :datasets="pie.datasets"/>
    </div>
</template>

<script>
import barchart from "@/components/jschart/bar";
import linechart from "@/components/jschart/line";
import piechart from "@/components/jschart/pie";

export default {
    components: {
        barchart,
        linechart,
        piechart,
    },
    data() {
    return {
      bar: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Git",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
            backgroundColor: "rgba(255, 99, 132, 0.8)"
          }
        ]
      },
      line: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Git",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
            backgroundColor: "rgba(255, 99, 132, 0.8)",
            borderColor: "red"
          },
          {
            label: "Git",
            data: [20, 30, 14, 19, 12, 14, 9, 18, 30, 20, 32, 110],
            backgroundColor: "green",
            borderColor: "green"
          }
        ]
      },
      pie: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Git",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
            backgroundColor: [
              "rgba(255,167,0, 0.8)",
              "rgba(55, 126, 184, 0.8)",
              "rgba(102, 166, 30, 0.8)",
              "rgba(152, 78, 163, 0.8)",
              "rgba(0, 210, 213, 0.8)",
              "rgba(255, 127, 0, 0.8)",
              "rgba(175, 141, 0, 0.8)",
              "rgba(127, 128, 205, 0.8)",
              "rgba(179, 233, 0, 0.8)",
              "rgba(196, 46, 96, 0.8)",
              "rgba(166, 86, 40, 0.8)",
              "rgba(247, 129, 191, 0.8)"
            ]
          },
          {
            label: "Git",
            data: [20, 30, 14, 19, 12, 14, 9, 18, 30, 20, 32, 110],
            backgroundColor: [
              "rgba(255,167,0, 0.8)",
              "rgba(55, 126, 184, 0.8)",
              "rgba(102, 166, 30, 0.8)",
              "rgba(152, 78, 163, 0.8)",
              "rgba(0, 210, 213, 0.8)",
              "rgba(255, 127, 0, 0.8)",
              "rgba(175, 141, 0, 0.8)",
              "rgba(127, 128, 205, 0.8)",
              "rgba(179, 233, 0, 0.8)",
              "rgba(196, 46, 96, 0.8)",
              "rgba(166, 86, 40, 0.8)",
              "rgba(247, 129, 191, 0.8)"
            ]
          }
        ]
      }
    };
  }
};
</script>

# components

# 🎉 bar

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  props: {
    labels: Array,
    datasets: Array
  },
  mounted() {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: this.labels,
      datasets: this.datasets
    });
  }
};
</script>

<style>
</style>

# 🎉 line


<script>
import { Line } from "vue-chartjs";

export default {
  extends: Line,
  props: {
    labels: Array,
    datasets: Array,
    options: {
      type: Object,
      default: () => {
        return {
          elements: {
            line: {
              fill: false,
              borderCapStyle: "round",
              borderJoinStyle: "round",
              tension: 0
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          segmentStrokeColor: "transparent"
        };
      }
    }
  },
  mounted: function() {
    this.renderChart(
      {
        labels: this.labels,
        datasets: this.datasets
      },
      this.options
    );
  }
};
</script>

# 🎉 pie


<script>
import { Doughnut } from "vue-chartjs";

export default {
  extends: Doughnut,
  props: {
    labels: Array,
    datasets: Array,
    options: {
      type: Object,
      default: () => {
        return {
          elements: {
            line: {
              fill: false,
              borderCapStyle: "round",
              borderJoinStyle: "round",
              tension: 0
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          segmentStrokeColor: "transparent"
        };
      }
    }
  },
  mounted: function() {
    this.renderChart(
      {
        labels: this.labels,
        datasets: this.datasets
      },
      this.options
    );
  }
};
</script>