Vue 輕量級圖表組件

當遇到需要在網頁上繪製圖表的場景時，一般會使用兩個函式庫：D3.js 和 Chart.js 。但其實你根本不需要這麼重量級的函式庫。有時候你只希望使用簡單的 SVG 圖表就能滿足你的需求，這時候你可以使用 Frappe Charts 。它是一個能提供全功能、互動式動畫的輕量級圖表，並配合上簡單的組件包裝器，你就可以與 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教學》

以上是Vue 輕量級圖表組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！