Skip to content

Commit 6d19370

Browse files
committed
Add Russian documentation
1 parent c9bc36e commit 6d19370

File tree

2 files changed

+290
-0
lines changed

2 files changed

+290
-0
lines changed

docs/assets/scatter.png

42.6 KB
Loading

docs/ru/README.md

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<div align="center">
2+
<img width="256" heigth="256" src="../../assets/vue-chartjs.png" alt="vue-chartjs logo">
3+
</div>
4+
5+
[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
6+
[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
7+
[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
8+
[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
9+
[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
10+
[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
11+
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
12+
[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
13+
14+
# vue-chartjs
15+
16+
**vue-chartjs** обертка для [Chart.js](https://github.com/chartjs/Chart.js) в vue. Вы можете с легкостью создавать многоразовые компоненты диаграмм.
17+
18+
## Демо & Документация
19+
20+
- 📺 [Demo](http://demo.vue-chartjs.org/)
21+
- 📖 [Docs](http://www.vue-chartjs.org/)
22+
23+
### Совместимость
24+
25+
- v1 later `@legacy`
26+
- Vue.js 1.x
27+
- v2 later
28+
- Vue.js 2.x
29+
30+
После филнального выпуска vue.js 2, вы получите v2 по умолчанию, если установите vue-chartjs через npm.
31+
Больше нет необходимости в @next теге. Если вы нуждаетесь в v1, вам необходимо указать версию или использовать legacy тег.
32+
Если вы ищите v1, проверьте эту [ветку](https://github.com/apertureless/vue-chartjs/tree/release/1.x).
33+
34+
## Установка
35+
36+
Просто выполните `yarn add vue-chartjs chart.js`
37+
38+
В случаи если вы хотите использовать библиотеку прямо в браузере, добавьте
39+
40+
```html
41+
<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.full.min.js"></script>
42+
```
43+
в ваши скрипты. Смотрите [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
44+
45+
## Описание различий сборок
46+
47+
Существует три различные точки входа. Это зависит от того, какая сборка стоит у вас. Зависимости собираются или подключаются как peerDependency.
48+
49+
- Browser
50+
- Browserify / Webpack 1
51+
- Webpack 2
52+
53+
54+
| Build | Chart.js | Vue.js |
55+
|---|---|---|
56+
| vue-chartjs.full.js | Bundled | Bundled |
57+
| vue-chartjs.full.min.js | Bundled | Bundled |
58+
| vue-chartjs.js | peerDependency | peerDependency |
59+
| vue-chartjs.min.js | peerDependency | peerDependency |
60+
| es/index* | peerDependency | peerDependency |
61+
62+
### Браузер
63+
Вы можете использовать `vue-chartjs` прямо в браузере без установки каких-либо сборок. Пример на [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). В этом случаи, пожалуйста, используйте `vue-chartjs.full.min.js`. Это минифицированноая версиея библиотеки, содержащая Vue.js и Chart.js в себе, с возможностью подключения при помощи UMD Module. Таким образом, вам необходим лишь один файл.
64+
65+
66+
### Browserify / Webpack 1
67+
68+
Если вы используете Gulp, Browserify или Webpack 1, входная точка находится в `vue-chartjs.js`. Она __транслируется__ и __собирается__ при помощи UMD Module.
69+
70+
Однако Vue.js и Chart.js является `peerDependencies`, поэтому вы можете устанавливать их отдельно. В большинстве проектов вы в любом случаи будете иметь установленный `Vue.js`. В этом случаи, вы можете иметь различные версии Vue.js и Chart.js.
71+
72+
### Webpack 2
73+
Если вы используете Webpack 2, он будет автоматически использовать `jsnext:main` / `module` в качестве входной точки, которая расположена в `es/index.js`.
74+
Это транслированная es версия кода, которая не __собирается__ в модуль. Таким образом, three shaking будет работать.
75+
Как и в собранной версии, `Vue.js` и `Chart.js` являются `peerDependencies` и не нуждаются в установке.
76+
77+
78+
## Как использовать
79+
80+
Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource.
81+
82+
Вы можете импортировать весь проект или каждый модуль по отдельности.
83+
84+
```javascript
85+
import VueCharts from 'vue-chartjs'
86+
import { Bar, Line } from 'vue-chartjs'
87+
```
88+
89+
Просто создайте ваш собственный компонент.
90+
91+
```javascript
92+
// CommitChart.js
93+
import { Bar } from 'vue-chartjs'
94+
95+
export default Bar.extend({
96+
mounted () {
97+
// Переопределение базового рендер метода с реальными данными.
98+
this.renderChart({
99+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
100+
datasets: [
101+
{
102+
label: 'GitHub Commits',
103+
backgroundColor: '#f87979',
104+
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
105+
}
106+
]
107+
})
108+
}
109+
})
110+
```
111+
112+
Затем просто импортируйте и используйте ваши собственные расширенные компоненты как обычные vue компоненты.
113+
114+
```javascript
115+
import CommitChart from 'path/to/component/CommitChart'
116+
```
117+
118+
## Другой пример с options
119+
120+
Вы можете переопределить стандартные опции графика. Просто передайте объект с опциями в качестве второго параметра в рендер метод.
121+
122+
```javascript
123+
// MonthlyIncome.js
124+
import { Line } from 'vue-chartjs'
125+
126+
export default Line.extend({
127+
props: ['data', 'options'],
128+
mounted () {
129+
this.renderChart(this.data, this.options)
130+
}
131+
})
132+
```
133+
134+
Используйте это в вашем vue приложении
135+
136+
```javascript
137+
import MonthlyIncome from 'path/to/component/MonthlyIncome'
138+
139+
<template>
140+
<monthly-income :data={....} />
141+
</template>
142+
143+
<script>
144+
export default {
145+
components: { MonthlyIncome },
146+
....
147+
}
148+
</script>
149+
```
150+
151+
## Реактивность
152+
153+
Chart.js не обновляет и не перерисовывает диаграмму при передаче новых данных.
154+
Впрочем, вы можете реализовать это самостоятельно или использовав один из двух подключенных миксинов:
155+
156+
- `reactiveProp`
157+
- `reactiveData`
158+
159+
Оба включены в `mixins` модуль.
160+
161+
Миксины автоматически создают `chartData` в виде prop или data. И добавляют watcher. Если данные были измененны, график обновится.
162+
Но помните про ограничение vue и javascript на изменений массивов и объектов. Больше информации можно получить [здесь](http://vue-chartjs.org/#/home?id=reactive-data)
163+
164+
```javascript
165+
// MonthlyIncome.js
166+
import { Line, mixins } from 'vue-chartjs'
167+
168+
export default Line.extend({
169+
mixins: [mixins.reactiveProp],
170+
props: ['chartData', 'options'],
171+
mounted () {
172+
this.renderChart(this.chartData, this.options)
173+
}
174+
})
175+
176+
```
177+
178+
### Mixins модуль
179+
Модуль `mixins` включен в `VueCharts`, а также доступен в виде отдельного модуля.
180+
Несколько способов импортировать их:
181+
182+
```javascript
183+
// Load complete module with all charts
184+
import VueCharts from 'vue-chartjs'
185+
186+
export default VueCharts.Line.extend({
187+
mixins: [VueCharts.mixins.reactiveProp],
188+
props: ['chartData', 'options'],
189+
mounted () {
190+
this.renderChart(this.chartData, this.options)
191+
}
192+
})
193+
```
194+
195+
```javascript
196+
// Load speperate modules
197+
import { Line, mixins } from 'vue-chartjs'
198+
199+
export default Line.extend({
200+
mixins: [mixins.reactiveProp],
201+
props: ['chartData', 'options'],
202+
mounted () {
203+
this.renderChart(this.chartData, this.options)
204+
}
205+
})
206+
```
207+
208+
```javascript
209+
// Load speperate modules with destructure assign
210+
import { Line, mixins } from 'vue-chartjs'
211+
const { reactiveProp } = mixins
212+
213+
export default Line.extend({
214+
mixins: [reactiveProp],
215+
props: ['chartData', 'options'],
216+
mounted () {
217+
this.renderChart(this.chartData, this.options)
218+
}
219+
})
220+
```
221+
222+
## Доступные диаграммы
223+
224+
### Bar Chart
225+
226+
![Bar](../assets/bar.png)
227+
228+
### Line Chart
229+
230+
![Line](../assets/line.png)
231+
232+
### Doughnut
233+
234+
![Doughnut](../assets/doughnut.png)
235+
236+
### Pie
237+
238+
![Pie](../assets/pie.png)
239+
240+
### Radar
241+
242+
![Pie](../assets/radar.png)
243+
244+
### Polar Area
245+
246+
![Pie](../assets/polar.png)
247+
248+
### Bubble
249+
250+
![Bubble](../assets/bubble.png)
251+
252+
### Scatter
253+
254+
![Scatter](../assets/scatter.png)
255+
256+
## Настройка сборки
257+
258+
``` bash
259+
# инициализация зависимостей
260+
npm install
261+
262+
# сборка с горячей заменой на localhost:8080
263+
npm run dev
264+
265+
# сборка для production с минификацией
266+
npm run build
267+
268+
# запуск unit тестов
269+
npm run unit
270+
271+
# запуск e2e тестов
272+
npm run e2e
273+
274+
# запуск всех тестов
275+
npm test
276+
```
277+
278+
Для детальных объяснений того, как это работает, перейдите в [руководство](http://vuejs-templates.github.io/webpack/) и [документацию для vue-loader](http://vuejs.github.io/vue-loader).
279+
280+
## Contributing
281+
282+
1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
283+
2. Create your feature branch (`git checkout -b my-new-feature`)
284+
3. Commit your changes (`git commit -am 'Add some feature'`)
285+
4. Push to the branch (`git push origin my-new-feature`)
286+
5. Create a new Pull Request
287+
288+
## License
289+
290+
This software is distributed under [MIT license](LICENSE.txt).

0 commit comments

Comments
 (0)