Biểu đồ Vue.js với vue2-frappe
Khi nói đến biểu đồ trên web, có hai yếu tố chính: D3.js và Chart.js . Nhưng đôi khi bạn không cần một con khỉ đột nặng 500 pound. Đôi khi bạn chỉ muốn các biểu đồ SVG đơn giản thực hiện chính xác những gì bạn mong đợi. Đó là nơi Frappe Charts phù hợp. Đó là một thư viện JS nhỏ, vani cung cấp các biểu đồ SVG tương tác, động, đầy đủ tính năng. Và với một shell bọc thành phần đơn giản, bạn có thể sử dụng nó với Vue.js!
Bắt đầu
Bắt đầu bằng cách cài đặt vue2-frappe . (Tôi giả sử bạn đã có một dự án Vue.js đang chạy và chạy.)
$ npm install --save vue2-frappe Tiếp theo, kích hoạt plugin. (Tất cả những gì nó làm là đăng ký thành phần.)
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) }); Lập biểu đồ
vue2-frappe là một shell bọc đơn giản cho Biểu đồ Frappe, chỉ đơn giản là cung cấp các tùy chọn cấu hình cho frappe dưới dạng thuộc tính thành phần. Bạn có thể trực tiếp sử dụng tài liệu của Frappe Chart bằng cách thay đổi các khóa tùy chọn cấp cao nhất thành các ràng buộc thuộc tính Vue.js.
<template> <div id="app"> <h2>Chart: Benedict's Weight</h2> <!-- id - Every chart must have an id. --> <!-- title - The title displayed on the chart --> <!-- type - The type of chart: line, bar, percent, pie, or axis-mixed. --> <!-- labels - Names for each value on the x-axis. --> <!-- height- Optional: How tall the chart should be. --> <!-- colors - Separate colors for each dataset. --> <!-- lineOptions - Additional options for how to display line charts. See docs. --> <!-- datasets - An array of objects containing names and values for each data set. --> <vue-frappe id="my-chart-id" title="Benedict's Weight From 2017-2018 (lbs)" type="line" :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']" :height="650" :colors="['#008F68', '#FAE042']" :lineOptions="{regionFill: 1}" :datasets="[ {name: '2017', values: benedictsWeight2017}, {name: '2018', values: benedictsWeight2018} ]" ></vue-frappe> <p>Conclusion: Benedict needs to go on a diet.</p> </div> </template> <script> export default { name: 'app', 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> Ở trên sẽ dẫn đến một biểu đồ như bên dưới:
Và đó chỉ là sự khởi đầu. Frappe Charts hỗ trợ nhiều loại biểu đồ khác - biểu đồ hình tròn, biểu đồ thanh, biểu đồ phần trăm, bản đồ nhiệt và biểu đồ đường và biểu đồ hỗn hợp nâng cao. Hãy xem tài liệu của họ!
Các tin liên quan
