vue-c3 종류로 도표를 그리다

왜 그래프를 그려요?

나는 모두가 도표를 그리기 위해 고민하고 있다고 생각한다.

생SVG로 전체 스크래치.

다음 글은 Vue+생의 SVG로 실시되고 있습니다.( Vue.js D3에 있습니다.도표를 실현하기 위해 js를 사용하지 않습니다 )
SVG 사용의 장점에 대해서는 "맞춤형 편의성과 D3 등 프로그램 라이브러리는 DOM을 직접 변경하지 않고 테스트도 쉽다"고 설명했다.
확실히 SVG로 실시하면 이 글을 참조하는 것이 그리 어렵지 않을 것이다(그리고 문장이 매우 섬세하고 어려운 부분도 잘 제거할 수 있다). 아무리 복잡한 도표라도 실현할 수 있다는 의미에서 전방 엔지니어라면 도전적인 가치가 있다고 생각한다.

C3.js + Vue = vue-c3

C3는 D3을 기반으로 도표를 그리는 프로그램 라이브러리로 D3보다 적은 코드를 쓰는 도표를 만들 수 있다.일반적인 도표라면 따라잡을 수 있을 거예요.
vue-c3은 C3을 Vue 구성 요소로 설치할 수 있습니다.
이거 괜찮은 것 같아.확실히 사용해 본 느낌인데 흐트러지지 않아요.

이루어지다

(CSS에 대한 읽기에 관해서는 이 글을 참고하였습니다. 감사합니다.https://qiita.com/maunamoana/items/e5da5e338a45a35524b8
다음 코드는 설치 결과입니다.
https://codesandbox.io/s/w026o6xy7l?module=%2Fsrc%2FApp.vue
요점
- 주요 구성 요소는 <vue-c3/>- handler라는 이름으로 이걸 줘
- 전달은 new Vue()에서 생성됨
- 이에 대해 C3의 API를 this.handler.$emit('dispatch', chart => chart.load()) 형식으로 수행
- 수행할 API, 전달할 값 등은 C3 설명서를 참조하십시오.

<template>
  <div>
    <vue-c3 :handler="handler"></vue-c3>
  </div>
</template>
<script>
// hander のために必要
import Vue from 'vue'

// メインのコンポーネント
import VueC3 from 'vue-c3'

// CSS を読み込む
import 'c3/c3.min.css'

export default {
  name: 'demo',
  components: {
    VueC3
  },
  data: () => ({
    // vue-c3 コンポーネントを操作するためのもの
    handler: new Vue(),
  })
}
</script>

this.handler.$emit('dispatch', chart => {
   const options = {...} // もろもろ作る
   chart.load(options)
})

this.handler.$emit('init', this.options)

우선 이것을 실행해서 도표를 만들자.아마도 C3 방면에서 말한 Generate를 실행하고 있을 것이다.( https://c3js.org/gettingstarted.html#generate )
그래프를 업데이트할 필요가 없다면 이때 제출한 옵션만 지정하면 예쁜 그래프가 만들어집니다.

this.handler.$emit('dispatch', chart => chart.load(options))

dispatch emit는 C3의 다양한 API를 두드릴 때 사용됩니다.이렇게 하면 모든 API가 맞을 것이다.
예를 들어, 데이터를 업데이트하려면 load용 API를 입력합니다.https://c3js.org/gettingstarted.html#api

tooltip

쓸 데이터를 마우스로 눌렀을 때tooltip이 표시됩니다.이 내용도 설정을 통해 변경할 수 있다.

이번에는'억엔'과'기'단위로 이뤄졌다.이렇게 간단한 처리뿐만 아니라format을 사용하면 각종 처리를 할 수 있다.

총결산

그렇게 빨리 벗지 않으니까 제일 좋아요.