+
+
+
+
+
+```
+
+::: danger Ограничения Vue по мутации массивов и объектов
+
+[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)
+[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)
+[vm.$watch](https://vuejs.org/v2/api/#vm-watch)
+
+:::
+
+
+### События
+
+Реактивные миксины вызывают события при изменении данных. Вы можете прослушивать их при помощи `v:on` на графике-компоненте. Доступны следующие события:
+
+- `chart:render` - если миксин выполняет полную перерисовку графика
+- `chart:destroy` - если миксин удаляет объект графика
+- `chart:update` - если миксин совершает обновление вместо полной перерисовки
+- `labels:update` - если были установлены новые метки
+- `xlabels:update` - если новые метки были установлены по оси x
+- `ylabels:update` - если новые метки были установлены по оси y
+
+
+### Отлов ошибок
+
+Система реактивности в её текущем состоянии **незрелая**. Вы столкнётесь с некоторыми проблемами с ней, так как существует множество путей использования и путей передачи ваших данных.
+
+#### Опции
+
+Объект `options` на данный момент не является реактивным. Если вы хотите динамически измените опции графика, это не будет распозно миксином.
+
+Если вы используете миксин, вам нужно передать опции как свойство `options`. Это важно, так как миксин вызовет метод `update()` из chart.js или уничтожит старый и отрисует новый график. Если миксин отрисовывает новый график, он вызывает `this.renderChart(this.chartData, this.options)`.
+
+Но если вы передаёте опции напрямую в вашем хуке `mounted()`, они теряются.
+
+::: danger Неправильно
+```js {7}
+import { Line, mixins } from 'vue-chartjs'
+
+export default {
+ components: { Line }
+ mixins: [mixins.reactiveProp],
+ mounted () {
+ this.renderChart(this.chartData, {responsive: true})
+ }
+}
+```
+:::
+
+::: tip Правильно
+```js {7}
+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 выглядит так:
+
+```js
+watch: {
+ chartData () {
+ this.$data._chart.update()
+ }
+}
+```
+
+## Примеры
+
+### Графики со свойствами
+
+Вашей целью должно быть создание переиспользуемых компонентов-графиков. Для этой цели, вам необходимо использовать свойства Vue.js для передачи опций и данных для графика. Таким образом, график сам по себе не занимается стягиванием данных, а только их отображением.
+
+В первую очередь, создайте свой компонент:
+
+```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)
+ }
+}
+```
+
+После этого добавьте свой график-компонент в родительский компонент:
+
+```js
+
+```
+
+### График с локальными данными
+
+Вы можете передать данные напрямую в ваш график-компонент. Для этого просто передайте его в метод `renderChart()`:
+
+```js
+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**
+
+```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)
+ }
+}
+```
+
+Далее создавайте компонент-контейнер, который занимается API-вызовами или vuex-соединением:
+
+**ChartContainer.vue**
+
+```html {4}
+
+
+
+
+
+
+
+```
+
+### График с динамическими стилями
+
+Вы можете установить `responsive: true` и передать объект стилей, который будет применён как встроенный стиль для внешнего блока div. Таким образом вы можете динамически изменять высоту и ширину внешнего контейнера, что не является поведением по умолчанию для chart.js. Лучше всего использовать для этого вычисляемые параметры.
+
+::: warning
+ Вам необходимо установить `position: relative`
+:::
+
+```html
+
+
+
+
+
+
+
+
+```
+
+### Настраиваемые / новые графики
+
+Иногда вам нужно расширить обычные графики Chart.js. Существует множество [примеров](http://www.chartjs.org/docs/latest/developers/charts.html), как расширить или модифицировать графики по умолчанию, или создать собственный тип графика.
+
+В `vue-chartjs`, вы можете сделать это практически таким же путём:
+
+```js
+// 1. Импортируйте Chart.js, чтобы использовать глобальный объект Chart
+import Chart from 'chart.js'
+// 2. Импортируйте метод `generateChart()` для создания компонента vue
+import { generateChart } from 'vue-chartjs'
+
+// 3. Расширьте один из графиков по умолчанию
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.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-chartjs
+
+export default {
+ extends: CustomLine,
+ mounted () {
+ // ....
+ }
+}
+```
+
+## Ресурсы
+
+Вас могут также заинтересовать руководства по использованию `vue-chartjs` на других ресурсах:
+
+- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
+- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
+- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
+- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)