mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
47 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
58523d6155 | ||
|
|
b71cd6c2eb | ||
|
|
3fea6f413b | ||
|
|
fcd9071f9a | ||
|
|
37a92813eb | ||
|
|
1260b8aa3b | ||
|
|
644859ce85 | ||
|
|
e4977a6be7 | ||
|
|
41736c840d | ||
|
|
4c37616d00 | ||
|
|
5dc655a47a | ||
|
|
3d291996f6 | ||
|
|
750abb2e88 | ||
|
|
46569a89cb | ||
|
|
932b73a1dc | ||
|
|
0569a9f794 | ||
|
|
154e284528 | ||
|
|
491625b49b | ||
|
|
d26078f08c | ||
|
|
6de69631b3 | ||
|
|
82712948e9 | ||
|
|
9237fa538f | ||
|
|
82c502cf45 | ||
|
676a60a363 | ||
|
|
f60f87c141 | ||
|
|
b7f2bf7db2 | ||
|
|
0e419886b1 | ||
|
f95ea49a19 | ||
|
|
1e392091ea | ||
|
|
4bf4f5736c | ||
|
703a91dafa | ||
|
|
d68af61dce | ||
|
|
0fbdcc10b0 | ||
|
|
ab31dfe727 | ||
|
|
a5b58c3b98 | ||
|
|
85fafd9b58 | ||
|
54d85da955 | ||
|
|
60f87e72ae | ||
|
|
896b7ddfa3 | ||
|
|
6d19370687 | ||
|
|
c9bc36ee59 | ||
|
|
7e52380bd4 | ||
|
|
32229fbfdd | ||
|
|
e0c771f3d3 | ||
|
57cff76747 | ||
|
|
79c138d65a | ||
|
|
64c6cedd74 |
124
CHANGELOG.md
124
CHANGELOG.md
@@ -1,5 +1,129 @@
|
||||
# Change Log
|
||||
|
||||
## [v2.8.5](https://github.com/apertureless/vue-chartjs/tree/v2.8.5) (2017-09-12)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.4...v2.8.5)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
|
||||
- Chart error since the addition of deepmerge in build 2.8.4 [\#192](https://github.com/apertureless/vue-chartjs/issues/192)
|
||||
|
||||
## [v2.8.4](https://github.com/apertureless/vue-chartjs/tree/v2.8.4) (2017-09-08)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.3...v2.8.4)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Regression in 2.8.3 [\#190](https://github.com/apertureless/vue-chartjs/issues/190)
|
||||
- Why default Chart.js styles are overridden? [\#189](https://github.com/apertureless/vue-chartjs/issues/189)
|
||||
- Legend or other options not working in reactiveProps [\#188](https://github.com/apertureless/vue-chartjs/issues/188)
|
||||
- Changes to yAxisID property does not re-render chart [\#177](https://github.com/apertureless/vue-chartjs/issues/177)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Replace Object.assign with deepmerge [\#191](https://github.com/apertureless/vue-chartjs/pull/191) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.8.3](https://github.com/apertureless/vue-chartjs/tree/v2.8.3) (2017-09-06)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.2...v2.8.3)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Rounded corner for Bar chart [\#185](https://github.com/apertureless/vue-chartjs/issues/185)
|
||||
- Access canvas object from parents [\#184](https://github.com/apertureless/vue-chartjs/issues/184)
|
||||
- Issue with DonutChart in Safari [\#183](https://github.com/apertureless/vue-chartjs/issues/183)
|
||||
- Responsive Width, Fixed Height [\#180](https://github.com/apertureless/vue-chartjs/issues/180)
|
||||
- Entire Lodash Library Is Loaded!! 200kb chunk! [\#179](https://github.com/apertureless/vue-chartjs/issues/179)
|
||||
- height changed unexpectedly after re-rendering [\#178](https://github.com/apertureless/vue-chartjs/issues/178)
|
||||
- Default height no longer working in 2.8 [\#176](https://github.com/apertureless/vue-chartjs/issues/176)
|
||||
- how to get click on point in bar chart? [\#175](https://github.com/apertureless/vue-chartjs/issues/175)
|
||||
- clean install of from npm cannot be used in gulp / browserify [\#174](https://github.com/apertureless/vue-chartjs/issues/174)
|
||||
- tooltip callbacks possible? [\#173](https://github.com/apertureless/vue-chartjs/issues/173)
|
||||
- Computed object won't populate chart [\#170](https://github.com/apertureless/vue-chartjs/issues/170)
|
||||
- Error in nextTick: "RangeError: Maximum call stack size exceeded" [\#169](https://github.com/apertureless/vue-chartjs/issues/169)
|
||||
- Standalone chartjs build \(don't include moment.js\) [\#124](https://github.com/apertureless/vue-chartjs/issues/124)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 🔥 Remove default styles object as it causes problems [\#187](https://github.com/apertureless/vue-chartjs/pull/187) ([apertureless](https://github.com/apertureless))
|
||||
- remvove lodash merge [\#186](https://github.com/apertureless/vue-chartjs/pull/186) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.8.2](https://github.com/apertureless/vue-chartjs/tree/v2.8.2) (2017-08-12)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.1...v2.8.2)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- UNMET PEER DEPENDENCY [\#167](https://github.com/apertureless/vue-chartjs/issues/167)
|
||||
- Base Charts' height: 200% [\#164](https://github.com/apertureless/vue-chartjs/issues/164)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Add support for xLabels and yLabels [\#166](https://github.com/apertureless/vue-chartjs/pull/166) ([dsbert](https://github.com/dsbert))
|
||||
- Update README.md [\#165](https://github.com/apertureless/vue-chartjs/pull/165) ([mikeybeck](https://github.com/mikeybeck))
|
||||
|
||||
## [v2.8.1](https://github.com/apertureless/vue-chartjs/tree/v2.8.1) (2017-08-05)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.0...v2.8.1)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Add Russian documentation [\#163](https://github.com/apertureless/vue-chartjs/pull/163) ([dood-](https://github.com/dood-))
|
||||
|
||||
## [v2.8.0](https://github.com/apertureless/vue-chartjs/tree/v2.8.0) (2017-08-04)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.2.0...v2.8.0)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Update README CDN link [\#161](https://github.com/apertureless/vue-chartjs/issues/161)
|
||||
- Options being ignored [\#160](https://github.com/apertureless/vue-chartjs/issues/160)
|
||||
- Fails to dynamically change height. [\#158](https://github.com/apertureless/vue-chartjs/issues/158)
|
||||
- Chart doesn't load in bootstrap tab [\#157](https://github.com/apertureless/vue-chartjs/issues/157)
|
||||
- Add scatter chart to vue-chatjs@legacy [\#155](https://github.com/apertureless/vue-chartjs/issues/155)
|
||||
- \[Error\] Get error when $destroy is started. [\#149](https://github.com/apertureless/vue-chartjs/issues/149)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Feature/dynamic styles [\#162](https://github.com/apertureless/vue-chartjs/pull/162) ([apertureless](https://github.com/apertureless))
|
||||
- Add Chinese simplified docs support. [\#159](https://github.com/apertureless/vue-chartjs/pull/159) ([Mooooooon](https://github.com/Mooooooon))
|
||||
|
||||
## [v1.2.0](https://github.com/apertureless/vue-chartjs/tree/v1.2.0) (2017-07-25)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.2...v1.2.0)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- this.$refs doesn't seem to have expected canvas property [\#156](https://github.com/apertureless/vue-chartjs/issues/156)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Before destroy fix [\#152](https://github.com/apertureless/vue-chartjs/pull/152) ([DenisLapi](https://github.com/DenisLapi))
|
||||
|
||||
## [v2.7.2](https://github.com/apertureless/vue-chartjs/tree/v2.7.2) (2017-07-22)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.1...v2.7.2)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Accessibility - Add unique titles to frames [\#150](https://github.com/apertureless/vue-chartjs/issues/150)
|
||||
- update\(\) not refreshing chart [\#148](https://github.com/apertureless/vue-chartjs/issues/148)
|
||||
- Custome label y axis [\#147](https://github.com/apertureless/vue-chartjs/issues/147)
|
||||
- Access specific points on the canvas and labels for styling [\#146](https://github.com/apertureless/vue-chartjs/issues/146)
|
||||
- legendCallback\(\) doesn't render a custom legend [\#144](https://github.com/apertureless/vue-chartjs/issues/144)
|
||||
- where can i get the demo sources code? thanks [\#143](https://github.com/apertureless/vue-chartjs/issues/143)
|
||||
- Props not works as expected, updating of value doesn't work [\#138](https://github.com/apertureless/vue-chartjs/issues/138)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- ⬆️ Update dependency vue to 2.4.2 [\#154](https://github.com/apertureless/vue-chartjs/pull/154) ([apertureless](https://github.com/apertureless))
|
||||
- Remove useless labels [\#153](https://github.com/apertureless/vue-chartjs/pull/153) ([clarkdo](https://github.com/clarkdo))
|
||||
- :pencil2: Remove generateLegend\(\) from initialization codes [\#145](https://github.com/apertureless/vue-chartjs/pull/145) ([k-rumi](https://github.com/k-rumi))
|
||||
|
||||
## [v2.7.1](https://github.com/apertureless/vue-chartjs/tree/v2.7.1) (2017-07-05)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.0...v2.7.1)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Default backgroundColor needed [\#142](https://github.com/apertureless/vue-chartjs/issues/142)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Fix links to images in translated documents [\#141](https://github.com/apertureless/vue-chartjs/pull/141) ([k-rumi](https://github.com/k-rumi))
|
||||
|
||||
## [v2.7.0](https://github.com/apertureless/vue-chartjs/tree/v2.7.0) (2017-07-04)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.5...v2.7.0)
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
After the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm.
|
||||
No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
|
||||
If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
|
||||
If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.x)
|
||||
|
||||
## Install
|
||||
|
||||
@@ -38,7 +38,7 @@ Simply run `yarn add vue-chartjs chart.js`
|
||||
Or if you want to use it directly in the browser add
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
||||
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.full.min.js"></script>
|
||||
```
|
||||
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||
|
||||
@@ -66,7 +66,7 @@ You can use `vue-chartjs` directly in the browser without any build setup. Like
|
||||
|
||||
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
|
||||
|
||||
However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
|
||||
However Vue.js and Chart.js are `peerDependencies` so you have to install them separately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
|
||||
|
||||
### Webpack 2
|
||||
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||
|
||||
@@ -71,7 +71,8 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
|
||||
| width | chart width |
|
||||
| height | chart height |
|
||||
| chart-id | id of the canvas |
|
||||
|
||||
| css-classes | String with css classes for the surrounding div |
|
||||
| styles | Object with css styles for the surrounding div container |
|
||||
|
||||
## Examples
|
||||
|
||||
@@ -176,7 +177,8 @@ export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['options'],
|
||||
mounted () {
|
||||
// this.chartData is created in the mixin
|
||||
// this.chartData is created in the mixin.
|
||||
// If you want to pass options please create a local options object
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
|
||||
BIN
docs/assets/scatter.png
Normal file
BIN
docs/assets/scatter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@@ -2,7 +2,9 @@ const langs = [
|
||||
{title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
|
||||
{title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
|
||||
{title: '日本語', path: '/ja/', matchPath: /^\/ja/},
|
||||
{title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}
|
||||
{title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
|
||||
{title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
|
||||
{title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
|
||||
]
|
||||
|
||||
docute.init({
|
||||
@@ -37,7 +39,7 @@ docute.init({
|
||||
apiKey: 'b3544f7387612693644777553675d56a',
|
||||
indexName: 'vue-chartjs',
|
||||
// algolia docsearch allows you to search with tag filter
|
||||
tags: ['en', 'de', 'ja', 'pt-br'],
|
||||
tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
|
||||
// this plugin does require a url too
|
||||
// where docsearch fetches contents
|
||||
url: 'https://vue-chartjs.org'
|
||||
|
||||
294
docs/ru/README.md
Normal file
294
docs/ru/README.md
Normal file
@@ -0,0 +1,294 @@
|
||||
---
|
||||
search: ru
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
<img width="256" heigth="256" src="../../assets/vue-chartjs.png" alt="vue-chartjs logo">
|
||||
</div>
|
||||
|
||||
[](https://badge.fury.io/js/vue-chartjs)
|
||||
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
||||
[](https://travis-ci.org/apertureless/vue-chartjs)
|
||||
[](http://packagequality.com/#?package=vue-chartjs)
|
||||
[](https://www.npmjs.com/package/vue-chartjs)
|
||||
[](https://gitter.im/vue-chartjs/Lobby)
|
||||
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||
|
||||
# vue-chartjs
|
||||
|
||||
**vue-chartjs** обертка для [Chart.js](https://github.com/chartjs/Chart.js) в vue. Вы можете с легкостью создавать многоразовые компоненты диаграмм.
|
||||
|
||||
## Демо & Документация
|
||||
|
||||
- 📺 [Demo](http://demo.vue-chartjs.org/)
|
||||
- 📖 [Docs](http://www.vue-chartjs.org/)
|
||||
|
||||
### Совместимость
|
||||
|
||||
- v1 later `@legacy`
|
||||
- Vue.js 1.x
|
||||
- v2 later
|
||||
- Vue.js 2.x
|
||||
|
||||
После филнального выпуска vue.js 2, вы получите v2 по умолчанию, если установите vue-chartjs через npm.
|
||||
Больше нет необходимости в @next теге. Если вы нуждаетесь в v1, вам необходимо указать версию или использовать legacy тег.
|
||||
Если вы ищите v1, проверьте эту [ветку](https://github.com/apertureless/vue-chartjs/tree/release/1.x).
|
||||
|
||||
## Установка
|
||||
|
||||
Просто выполните `yarn add vue-chartjs chart.js`
|
||||
|
||||
В случаи если вы хотите использовать библиотеку прямо в браузере, добавьте
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
||||
```
|
||||
в ваши скрипты. Смотрите [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||
|
||||
## Описание различий сборок
|
||||
|
||||
Существует три различные точки входа. Это зависит от того, какая сборка стоит у вас. Зависимости собираются или подключаются как peerDependency.
|
||||
|
||||
- Browser
|
||||
- Browserify / Webpack 1
|
||||
- Webpack 2
|
||||
|
||||
|
||||
| Build | Chart.js | Vue.js |
|
||||
|---|---|---|
|
||||
| vue-chartjs.full.js | Bundled | Bundled |
|
||||
| vue-chartjs.full.min.js | Bundled | Bundled |
|
||||
| vue-chartjs.js | peerDependency | peerDependency |
|
||||
| vue-chartjs.min.js | peerDependency | peerDependency |
|
||||
| es/index* | peerDependency | peerDependency |
|
||||
|
||||
### Браузер
|
||||
Вы можете использовать `vue-chartjs` прямо в браузере без установки каких-либо сборок. Пример на [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). В этом случаи, пожалуйста, используйте `vue-chartjs.full.min.js`. Это минифицированноая версиея библиотеки, содержащая Vue.js и Chart.js в себе, с возможностью подключения при помощи UMD Module. Таким образом, вам необходим лишь один файл.
|
||||
|
||||
|
||||
### Browserify / Webpack 1
|
||||
|
||||
Если вы используете Gulp, Browserify или Webpack 1, входная точка находится в `vue-chartjs.js`. Она __транслируется__ и __собирается__ при помощи UMD Module.
|
||||
|
||||
Однако Vue.js и Chart.js является `peerDependencies`, поэтому вы можете устанавливать их отдельно. В большинстве проектов вы в любом случаи будете иметь установленный `Vue.js`. В этом случаи, вы можете иметь различные версии Vue.js и Chart.js.
|
||||
|
||||
### Webpack 2
|
||||
Если вы используете Webpack 2, он будет автоматически использовать `jsnext:main` / `module` в качестве входной точки, которая расположена в `es/index.js`.
|
||||
Это транслированная es версия кода, которая не __собирается__ в модуль. Таким образом, three shaking будет работать.
|
||||
Как и в собранной версии, `Vue.js` и `Chart.js` являются `peerDependencies` и не нуждаются в установке.
|
||||
|
||||
|
||||
## Как использовать
|
||||
|
||||
Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource.
|
||||
|
||||
Вы можете импортировать весь проект или каждый модуль по отдельности.
|
||||
|
||||
```javascript
|
||||
import VueCharts from 'vue-chartjs'
|
||||
import { Bar, Line } from 'vue-chartjs'
|
||||
```
|
||||
|
||||
Просто создайте ваш собственный компонент.
|
||||
|
||||
```javascript
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Переопределение базового рендер метода с реальными данными.
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Затем просто импортируйте и используйте ваши собственные расширенные компоненты как обычные vue компоненты.
|
||||
|
||||
```javascript
|
||||
import CommitChart from 'path/to/component/CommitChart'
|
||||
```
|
||||
|
||||
## Другой пример с options
|
||||
|
||||
Вы можете переопределить стандартные опции графика. Просто передайте объект с опциями в качестве второго параметра в рендер метод.
|
||||
|
||||
```javascript
|
||||
// MonthlyIncome.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Используйте это в вашем vue приложении
|
||||
|
||||
```javascript
|
||||
import MonthlyIncome from 'path/to/component/MonthlyIncome'
|
||||
|
||||
<template>
|
||||
<monthly-income :data={....} />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: { MonthlyIncome },
|
||||
....
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Реактивность
|
||||
|
||||
Chart.js не обновляет и не перерисовывает диаграмму при передаче новых данных.
|
||||
Впрочем, вы можете реализовать это самостоятельно или использовав один из двух подключенных миксинов:
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
Оба включены в `mixins` модуль.
|
||||
|
||||
Миксины автоматически создают `chartData` в виде prop или data. И добавляют watcher. Если данные были измененны, график обновится.
|
||||
Но помните про ограничение vue и javascript на изменений массивов и объектов. Больше информации можно получить [здесь](http://vue-chartjs.org/#/home?id=reactive-data)
|
||||
|
||||
```javascript
|
||||
// MonthlyIncome.js
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
### Mixins модуль
|
||||
Модуль `mixins` включен в `VueCharts`, а также доступен в виде отдельного модуля.
|
||||
Несколько способов импортировать их:
|
||||
|
||||
```javascript
|
||||
// Load complete module with all charts
|
||||
import VueCharts from 'vue-chartjs'
|
||||
|
||||
export default VueCharts.Line.extend({
|
||||
mixins: [VueCharts.mixins.reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Load speperate modules
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Load speperate modules with destructure assign
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Доступные диаграммы
|
||||
|
||||
### Bar Chart
|
||||
|
||||
|
||||
|
||||
### Line Chart
|
||||
|
||||
|
||||
|
||||
### Doughnut
|
||||
|
||||
|
||||
|
||||
### Pie
|
||||
|
||||
|
||||
|
||||
### Radar
|
||||
|
||||
|
||||
|
||||
### Polar Area
|
||||
|
||||
|
||||
|
||||
### Bubble
|
||||
|
||||
|
||||
|
||||
### Scatter
|
||||
|
||||
|
||||
|
||||
## Настройка сборки
|
||||
|
||||
``` bash
|
||||
# инициализация зависимостей
|
||||
npm install
|
||||
|
||||
# сборка с горячей заменой на localhost:8080
|
||||
npm run dev
|
||||
|
||||
# сборка для production с минификацией
|
||||
npm run build
|
||||
|
||||
# запуск unit тестов
|
||||
npm run unit
|
||||
|
||||
# запуск e2e тестов
|
||||
npm run e2e
|
||||
|
||||
# запуск всех тестов
|
||||
npm test
|
||||
```
|
||||
|
||||
Для детальных объяснений того, как это работает, перейдите в [руководство](http://vuejs-templates.github.io/webpack/) и [документацию для vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
||||
## Contributing
|
||||
|
||||
1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
|
||||
2. Create your feature branch (`git checkout -b my-new-feature`)
|
||||
3. Commit your changes (`git commit -am 'Add some feature'`)
|
||||
4. Push to the branch (`git push origin my-new-feature`)
|
||||
5. Create a new Pull Request
|
||||
|
||||
## License
|
||||
|
||||
This software is distributed under [MIT license](LICENSE.txt).
|
||||
358
docs/zh-cn/README.md
Normal file
358
docs/zh-cn/README.md
Normal file
@@ -0,0 +1,358 @@
|
||||
---
|
||||
search: zh-cn
|
||||
---
|
||||
|
||||
# vue-chartjs
|
||||
**vue-chartjs** 是基于 vue 的 [Chart.js](https://github.com/chartjs/Chart.js) 封装。你可以轻松的创建可复用的图表组件。
|
||||
|
||||
## 简介
|
||||
`vue-chartjs` 让你在 vue 中使用 chart.js 省去很多麻烦。非常适合需要快速生成简单图表的人。
|
||||
|
||||
它抽象化了基本逻辑但提供了非常灵活的 chart.js 对象。
|
||||
|
||||
## 安装
|
||||
如果你正在使用 Vue.js 2.x 的版本，只需要运行：
|
||||
|
||||
`yarn add vue-chartjs chart.js`
|
||||
|
||||
如果你正在使用 Vue.js 1.x 的版本，请使用 `legacy` 标签。然而这个版本已经不再维护了。
|
||||
|
||||
`yarn add vue-chartjs@legacy`
|
||||
|
||||
## 快速开始
|
||||
|
||||
你需要引入基本图表并且扩展它。这在处理不同的数据时提供了更多的灵活性。
|
||||
|
||||
你可以封装您的组件，并使用 props 来传递数据。或者直接将数据放入组件中，但是这样做组件就不能复用了。
|
||||
|
||||
你可以加载整个包或者按需加载。
|
||||
|
||||
```javascript
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart(data, options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
你可以给 `renderChart()` 方法传递两个参数：
|
||||
|
||||
- Data object
|
||||
- Options object
|
||||
|
||||
### 数据对象
|
||||
|
||||
数据对象如下所示：
|
||||
|
||||
```javascript
|
||||
{
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
详细信息请查阅 [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) 的文档。
|
||||
|
||||
## 属性
|
||||
|
||||
基本图表中定义了一些属性。因为你 `extend()` 了它们，他们使用 *初始值*，但是你可以覆盖它们：
|
||||
|
||||
| 属性 | 说明 |
|
||||
|---|---|
|
||||
| width | 图表宽度 |
|
||||
| height | 图表高度 |
|
||||
| chart-id | canvas的id |
|
||||
|
||||
|
||||
## 实例
|
||||
|
||||
下面是一些实例。
|
||||
|
||||
### 图表和属性
|
||||
|
||||
你可以创建数据和选项传递给图表。
|
||||
|
||||
```javascript
|
||||
// LineChart.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
然后你可以把它作为组件使用。
|
||||
|
||||
```html
|
||||
<line-chart :data="{your data object}" :options="{your options}"></line-chart>
|
||||
```
|
||||
|
||||
如果你想要覆盖宽度和高度：
|
||||
|
||||
```html
|
||||
<line-chart
|
||||
:data="{your data object}"
|
||||
:options="{responsive: false, maintainAspectRatio: false}"
|
||||
:width="400"
|
||||
:height="200"
|
||||
>
|
||||
</line-chart>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
请注意，你必须设置 `responsive: false` 才可以使用 `width` 和 `height`。
|
||||
</p>
|
||||
|
||||
### 使用本地数据创建图表
|
||||
|
||||
```javascript
|
||||
import {Bar} from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
data () {
|
||||
return {
|
||||
datacollection: {
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 可复用的组件
|
||||
|
||||
如果你希望你的组件可以复用，那么你最好封装它们。这样图表组件只是负责显示你封装的数据。单页应用和集成到 laravel 中有不同的使用方式。
|
||||
|
||||
## 动态数据
|
||||
|
||||
Chart.js 并不提供实时更新，然而 `vue-chartjs` 提供了两种方式。
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
两种方式其实是一样的。多部分情况会使用 `reactiveProp`。它扩展了图表逻辑并且自动添加 `chartData` props 和 `vue watch`。当数据改变，它将会调用 `update()`。当添加了新的数据集，将会调用 `renderChart()`。
|
||||
|
||||
`reactiveData` 只是创建了本地变量并且添加到 watcher，而不是 prop，他只用在你创建单一图表并且在组件创建 api 的时候。
|
||||
|
||||
```javascript
|
||||
data () {
|
||||
return {
|
||||
chartData: null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 实例
|
||||
|
||||
**LineChart.js**
|
||||
```javascript
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['options'],
|
||||
mounted () {
|
||||
// this.chartData is created in the mixin
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**RandomChart.vue**
|
||||
|
||||
```javascript
|
||||
<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>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
⚠ 注意：如果在父组件中修改数据并将数据传递给子图表组件时，请注意 JavaScript 的限制。
|
||||
更多信息请查阅 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
|
||||
</p>
|
||||
|
||||
### 限制
|
||||
<ul>
|
||||
<li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
|
||||
<li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
|
||||
<li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
|
||||
</ul>
|
||||
|
||||
## Chart.js 对象
|
||||
|
||||
有时你需要更多的调整 chart.js。你可以访问 `this._chart` 实例。
|
||||
|
||||
## 内联插件
|
||||
|
||||
在 Chart.js 你可以定义全局和内联插件。全局插件在 `vue-chartjs` 中没有问题，参照 [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) 的说明。
|
||||
|
||||
如果你想添加内联插件 `vue-chartjs` 提供了一个方法 `addPlugin()`
|
||||
|
||||
你必须在 `renderChart()` 之前调用 `addPlugin()` 方法。
|
||||
|
||||
### 实例
|
||||
|
||||
```javascript
|
||||
mounted () {
|
||||
this.addPlugin({
|
||||
id: 'my-plugin',
|
||||
beforeInit: function (chart) {
|
||||
....
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 支持的图表
|
||||
|
||||
### 柱状图
|
||||
|
||||
<p class="tip">
|
||||
柱状图有两个版本。 `{Bar}` 和 `{HorizontalBar}`
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
### 折线图
|
||||
|
||||
|
||||
|
||||
### 环形图
|
||||
|
||||
|
||||
|
||||
### 饼图
|
||||
|
||||
|
||||
|
||||
### 雷达图
|
||||
|
||||
|
||||
|
||||
### 极坐标
|
||||
|
||||
|
||||
|
||||
### 热点图
|
||||
|
||||
|
||||
|
||||
### 散点图
|
||||
|
||||
这个图表有不同的数据结构。目前动态数据不适用于此图表类型。
|
||||
|
||||
|
||||
|
||||
|
||||
## 不同构建工具的说明
|
||||
有三种不同的切入点，取决于你用哪种构建工具。作为 dependencies 或者 peerDependency。
|
||||
|
||||
- Browser
|
||||
- Browserify / Webpack 1
|
||||
- Webpack 2
|
||||
|
||||
|
||||
| Build | Chart.js | Vue.js |
|
||||
|---|---|---|
|
||||
| vue-chartjs.full.js | Bundled | Bundled |
|
||||
| vue-chartjs.full.min.js | Bundled | Bundled |
|
||||
| vue-chartjs.js | peerDependency | peerDependency |
|
||||
| vue-chartjs.min.js | peerDependency | peerDependency |
|
||||
| es/index* | peerDependency | peerDependency |
|
||||
|
||||
### 浏览器
|
||||
你可以在浏览中直接使用 `vue-chartjs`。像是 [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010) 这种情况，请使用 `vue-chartjs.full.min.js` 捆绑版本。他将 Vue.js 和 Chart.js 绑定在了一起，你只需要一个文件。
|
||||
|
||||
|
||||
### Browserify / Webpack 1
|
||||
|
||||
如果你使用 Gulp, Browserify 或者 Webpack 1，`vue-chartjs.js` 被捆绑到 UMD 模块。
|
||||
|
||||
然而 Vue.js 和 Chart.js 是 `peerDependencies` 所以你需要独立安装它们。 大部分情况下你已经安装了 `Vue.js`，你可以使用不同版本的 Vue.js 和 Chart.js。
|
||||
|
||||
### Webpack 2
|
||||
如果你使用 Webpack 2 它将自动使用 `jsnext:main` / `module` 入口。
|
||||
像捆绑版本一样，`Vue.js` 和 `Chart.js` 都是 `peerDependencies`，需要安装。
|
||||
|
||||
## 资源
|
||||
|
||||
你可以在这里找到一些如何使用 `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/)
|
||||
15
package.json
15
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "vue-chartjs",
|
||||
"version": "2.7.2",
|
||||
"description": "vue.js wrapper for chart.js",
|
||||
"version": "2.8.7",
|
||||
"description": "Vue.js wrapper for chart.js for creating beautiful charts.",
|
||||
"author": "Jakub Juszczak <jakub@posteo.de>",
|
||||
"homepage": "http://vue-chartjs.org",
|
||||
"license": "MIT",
|
||||
@@ -57,22 +57,23 @@
|
||||
"prepublish": "yarn run lint && yarn run test && yarn run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.4"
|
||||
"lodash.merge": "^4.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"chart.js": "^2.6.0",
|
||||
"vue": "^2.4.2"
|
||||
"chart.js": "^2.7.0",
|
||||
"vue": "^2.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-transform-object-assign": "^6.22.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"chai": "^3.5.0",
|
||||
"chart.js": "^2.6.0",
|
||||
"chart.js": "^2.7.0",
|
||||
"chromedriver": "^2.28.0",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"cross-env": "^3.2.4",
|
||||
@@ -117,7 +118,7 @@
|
||||
"sinon": "^2.1.0",
|
||||
"sinon-chai": "^2.9.0",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue": "^2.4.2",
|
||||
"vue": "^2.4.4",
|
||||
"vue-hot-reload-api": "^2.1.0",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^12.2.2",
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -20,7 +23,6 @@ export default Vue.extend({
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'bar-chart',
|
||||
@@ -33,9 +35,15 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
defaultOptions: {
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
@@ -33,6 +36,13 @@ export default Vue.extend({
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -79,7 +79,8 @@
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dataPoints: null
|
||||
dataPoints: null,
|
||||
height: 20
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -88,6 +89,9 @@
|
||||
}, 2000)
|
||||
},
|
||||
methods: {
|
||||
increaseHeight () {
|
||||
this.height += 10
|
||||
},
|
||||
getRandomInt () {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
},
|
||||
@@ -103,6 +107,14 @@
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
myStyles () {
|
||||
return {
|
||||
height: `${this.height}px`,
|
||||
position: 'relative'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import merge from 'lodash/fp/merge'
|
||||
import merge from 'lodash.merge'
|
||||
|
||||
export function mergeOptions (obj, src) {
|
||||
return merge(obj, src)
|
||||
|
||||
@@ -48,7 +48,15 @@ module.exports = {
|
||||
}
|
||||
})
|
||||
|
||||
chart.data.labels = newData.labels
|
||||
if (newData.hasOwnProperty('labels')) {
|
||||
chart.data.labels = newData.labels
|
||||
}
|
||||
if (newData.hasOwnProperty('xLabels')) {
|
||||
chart.data.xLabels = newData.xLabels
|
||||
}
|
||||
if (newData.hasOwnProperty('yLabels')) {
|
||||
chart.data.yLabels = newData.yLabels
|
||||
}
|
||||
chart.update()
|
||||
} else {
|
||||
chart.destroy()
|
||||
|
||||
@@ -48,7 +48,15 @@ module.exports = {
|
||||
}
|
||||
})
|
||||
|
||||
chart.data.labels = newData.labels
|
||||
if (newData.hasOwnProperty('labels')) {
|
||||
chart.data.labels = newData.labels
|
||||
}
|
||||
if (newData.hasOwnProperty('xLabels')) {
|
||||
chart.data.xLabels = newData.xLabels
|
||||
}
|
||||
if (newData.hasOwnProperty('yLabels')) {
|
||||
chart.data.yLabels = newData.yLabels
|
||||
}
|
||||
chart.update()
|
||||
} else {
|
||||
chart.destroy()
|
||||
|
||||
@@ -15,16 +15,40 @@ describe('mergeOptions.js', () => {
|
||||
c: 'c'
|
||||
}
|
||||
|
||||
const an = {
|
||||
a: {
|
||||
a: 'a'
|
||||
},
|
||||
b: {
|
||||
b: 'a'
|
||||
}
|
||||
}
|
||||
|
||||
const bn = {
|
||||
a: {
|
||||
a: 'a'
|
||||
},
|
||||
b: {
|
||||
b: 'b'
|
||||
}
|
||||
}
|
||||
|
||||
it('should replace old a and b if a and b are new', () => {
|
||||
let ab = mergeOptions(a, b)
|
||||
const ab = mergeOptions(a, b)
|
||||
expect(ab).to.have.property('a').and.to.equal('b')
|
||||
expect(ab).to.have.property('b').and.to.equal('b')
|
||||
})
|
||||
|
||||
it('should add c if c is new', () => {
|
||||
let ac = mergeOptions(a, c)
|
||||
expect(ac).to.have.property('a').and.to.equal('a')
|
||||
expect(ac).to.have.property('b').and.to.equal('a')
|
||||
const ac = mergeOptions(a, c)
|
||||
expect(ac).to.have.property('a').and.to.equal('b')
|
||||
expect(ac).to.have.property('b').and.to.equal('b')
|
||||
expect(ac).to.have.property('c').and.to.equal('c')
|
||||
})
|
||||
|
||||
it('should replace old a and b if a and b are new in nested objects', () => {
|
||||
const ab = mergeOptions(an, bn)
|
||||
expect(ab).to.have.deep.property('a.a').and.to.equal('a')
|
||||
expect(ab).to.have.deep.property('b.b').and.to.equal('b')
|
||||
})
|
||||
})
|
||||
|
||||
61
yarn.lock
61
yarn.lock
@@ -687,6 +687,12 @@ babel-plugin-transform-exponentiation-operator@^6.24.1:
|
||||
babel-plugin-syntax-exponentiation-operator "^6.8.0"
|
||||
babel-runtime "^6.22.0"
|
||||
|
||||
babel-plugin-transform-object-assign@^6.22.0:
|
||||
version "6.22.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz#f99d2f66f1a0b0d498e346c5359684740caa20ba"
|
||||
dependencies:
|
||||
babel-runtime "^6.22.0"
|
||||
|
||||
babel-plugin-transform-object-rest-spread@^6.22.0:
|
||||
version "6.23.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
|
||||
@@ -1123,24 +1129,24 @@ change-case@3.0.x:
|
||||
upper-case "^1.1.1"
|
||||
upper-case-first "^1.1.0"
|
||||
|
||||
chart.js@^2.6.0:
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.6.0.tgz#308f9a4b0bfed5a154c14f5deb1d9470d22abe71"
|
||||
chart.js@^2.7.0:
|
||||
version "2.7.0"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.0.tgz#330dbbee0c66199eb715f60fbf8ca4029609a529"
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.6"
|
||||
chartjs-color "~2.2.0"
|
||||
moment "~2.18.0"
|
||||
|
||||
chartjs-color-string@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.4.0.tgz#57748d4530ae28d8db0a5492182ba06dfdf2f468"
|
||||
chartjs-color-string@^0.5.0:
|
||||
version "0.5.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
|
||||
chartjs-color@~2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
|
||||
dependencies:
|
||||
chartjs-color-string "^0.4.0"
|
||||
chartjs-color-string "^0.5.0"
|
||||
color-convert "^0.5.3"
|
||||
|
||||
chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.6.1:
|
||||
@@ -3538,6 +3544,10 @@ lodash.keysin@^4.0.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.keysin/-/lodash.keysin-4.2.0.tgz#8cc3fb35c2d94acc443a1863e02fa40799ea6f28"
|
||||
|
||||
lodash.merge@^4.6.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
|
||||
|
||||
lodash.mergewith@^4.0.0, lodash.mergewith@^4.6.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
|
||||
@@ -3554,7 +3564,7 @@ lodash@^3.8.0:
|
||||
version "3.10.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
|
||||
|
||||
lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
|
||||
lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
|
||||
version "4.17.4"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
|
||||
|
||||
@@ -3780,9 +3790,9 @@ mocha@^3.1.0:
|
||||
mkdirp "0.5.1"
|
||||
supports-color "3.1.2"
|
||||
|
||||
moment@^2.10.6:
|
||||
version "2.17.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82"
|
||||
moment@~2.18.0:
|
||||
version "2.18.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
|
||||
|
||||
ms@0.7.1:
|
||||
version "0.7.1"
|
||||
@@ -5725,16 +5735,23 @@ vue-loader@^12.2.2:
|
||||
vue-style-loader "^3.0.0"
|
||||
vue-template-es2015-compiler "^1.2.2"
|
||||
|
||||
vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
|
||||
vue-style-loader@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.1.tgz#c8b639bb2f24baf9d78274dc17e4f264c1deda08"
|
||||
dependencies:
|
||||
hash-sum "^1.0.2"
|
||||
loader-utils "^1.0.2"
|
||||
|
||||
vue-style-loader@^3.0.1:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.3.tgz#623658f81506aef9d121cdc113a4f5c9cac32df7"
|
||||
dependencies:
|
||||
hash-sum "^1.0.2"
|
||||
loader-utils "^1.0.2"
|
||||
|
||||
vue-template-compiler@^2.4.2:
|
||||
version "2.4.2"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.4.2.tgz#5a45d843f148b098f6c1d1e35ac20c4956d30ad1"
|
||||
version "2.4.4"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.4.4.tgz#2cde3b704124985c27d50b5387c9691ba515fb57"
|
||||
dependencies:
|
||||
de-indent "^1.0.2"
|
||||
he "^1.1.0"
|
||||
@@ -5743,9 +5760,9 @@ vue-template-es2015-compiler@^1.2.2:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"
|
||||
|
||||
vue@^2.4.2:
|
||||
version "2.4.2"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.4.2.tgz#a9855261f191c978cc0dc1150531b8d08149b58c"
|
||||
vue@^2.4.4:
|
||||
version "2.4.4"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.4.4.tgz#ea9550b96a71465fd2b8b17b61673b3561861789"
|
||||
|
||||
watchpack@^0.2.1:
|
||||
version "0.2.9"
|
||||
|
||||
Reference in New Issue
Block a user