저번 보도에서 산도 없이 vue-charts를 선택하는 등 통한스러운 실수를 저질렀다
이번에는 고정된 vue-chartjs로 바꾸고 싶습니다.
웹 페이지와 node.js 가져오기에 관해서는 지난번 보도를 참고하십시오.
마지막으로 보도된 "Vue.js 표시"이전에는 같은 방법으로 처리했습니다.
참조vue-chartjs 공식 문서.

vue-chartjs 설치

npm를 통해 설치

$ npm install vue-chartjs chart.js --save

javascript/packs/chart.js에 특별히 추가할 필요가 없습니다.편하네요!

사전 지식(글로벌 구성 요소 및 로컬 구성 요소)

이 기사는 코드와 함께 상세하게 쓰여 있습니다.【Vue.js】Vue.js에서Chart.js 사용
글로벌 구성 요소는javascript/packs/components/chart를 준비하고 그 다음은chart입니다.vue(가명),chart 도표를 만들다.js에서 도표를 그리는 기술을 가져옵니다.그리고 index.vue에서chart.vue(가명)를 구성 부분으로 사용하다.
로컬 구성 요소는 index를 가리킵니다.vue chart.js에서 직접 도표를 가져와서 도표를 그리는 기술을 합니다.구성 요소가 전파되지 않도록 하는 방법이다.
대충 정리해 보니 이번에는 조립품을 만들 필요가 없을 것 같아서 현지 조립품으로 만들고 싶어요.

일단 막대그래프를 보여드릴게요.

javascript/packs/components/index.vue

<template>
  <div>
    <h3>棒グラフを描画する</h3>
    <BarChart/>
  </div>
</template>

<script>
// インポート
import { Bar } from 'vue-chartjs'

var BarChart = {
  extends: Bar,
  mounted () {
    this.renderChart({
      //ラベル
      labels:["１月","２月","３月","４月"],
      //データ詳細
      datasets: [{
        //データタイトル
        label:'勉強時間',
        //データ
        data: [20,30,40,50]
      }]
    });
  }
}

export default {
  name: 'Test',
  components: {
    BarChart
  }
} 

</script>

이런 느낌으로 다양한 데이터를 변경할 수 있다.

목적의 산포도를 그리다

방금 표시된 스트라이프 그림의 index입니다.vue를 아래의 산도로 고쳐 쓰세요.
javascript/packs/components/index.vue

<template>
  <div class=container>
    <h3>散布図を描画する</h3>
    <ScatterChart/>
  </div>
</template>

<script>
// インポート
import { Scatter } from 'vue-chartjs'

var ScatterChart = {
  extends: Scatter,
  mounted () {
    this.renderChart({
      datasets: [{
      //ラベル
      label:'重要度',
      fill: false,
      borderColor: '#f87979',
      backgroundColor: '#f87979',
      //データ詳細
      data: [{
        x: 10,
        y: 20
      },{
        x:5,
        y:6
      },{
        x:4,
        y:6
      }]
    },
    {
    label: '緊急度',
    fil: false,
    borderColor: '#7acbf9',
    backgroundColor: '#7acbf9',
    data: [{
        x: 6,
        y: 7
      },{
        x:-4,
        y:3
      },{
        x:1,
        y:-2
      }]
    }]
  },{responsive: true,maintainAspectRatio: false})
}
}        


export default {
  name: 'Test',
  components: {
    ScatterChart
  }
} 

</script>
では
<style scoped>
//画面に表示されるサイズを適当に整える
.container{
  width:40%;
  height:40%;

}
</style>

rails를 하면 이런 느낌이 들어요.

음수를 입력하면 축에 음수가 자동으로 포함될 것 같습니다.
약간의 축의 값은 균형이 없지만, 먼저 나타낼 수 있다.

다음: 테이블에 입력한 값을 차트에 반영합니다.

예상된 프로그램이 표에 todo 목록의 중요성과 긴급도를 입력하여 도표에 표시하기 때문에 표를 만들어서 도표에 반영하고 싶습니다.이 때 탭도 표시해야 합니다.
나는 todo 명단 부분의 rails가 매우 휘감겨 있다고 생각한다. 이후에 하고 싶다.
그럼 다음 업데이트까지^^여자 배역