[Vue + typescript] chart.js

VUE.JS 목록

$ npm install vue-chartjs chart.js

<template>
  <div>
    <Bar
      :chart-options="chartOptions"
      :chart-data="chartData"
      :chart-id="chartId"
      :dataset-id-key="datasetIdKey"
      :plugins="plugins"
      :css-classes="cssClasses"
      :styles="styles"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Bar } from 'vue-chartjs/legacy'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

@Component({
  components: {
    Bar
  }
})
export default class DashboardView extends Vue {
  
  chartData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
      { label: 'Dataset 1', data: [40, 20, 12, 20, 10, 30], backgroundColor: '#4dc9f6' },
      { label: 'Dataset 2', data: [40, 20, 12, 20, 10, 30], backgroundColor: '#f67019' },
      { label: 'Dataset 3', data: [40, 20, 12, 20, 10, 30], backgroundColor: '#f53794' }
    ]
  }
  
  chartOptions = {
    responsive: true,
    indexAxis: 'x',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  }

  width = 400
  height = 120
  styles= {}
  cssClasses = ''
  plugins= []
  datasetIdKey= 'label'
  chartId= 'bar-chart'
}
</script>

 

 

VUE.JS 목록