forked from apertureless/vue-chartjs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- [x] Checkout develop - [x] Run yarn docs:dev or npm run docs:dev - [x] Translate Landingpage /README.md - [x] Translate Guide /guide/README.md - [x] Translate API Reference /api/README.md - [x] Translate config.themeConfig.locales /.vuepress/config.js - [x] Translate config.locales /.vuepress/config.js (description field) - [x] All tests passed
- Loading branch information
Showing
4 changed files
with
653 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,14 @@ | ||
--- | ||
home: true | ||
heroImage: /vue-chartjs.png | ||
actionText: Get Started → | ||
actionLink: /guide/ | ||
actionText: Начать → | ||
actionLink: /ru/guide/ | ||
features: | ||
- title: Easy | ||
details: Easy for both beginners and pros 🙌 | ||
- title: Extendable | ||
details: Simple to use, easy to extend 💪 | ||
- title: Powerful | ||
details: With the full power of chart.js 💯 | ||
- title: Простота | ||
details: Просто как для новичков, так и для профессионалов 🙌 | ||
- title: Расширяемость | ||
details: Просто использовать, легко расширять 💪 | ||
- title: Могущество | ||
details: С полной силой chart.js 💯 | ||
footer: MIT Licensed | Copyright © 2018-present Jakub Juszczak | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
# Справочник | ||
|
||
## Свойства | ||
|
||
Существуют базовые свойства, определённые в компонентах, предоставленных `vue-chartjs`. Так как вы `extend`ите их, они *невидимы*, но вы можете переопределить их: | ||
|
||
| Свойство | Описание | | ||
|---|---| | ||
| width | ширина графика | | ||
| height | высота графика | | ||
| chart-id | id canvas-элемента | | ||
| css-classes | String с классами CSS для родительского элемента div | | ||
| styles | Object со стилями CSS для родительского элемента div | | ||
| plugins | Array с плагинами chartjs | | ||
|
||
## События | ||
|
||
Если миксин `reactiveData` или `reactiveProp` привязан, будут вызываться следующие события: | ||
|
||
| Событие | Описание | | ||
|---|---| | ||
| `chart:render` | если миксин осуществляет полную перерисовку графика | | ||
| `chart:destroy` | если миксин удаляет экземпляр объекта графика | | ||
| `chart:update` | если миксин осуществеляет обновление графика вместо полной перерисовки | | ||
| `labels:update` | если установлены новые метки | | ||
| `xlabels:update` | если установлены новые метки по оси x | | ||
| `ylabels:update` | если установлены новые метки по оси y | | ||
|
||
|
||
## Глобальные методы | ||
Глобальные методы, которые должны быть импортированы | ||
|
||
### generateChart() | ||
|
||
- **Тип:** `Function` | ||
- **Аргументы:**: `chart-id`, `chart-type` | ||
- **Использование:** | ||
|
||
```js | ||
import { generateChart } from 'vue-chartjs' | ||
// First argument is the chart-id, second the chart type. | ||
const CustomLine = generateChart('custom-line', 'LineWithLine') | ||
``` | ||
|
||
## Методы экземпляра | ||
|
||
Методы экземпляра могут быть использованы внутри вашего графика-компонента | ||
|
||
### generateLegend() | ||
|
||
Вспомогательная функция для генерации HTML-легенды | ||
|
||
- **Тип:** `Function` | ||
- **Использование:** | ||
|
||
```js {11} | ||
import { Line } from 'vue-chartjs' | ||
|
||
export default { | ||
extends: Line, | ||
props: ['datasets', 'options'] | ||
data: () => ({ | ||
htmlLegend: null | ||
}) | ||
mounted () { | ||
this.renderChart(this.datasets, this.options) | ||
this.htmlLegend = this.generateLegend() | ||
} | ||
} | ||
|
||
``` | ||
|
||
### addPlugin() | ||
|
||
В Chart.js вы можете определить глобальные и встроенные плагины. Глобальные плагины без проблем работают с `vue-chartjs` как описано в [документации к Chart.js](http://www.chartjs.org/docs/latest/developers/plugins.html). | ||
|
||
Если вы хотите добавить встроенные плагины, `vue-chartjs` предоставляет вспомогательный метод `addPlugin()` | ||
Вам надо вызвать `addPlugin()` перед вызовом метода `renderChart()`. | ||
|
||
- **Тип:** `Function` | ||
- **Аргументы:**: `Array` плагинов | ||
- **Использование:** | ||
|
||
```js | ||
mounted () { | ||
this.addPlugin({ | ||
id: 'my-plugin', | ||
beforeInit: function (chart) { | ||
.... | ||
} | ||
}) | ||
} | ||
``` | ||
|
||
### renderChart() | ||
|
||
Создаёт экземпляр Chart.js и отрисовывает график. | ||
|
||
- **Тип:** `Function` | ||
- **Аргументы:**: `Chart Data`, `Chart Options` | ||
- **Использование:** | ||
|
||
```js | ||
mounted () { | ||
this.renderChart({ | ||
labels: ['Январь', 'Февраль'], | ||
datasets: [ | ||
{ | ||
label: 'Какие-то данные', | ||
backgroundColor: '#f87979', | ||
data: [40, 20] | ||
} | ||
]}, | ||
{ | ||
responsive: true | ||
} | ||
) | ||
} | ||
``` | ||
|
||
## Объект Chart.js | ||
|
||
Вы можете получить доступ к объекту Chart.js из вашего графика-компонента посредством `this.$data._chart` | ||
|
||
## Canvas-элемент | ||
|
||
Вы можете получить доступ к canvas-элементу посредством `this.$refs.canvas` |
Oops, something went wrong.