# Vue vue-chartjs

###### tags: `Vue` `Chart.js`

## Components 模式建立chart
注意：不能有<template></template>

Chart.vue

<script>
import { Line, mixins, Bar } from "vue-chartjs";
const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp, Bar],
  props: ["options"],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options);
  }
};
</script>

<style>
</style>

My.vue

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

<script>
import Chart from "../components/Chart.vue";

export default {
  components: {
    Chart
  },
  data: () => ({
      datacollection: {},
      options: {
          // 設定值...
      }
  }),
  methods:{
     showChart(){
       this.datacollection = mydata;
     }
  }
}
</script>

## 如何合併兩種Chart：

需要先設定一個default type

mydata = {
    type: "Line",
    labels: labels,
    datasets: datasets
};

然後在datasets裡面切換

 datasets = [
    {
      type: "line",
      backgroundColor: "red",
      data: [],
    },
    {
      type: "bar",
      backgroundColor: "green",
      data: [],
    }
  ];

## 設置兩個y軸資料(scales)，在options設定

options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [
          {
            id: "A",
            type: "linear",
            position: "left",
            scaleLabel: {
              display: true,
              labelString: "%"
            },
            ticks: {
              max: 100,
              min: 0
            }
          },
          {
            id: "B",
            type: "linear",
            position: "right",
            scaleLabel: {
              display: true,
              labelString: "s"
            },
            ticks: {
              max: 20,
              min: 0
            }
          }
        ],
        xAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: "時間"
            }
          }
        ]
      }
    }