vue-chartjs - это обёртка для Chart.js на Vue. Вы можете леко создать переиспользуемые компоненты-графики.
Вступление #
vue-chartjs позволяет вам использовать Chart.js без излишнего шаманства с Vue. Идеально для людей, которые просто хотят получить работающие графики как можно быстрее.
Бизнес-логика абстрагируется, зато предоставляется доступ к объектам Chart.js для получения максимальной гибкости.
Установка #
NPM #
Вы можете установить vue-chartjs посредством npm. Однако, вам также нужно добавить chart.js как зависимость для вашего проекта. Потому, что Chart.js - это peerDependency. Таким образом вы получите полный контроль над версионированием Chart.js.
Установка посредством npm: npm install vue-chartjs chart.js --save
TIP
Если вы используете vue 1.x пожалуйста, используйте тег legacy. Однако, помните, что Vue версии 1 больше не поддерживается.
yarn add vue-chartjs@legacy
YARN #
Установка посредством yarn: yarn add vue-chartjs chart.js
Браузер #
Вы также можете использовать vue-chartjs прямо в браузере. Для этого сначала добавьте скрипт Vue, если он ещё не загружен, потом - скрипт Chart.js, а после него - минимизированную версию скрипта vue-chartjs.
<script src="https://unpkg.com/vue"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script><script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>Дальше вы можете просто зарегистрировать свой компонент:
Vue.component('line-chart', { extends: VueChartJs.Line, mounted () { this.renderChart({ labels: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], datasets: [ { label: 'Коммиты на GitHub', backgroundColor: '#f87979', data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] } ] }, {responsive: true, maintainAspectRatio: false}) }})Интеграция #
Каждый тип графика, доступный в Chart.js, экспортируется как именованый компонент и может быть импортирован как таковой. Эти компоненты - нормальные Vue-компоненты, однако вам необходимо расширять их.
Идея, стоящая за vue-chart.js, состоит в том, чтобы предоставить простые в использовании компоненты, с максимумом гибкости и расширяемости. Для достижения этого, вам нужно создать ваш собственный график-компонент и расширить его предоставленными vue-chart.js компонентами.
Таким образом, методы и логика графиков-компонентов включается в ваш график-компонент.
Создание вашего первого графика #
Вам необходимо импортировать базовый компонент, а затем расширить его. Это даёт больше гибкости при работе с различными данными. Однако, ваш компонент не может быть переиспользован таким образом.
Вы можете импортировать весь пакет или каждый модуль отдельно. Потом вам нужно использовать extends: или mixins:[]. Далее, в хуке mounted(), вызовите this.renderChart(). Это создаст экземпляр вашего объекта.
import { Bar } from 'vue-chartjs'export default { extends: Bar, mounted () { this.renderChart(data, options) }}TIP
Вы можете использовать или extends: Bar или mixins: [Bar]
Метод this.renderChart() предоставляется компонентом Bar и принимает два параметра. Об являются objects. Первый используется для данных вашего графика, а второй - как объект опций.
Со структурой этих объектов можете ознакомиться в официальной документации Chart.js
Однофайловые компоненты Vue #
Большинство примеров в документации базируется на javascript-файлах, а не на .vue файлах. Причиной этому является то, что в большинстве случаев вам понадобится только блок <script>. Однако, вы можете использовать и .vue файлы.
Chart.vue
<script>import { Line } from 'vue-chartjs'export default { extends: Line, props: ['chartdata', 'options'], mounted () { this.renderChart(this.chartdata, this.options) }}</script><style></style>Template-теги не объединяются
Не включайте тег <template></template> в ваши .vue файлы компонентов. Vue не может объединять шаблоны. И шаблон включается в миксин. Если вы добавите пустой тег шаблона в вашем компоненте, он перезапишет тот, который приходит из базового графика, и вы получите пустой экран.
Обновление графиков #
Chart.js не обновляет и не перерисовывает график если новые данные были переданы. Однако, вы можете просто реализовать это сами или использовать один из двух уже реализованных миксинов:
reactivePropreactiveData
Оба включены в модуль mixins и оба преследуют одну цель. В большинстве случаев вы будете использовать reactiveProp. Этот миксин расширяет логику вашего графика-компонента и автоматически создаёт свойства chartData и автоматически добавляет vue watch на это свойство. При изменении данных, он или вызовет update(), если изменились только данные внутри уже существующих datasets, или renderChart(), если были добавлены новые наборы данных.
reactiveData просто создаёт локальную переменную chartData (которая не является свойством!) и добавляет watcher. Это полезно только в том случае, если вам необходимы одноцелевые графики и вы совершаете API-вызовы внутри ваших графиков-компонентов.
Пример #
LineChart.js
import { Line, mixins } from 'vue-chartjs'const { reactiveProp } = mixinsexport default { extends: Line, mixins: [reactiveProp], props: ['options'], mounted () { // this.chartData создаётся внутри миксина. // Если вы хотите передать опции, создайте локальный объект options this.renderChart(this.chartData, this.options) }}RandomChart.vue
<template> <div class="small"> <line-chart :chart-data="datacollection"></line-chart> <button @click="fillData()">Randomize</button> </div></template><script> import LineChart from './LineChart.js' export default { components: { LineChart }, data () { return { datacollection: null } }, mounted () { this.fillData() }, methods: { fillData () { this.datacollection = { labels: [this.getRandomInt(), this.getRandomInt()], datasets: [ { label: 'Data One', backgroundColor: '#f87979', data: [this.getRandomInt(), this.getRandomInt()] }, { label: 'Data One', backgroundColor: '#f87979', data: [this.getRandomInt(), this.getRandomInt()] } ] } }, getRandomInt () { return Math.floor(Math.random() * (50 - 5 + 1)) + 5 } } }</script><style> .small { max-width: 600px; margin: 150px auto; }</style>Ограничения Vue по мутации массивов и объектов
События #
Реактивные миксины вызывают события при изменении данных. Вы можете прослушивать их при помощи v:on на графике-компоненте. Доступны следующие события:
chart:render- если миксин выполняет полную перерисовку графикаchart:destroy- если миксин удаляет объект графикаchart:update- если миксин совершает обновление вместо полной перерисовкиlabels:update- если были установлены новые меткиxlabels:update- если новые метки были установлены по оси xylabels:update- если новые метки были установлены по оси y
Отлов ошибок #
Система реактивности в её текущем состоянии незрелая. Вы столкнётесь с некоторыми проблемами с ней, так как существует множество путей использования и путей передачи ваших данных.
Опции #
Объект options на данный момент не является реактивным. Если вы хотите динамически измените опции графика, это не будет распозно миксином.
Если вы используете миксин, вам нужно передать опции как свойство options. Это важно, так как миксин вызовет метод update() из chart.js или уничтожит старый и отрисует новый график. Если миксин отрисовывает новый график, он вызывает this.renderChart(this.chartData, this.options).
Но если вы передаёте опции напрямую в вашем хуке mounted(), они теряются.
Неправильно
import { Line, mixins } from 'vue-chartjs'export default { components: { Line } mixins: [mixins.reactiveProp], mounted () { this.renderChart(this.chartData, {responsive: true}) }}Правильно
import { Line, mixins } from 'vue-chartjs'export default { components: { Line } mixins: [mixins.reactiveProp], mounted () { this.renderChart(this.chartData, this.options) }}Собственный watcher #
Если вы часто преобразуете или изменяете данные (вместо передачи новых данных), вам лучше реализовать свой собственный watcher. Вы можете самостоятельно вызвать this.$data._chart.update() или this.renderChart(), в зависимости от ваших потребностей.
Простой watcher выглядит так:
watch: { chartData () { this.$data._chart.update() }}Примеры #
Графики со свойствами #
Вашей целью должно быть создание переиспользуемых компонентов-графиков. Для этой цели, вам необходимо использовать свойства Vue.js для передачи опций и данных для графика. Таким образом, график сам по себе не занимается стягиванием данных, а только их отображением.
В первую очередь, создайте свой компонент:
import { Line } from 'vue-chartjs'export default { extends: Line, props: { chartdata: { type: Object, default: null }, options: { type: Object, default: null } }, mounted () { this.renderChart(this.chartdata, this.options) }}После этого добавьте свой график-компонент в родительский компонент:
<line-chart :chartdata="chartData" :options="chartOptions"/>График с локальными данными #
Вы можете передать данные напрямую в ваш график-компонент. Для этого просто передайте его в метод renderChart():
import { Bar } from 'vue-chartjs'export default { extends: Bar, data: () => ({ chartdata: { labels: ['Январь', 'Февраль'], datasets: [ { label: 'Данные 1', backgroundColor: '#f87979', data: [40, 20] } ] }, options: { responsive: true, maintainAspectRatio: false } }), mounted () { this.renderChart(this.chartdata, this.options) }}График с данными с API #
Популярной моделью использования является запрос данных с API. Однако, необходимо кое-что запомнить. Самой частой проблемой является то, что вы встраиваете график-компонент напрямую и передаёте ему данные из асинхронного API-вызова. Проблема с этим подходом состоит в том, что график отрисовывается ранее, чем приходят данные из асинхронного API-вызова.
Лучшее решение для предупреждения таких ситуаций - это использование v-if.
Создавайте ваш график-компонент со свойствами данных и опций, чтобы вы могли передать их через компонент-контейнер:
Chart.vue
import { Line } from 'vue-chartjs'export default { extends: Line, props: { chartdata: { type: Object, default: null }, options: { type: Object, default: null } }, mounted () { this.renderChart(this.chartdata, this.options) }}Далее создавайте компонент-контейнер, который занимается API-вызовами или vuex-соединением:
ChartContainer.vue
<template> <div class="container"> <line-chart v-if="loaded" :chartdata="chartdata" :options="options"/> </div></template><script>import LineChart from './Chart.vue'export default { name: 'LineChartContainer', components: { LineChart }, data: () => ({ loaded: false, chartdata: null }), async mounted () { this.loaded = false try { const { userlist } = await fetch('/api/userlist') this.chartdata = userlist this.loaded = true } catch (e) { console.error(e) } }}</script>График с динамическими стилями #
Вы можете установить responsive: true и передать объект стилей, который будет применён как встроенный стиль для внешнего блока div. Таким образом вы можете динамически изменять высоту и ширину внешнего контейнера, что не является поведением по умолчанию для chart.js. Лучше всего использовать для этого вычисляемые параметры.
WARNING
Вам необходимо установить position: relative
<template> <div> <line-chart :styles="myStyles"/> <button @click="increase()">Increase height</button> </div></template><script>export default { data () { return { height: 300 } }, methods: { increase () { this.height += 10 } }, computed: { myStyles () { return { height: `${this.height}px`, position: 'relative' } } }}</script>Настраиваемые / новые графики #
Иногда вам нужно расширить обычные графики Chart.js. Существует множество примеров, как расширить или модифицировать графики по умолчанию, или создать собственный тип графика.
В vue-chartjs, вы можете сделать это практически таким же путём:
// 1. Импортируйте Chart.js, чтобы использовать глобальный объект Chartimport Chart from 'chart.js'// 2. Импортируйте метод `generateChart()` для создания компонента vueimport { generateChart } from 'vue-chartjs'// 3. Расширьте один из графиков по умолчанию// http://www.chartjs.org/docs/latest/developers/charts.htmlChart.defaults.LineWithLine = Chart.defaults.line;Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* ваши расширения */})// 4. Сгенерируйте компонент vue-chartjs// Первый аргумент - это chart-id, второй - типа графикаconst CustomLine = generateChart('custom-line', 'LineWithLine')// 5. Расширьте компонент CustomLine так же, как вы это делаете с обычными графиками vue-chartjsexport default { extends: CustomLine, mounted () { // .... }}Ресурсы #
Вас могут также заинтересовать руководства по использованию vue-chartjs на других ресурсах:
FAQs
Is Chart JS compatible with Vue? ›
You can install vue-chartjs over yarn or npm or pnpm . However, you also need to add chart. js as a dependency to your project because Chart. js is a peerDependency.
What are the components of a Vue chart? ›Vue Chart Component lets you add interactive Charts & Graphs to your Vue. js applications. Library comes bundled with 30+ chart types including line, column, area, bar, pie, candlestick, etc. It also comes with plenty of features & customizations to suit your application's needs.
How to set up chartjs? ›- Method 1 − Using NPM. You can use NPM to install Chart.js. ...
- Method 2 − Using a CDN. Using a CDN to install and use Chart. ...
- Method 3 − Using GitHub. You can use GitHub to download the latest version of the chart. ...
- Method 4 − Using jsDelivr. You can also use jsDelivr to download the latest version of the chart.
js applications. But the main focus for 2023, he said, will continue to be making Vue 3 stable. Even though Vue 3 became the new default last February, one year ago, Vue 2 is still being used by what You termed “legacy projects.” He noted that much of the adoption of Vue 3 has been by “new projects.”
Which database is best for Vue? ›A central feature of Firebase is the realtime database. By using the Firebase API the realtime database can be used to store and sync data across multiple clients and platforms. The Firebase website is available at: https://firebase.google.com/. Firebase is a perfect match for Vue.
How to use Vue chart 3? ›- Simple. Simply import the chart component you want and use it out of the box.
- Typescript safety. All props are linked to Chart.js types (with Volar)
- Versatile. Works with both Vue 2 and Vue 3 with the power of vue-demi.
- Add the following HTML to your webpage: <div id="components-demo"> <map-component></map-component> </div> ...
- Add the following JavaScript to initiate Vue.js and create your map component:
The name of the framework – Vue – is the same phonetically in English as view, and it corresponds to the traditional Model-View-Controller (MVC) architecture. Simply put, a view is a UI of an application/website, and the core library of Vue. js focuses on the view layer by default. In its current form, Vue.
How do I create a data table in Vue? ›- Step 1: Create Vue Project.
- Step 2: Install Datatables + jQuery + Bootstrap Packages/li>
- Step 3: Install Axios Library.
- Step 4: Create jQuery DataTable Component.
- Step 5: Register DataTable Component.
- Step 6: Run Vue Application.
Chart.js is an free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the following built-in chart types: Scatter Plot. Line Chart.
How to show data in chartjs? ›
If you want to show data values labels on Chart. js, then you can use the chartjs-plugin-datalabels. This will display values on the chart on top or bottom of the chart area. Note that we have added chartjs-plugin-datalabels library to show data labels.
Can Chart JS be used offline? ›Open-source free library − Chart. js is a free open-source community-maintained library which you can use either in offline or online mode.
Does Netflix use VueJS? ›Some of the major global websites using Vue. js are Facebook, Netflix, and Adobe.
Should I learn Vue or React 2023? ›Overall, Vue enables faster project growth and performance, but React. js has a more robust ecosystem, more templates, and more functionality. This is why teams on smaller projects where performance is crucial choose Vue, whereas React is better suited to complex web platforms.
Does Netflix use Vue or React? ›React has a much larger user base and community support, and many popular websites and applications are built with React, such as Facebook, Instagram, Airbnb, and Netflix. However, this does not necessarily mean that React is always the better choice than Vue.
Do companies use Vue JS? ›3806 companies reportedly use Vue. js in their tech stacks, including Glovo, Accenture, and HENNGE K.K..
Why is Vue so popular? ›Vue is an open-source framework and is supported by donations from partners and sponsors. The open-source approach is one of the reasons for the high popularity of Vue among developers, alongside its functionalities and support that make it a strong competitor to Google-run Angular and Facebook's React.
What major companies use Vue? ›- Google. Google Careers.
- Zoom. Sign In - Zoom.
- Microsoft. Microsoft Edge Landing Page.
Easy to learn – Vue. js is intuitive, making it easy to understand and great for beginners thanks to its documentation. All you need to know are the basics of HTML and JavaScript. Easy to scale - The application is easily scalable and can be used to perform a number of local tasks in large projects.
Should I use Vue 2 or 3? ›If you or your team is beginning work on a new Vue development project, Vue 3 should be your default choice. Not only does it offer superior performance than Vue 2 but it's also much simpler to understand. Moreover, its basic syntax is similar to that of Vue 2, meaning making the switch is easy.
Is Vue 3 free? ›
What license does Vue use? Vue is a free and open source project released under the MIT License.
Can you build apps with Vue? ›Vue (Vue. js) is a great programming framework for build single-page applications and front end web app interfaces. On its own, however, it's not a framework for building native mobile apps. There are some workarounds that let you use Vue for Android and iOS apps.
How do I create a simple Vue project? ›Type Ctrl + Q to open the search box, type Basic Vue. js, then choose Basic Vue. js Web application (either JavaScript or TypeScript). In the dialog box that appears, type the name basic-vuejs, and then choose Create.
How to create API in Vue? ›- Create the Basic Skeleton Of a Web Application.
- Create the Basic Vue.js Component.
- Create the Stylesheet for the Vue Component.
- Add API call to Vue.js Component.
- Display API Data In Vue.js Component.
- Styling the Vue.js Component.
Create a Chart
Click the Insert tab. Select a chart type in the Charts group. To see all available chart types click the Charts dialog box launcher. The Insert Chart dialog box appears, displaying every chart type that is available.
It is a lightweight progressive framework, which is easy to learn, extremely flexible, and simple to use. Having 179,253 stars on Github, Vue is one of the most popular Javascript frameworks, surpassing even React and Angular having 163,431 and 70,544 stars each.
Is Vue easier to learn than React? ›Vue, on the other hand, is a little simpler than React, so it may be easier to learn for new programmers. React, on the other hand, has a steeper learning curve and requires more practice before you can truly master it. Despite this, developers generally regard it as an excellent tool that is more flexible than Vue.
Is Google using Vue? ›Nintendo, Louis Vuitton, Adobe, BMW, Upwork, Alibaba, Gitlab, and Xiaomi are all VueJS users. Even Google built their Careers platform based on VueJS and not their native Angular framework, and Apple built their tutorial website with VueJS.
What are 4 types of chart? ›The four most common are probably line graphs, bar graphs and histograms, pie charts, and Cartesian graphs.
What are the 8 types of chart? ›- Column Chart.
- Line Chart.
- Pie Chart.
- Doughnut Chart.
- Bar Chart.
- Area Chart.
- XY (Scatter) Chart.
- Bubble Chart.
What are the 12 basic chart types? ›
- Bar Graph. A bar graph is a graph that presents categorical data with rectangle-shaped bars. ...
- Grouped Bar Graph. ...
- Stacked Bar Graph. ...
- Segmented Bar Graph. ...
- Line Graph. ...
- Multiple Line Graph. ...
- Compound Line Graph. ...
- Pie Chart.
The data option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as $data.
How to display data from array in Vue? ›We can use the v-for directive to render a list of items from an array. In the code above, we have the v-for directive, and then we write person in persons to loop through the data. persons array. Then we get the name property from each entry and display it.
How do I send data on Vue? ›Using Props To Share Data From Parent To Child # VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
What is the fastest js chart? ›JavaScript Charts by SciChart are extremely fast and allow robust, high performance data-visualisation across a number of chart types & scenarios. Learn more about the features and start a trial today by clicking the button below.
What are the advantages of chart JS? ›js - Advantages. Chart. js provides the user 6 different animated views to visualize the data. It provides lots of customization options as well as interactivity extensions.
What is the difference between Chartjs and D3 charts? ›Interactivity also differs between the two libraries, as D3. js offers event listeners, transitions, animations, and tooltips, while Chart. js has hover effects, zooming, panning, and legend toggling capabilities.
How do I add data to my chart? ›Right-click the chart, and then choose Select Data. The Select Data Source dialog box appears on the worksheet that contains the source data for the chart. Leaving the dialog box open, click in the worksheet, and then click and drag to select all the data you want to use for the chart, including the new data series.
How do you read data from a chart? ›- Determine the type of graph. ...
- Read the title or legend. ...
- Examine any other text. ...
- Identify the variables on the axes and what they represent. ...
- Observe the x-axis and y-axis. ...
- Determine what each number on the graph means. ...
- Identify patterns in the data. ...
- Find where your data falls on the graph.
js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie (doughnut), bubble, radar, polar, and scatter.
Can I run js file without HTML? ›
Yes, JavaScript can be used without html. Node is another option. JavaScript was originally a web scripting language until node js was introduced. It is possible to run JavaScript in deno and node runtime.
What is chart JS built on? ›Chart.js renders chart elements on an HTML5 canvas unlike several other, mostly D3.js-based, charting libraries that render as SVG.
What is the compatibility of VueJS? ›Check Browser Compatibility With VueJS
VueJS offers cross-browser compatibility for websites and supports mostly all versions of Firefox, Chrome, Safari, etc. As a result, for testers, it is essential to test the cross browser support for any Vue. js website to ensure a smooth and consistent experience for its users.
Chart.js renders chart elements on an HTML5 canvas unlike several other, mostly D3.js-based, charting libraries that render as SVG.
Can I use Dom in Vue? ›If a ref attribute is added to an HTML element in your Vue template, you'll then be able to reference that element or even a child element in your Vue instance. You can also access the DOM element directly; it is a read-only attribute and returns an object.
Can I use chart JS in Angular? ›js is an open-source cross platform server environment that can run on Windows, Linux, Unix, macOS, and more. It allows us to make use of npm to install libraries like Chart. js into our Angular application.
Is D3 better than Chartjs? ›js uses a data object to define data and labels for each chart. Interactivity also differs between the two libraries, as D3. js offers event listeners, transitions, animations, and tooltips, while Chart. js has hover effects, zooming, panning, and legend toggling capabilities.
What is the difference between d3js and chart JS? ›Chart. js provides a selection of ready to go charts which can be styled and configured while D3 offers building blocks which are combined to create virtually any data visualisation.
Which is better chart JS or HighCharts? ›Chart. js is a much lighter product than HighCharts and doesn't offer quite as much choice. However, its documentation leaves little to be desired.
Does Vue use JSX? ›Starting in 3.3, Vue supports specifying JSX namespace via TypeScript's jsxImportSource option.
What file type is Vue? ›
A VUE (. vue) file is an editable ASCII file. You create a VUE file using the VUE file renderer. A VUE file contains a sequence of frames to render.
Does Vue JS allow two way data binding? ›Vue. js does not allow two-way data binding between parent and child for obvious reasons. Because true two-way binding of props will cause maintenance issues as the child can change the parent data without the source of that change being obvious.
Which charts are better in Angular? ›Line chart
A line graph reveals trends over time and can display a wide range of data. We can use a line chart when plotting a continuous data set. It is the most common chart type used to show trends with large amounts of data.
- ApexCharts. ...
- Highcharts. ...
- Lightweight Charts by TradingView. ...
- Flot. ...
- ngx-charts by Swimlane. ...
- AnyChart. Interactive JavaScript charts. ...
- ZingChart. Declarative, efficient, and simple JavaScript library for building responsive charts. ...
- FusionCharts. JavaScript charts for web & mobile.