Создание легких диаграмм на vue2-frappe
Development, Java | Комментировать запись
Вы наверняка знаете, что для построения графиков и диаграмм в интернете есть два основных тяжеловесных инструмента: D3.js и Chart.js. Однако слишком тяжелые диаграммы не всегда подходят проекту. Иногда достаточно иметь простые диаграммы SVG, которые делают именно то, что вы ожидаете. Именно в таких ситуациях на сцену выходит Frappe Charts. Это крошечная библиотека JS, которая предоставляет полнофункциональные анимированные интерактивные диаграммы SVG. Кроме того, есть оболочка, при помощи которой ее можно использовать с Vue.js.
Установка vue2-frappe
Примечание: Предполагается, что у вас уже есть запущенный и работающий проект Vue.js.
Начнем с установки vue2-frappe. Для этого используйте команду:
$ 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. Она просто предоставляет параметры конфигурации для frappe в качестве свойств компонента. Теперь мы можем напрямую обратиться к коду из документации Frappe Chart, заменив ключи опций верхнего уровня привязками свойств 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>
Вышеприведенный код выдаст следующий результат:
Как видите, все довольно просто. Frappe Charts поддерживает множество других типов диаграмм — круговые, процентные, гистограммы, тепловые карты, расширенные линейные и смешанные диаграммы. Чтобы узнать об этом больше, загляните в документацию.
Читайте также: Как использовать SVG-иконки в Vue.js
Tags: Vue.js