Skip to content

Commit 85fafd9

Browse files
authored
Merge pull request #163 from dood-/feature-ru-translation
Add Russian documentation
2 parents 60f87e7 + 54d85da commit 85fafd9

File tree

3 files changed

+297
-2
lines changed

3 files changed

+297
-2
lines changed

docs/assets/scatter.png

42.6 KB
Loading

docs/config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ const langs = [
33
{title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
44
{title: '日本語', path: '/ja/', matchPath: /^\/ja/},
55
{title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
6-
{title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/}
6+
{title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
7+
{title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
78
]
89

910
docute.init({
@@ -38,7 +39,7 @@ docute.init({
3839
apiKey: 'b3544f7387612693644777553675d56a',
3940
indexName: 'vue-chartjs',
4041
// algolia docsearch allows you to search with tag filter
41-
tags: ['en', 'de', 'ja', 'pt-br'],
42+
tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
4243
// this plugin does require a url too
4344
// where docsearch fetches contents
4445
url: 'https://vue-chartjs.org'

docs/ru/README.md

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

0 commit comments

Comments
 (0)