Vue 경량 차트 구성요소

웹 페이지에 차트를 그려야 하는 시나리오가 발생하면 일반적으로 D3.js와 Chart.js라는 두 가지 라이브러리가 사용됩니다. 그러나 실제로는 그렇게 무거운 라이브러리가 전혀 필요하지 않습니다. 때때로 귀하의 요구 사항을 충족하기 위해 간단한 SVG 차트를 원할 경우 Frappe 차트를 사용할 수 있습니다. 모든 기능을 갖춘 대화형 애니메이션을 제공하는 경량 차트이며 간단한 구성 요소 래퍼를 통해 Vue.js와 함께 사용할 수 있습니다!

설치 시작

vue2-frappe 구성 요소 설치를 시작합니다. 여기서는 기존 Vue.js 프로젝트에서 작업하고 있다고 가정합니다.

$ npm install --save vue2-frappe

구성 요소를 등록하는 다음 단계:

import Vue from 'vue';
import VueFrappe from 'vue2-frappe';
import App from './App.vue';
Vue.use(VueFrappe);
new Vue({
  el: '#app',
  render: h => h(App)
});

차트 그리기 시작

vue2-frappe는 Frappe Charts를 기반으로 하는 레이어로, 이를 Vue.js에서 사용할 수 있는 구성 요소로 캡슐화합니다. 자세한 사용법은 Frappe Chart 문서를 참조하세요.

<template>
  <div id="app">
    <h2>Chart: Benedict&#39;s Weight</h2>
    <!-- id - 每一个图表必须有一个 id. -->
    <!-- title - 图表上方显示的标题 -->
    <!-- type - 图表的类型 线性图、饼图、条形图、等 -->
    <!-- labels - x 轴上的值 -->
    <!-- height- 可选，图表的高度 -->
    <!-- colors - 将每一个数据集进行颜色区分 -->
    <!-- lineOptions - 线形图的更多选项，请见文档-->
    <!-- datasets - 数据集，对象数组 -->
    <vue-frappe
      id="my-chart-id"
      title="Benedict&#39;s Weight From 2017-2018 (lbs)"
      type="line"
      :labels="[&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;]"
      :height="650"
      :colors="[&#39;#008F68&#39;, &#39;#FAE042&#39;]"
      :lineOptions="{regionFill: 1}"
      :datasets="[
        {name: &#39;2017&#39;, values: benedictsWeight2017},
        {name: &#39;2018&#39;, values: benedictsWeight2018}
      ]"
    ></vue-frappe>
    <p>Conclusion: Benedict needs to go on a diet.</p>
  </div>
</template>
<script>
export default {
  name: &#39;app&#39;,
  data() {
    return {
      benedictsWeight2017: [480, 485, 491, 489, 485, 490, 497, 510, 512, 521, 530, 545],
      benedictsWeight2018: [540, 575, 570, 555, 572, 580, 585, 587, 588, 590, 592, 590]
    }
  }
}
</script>

Frappe Charts는 다음과 같은 다양한 아이콘을 지원합니다. 파이 그래프, 막대 그래프, 축척 그래프, 열 지도 등. 고급 표시 옵션에 대해서는 공식 문서를 참조하세요!

추천 튜토리얼: "JS Tutorial"

위 내용은 Vue 경량 차트 구성요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!