mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
9 Commits
v2.6.0-rc1
...
v2.6.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6211d034e6 | ||
|
|
f32d989334 | ||
|
|
ba11190e39 | ||
|
|
7234292a49 | ||
|
|
c91fee9a1a | ||
|
|
7e7e5d0028 | ||
|
|
2ab4cacf12 | ||
|
|
227f698647 | ||
|
|
8d893eb8b2 |
35
CHANGELOG.md
35
CHANGELOG.md
@@ -1,13 +1,42 @@
|
|||||||
# Change Log
|
# Change Log
|
||||||
|
|
||||||
## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
|
## [v2.6.0](https://github.com/apertureless/vue-chartjs/tree/v2.6.0) (2017-04-09)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0-rc1...v2.6.0)
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...HEAD)
|
|
||||||
|
|
||||||
**Closed issues:**
|
**Closed issues:**
|
||||||
|
|
||||||
|
- how to export to image or pdf [\#89](https://github.com/apertureless/vue-chartjs/issues/89)
|
||||||
|
- 🙏🏻 Testing 2.6.0-rc1 [\#88](https://github.com/apertureless/vue-chartjs/issues/88)
|
||||||
|
- Adding annotation plugin functionality [\#86](https://github.com/apertureless/vue-chartjs/issues/86)
|
||||||
|
|
||||||
|
## [v2.6.0-rc1](https://github.com/apertureless/vue-chartjs/tree/v2.6.0-rc1) (2017-04-05)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.6...v2.6.0-rc1)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Overwrite prop [\#85](https://github.com/apertureless/vue-chartjs/issues/85)
|
||||||
|
|
||||||
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- Update release build to not include externals. [\#84](https://github.com/apertureless/vue-chartjs/pull/84) ([gcoguiec](https://github.com/gcoguiec))
|
||||||
|
|
||||||
|
## [v2.5.6](https://github.com/apertureless/vue-chartjs/tree/v2.5.6) (2017-03-29)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...v2.5.6)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Can not render two lines at the same time [\#83](https://github.com/apertureless/vue-chartjs/issues/83)
|
||||||
|
- Suggestion: Chart not re-rendering on window resize [\#82](https://github.com/apertureless/vue-chartjs/issues/82)
|
||||||
|
- How can you change legend label colour? [\#81](https://github.com/apertureless/vue-chartjs/issues/81)
|
||||||
|
- Doughnut with text in the middle [\#80](https://github.com/apertureless/vue-chartjs/issues/80)
|
||||||
|
- Set chart width without affecting labels [\#79](https://github.com/apertureless/vue-chartjs/issues/79)
|
||||||
|
- Loading data from server and displaying [\#78](https://github.com/apertureless/vue-chartjs/issues/78)
|
||||||
|
- Why separate .js files in the examples? [\#77](https://github.com/apertureless/vue-chartjs/issues/77)
|
||||||
- An in-range update of vue is breaking the build 🚨 [\#76](https://github.com/apertureless/vue-chartjs/issues/76)
|
- An in-range update of vue is breaking the build 🚨 [\#76](https://github.com/apertureless/vue-chartjs/issues/76)
|
||||||
- An in-range update of vue-template-compiler is breaking the build 🚨 [\#75](https://github.com/apertureless/vue-chartjs/issues/75)
|
- An in-range update of vue-template-compiler is breaking the build 🚨 [\#75](https://github.com/apertureless/vue-chartjs/issues/75)
|
||||||
|
- Uncaught TypeError: Cannot read property 'chartId' of undefined [\#74](https://github.com/apertureless/vue-chartjs/issues/74)
|
||||||
|
- TypeError: child.\_updateFromParent is not a function [\#72](https://github.com/apertureless/vue-chartjs/issues/72)
|
||||||
|
- Styling componement's surrounding \<div\> [\#70](https://github.com/apertureless/vue-chartjs/issues/70)
|
||||||
|
|
||||||
## [v2.5.5](https://github.com/apertureless/vue-chartjs/tree/v2.5.5) (2017-03-24)
|
## [v2.5.5](https://github.com/apertureless/vue-chartjs/tree/v2.5.5) (2017-03-24)
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.4...v2.5.5)
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.4...v2.5.5)
|
||||||
|
|||||||
54
README.md
54
README.md
@@ -32,7 +32,45 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
|
|||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
Simply run `npm install vue-chartjs`
|
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>
|
||||||
|
```
|
||||||
|
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||||
|
|
||||||
|
## Explanation of Different Builds
|
||||||
|
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a 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 |
|
||||||
|
|
||||||
|
### Browser
|
||||||
|
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
|
||||||
|
|
||||||
|
|
||||||
|
### Browserify / Webpack 1
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||||
|
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work. Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
|
||||||
|
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
|
||||||
@@ -178,20 +216,6 @@ export default Line.extend({
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
## Webpack, Browserify and dist files.
|
|
||||||
|
|
||||||
If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
|
|
||||||
This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
|
|
||||||
And you end up with two vue instances.
|
|
||||||
|
|
||||||
If you're using webpack 2 however, it will automatically import the transpiled ES sources.
|
|
||||||
If you know what you're doing you can import directly from the transpiled es sources:
|
|
||||||
|
|
||||||
```
|
|
||||||
import { Line } from 'vue-chartjs/es'
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Available Charts
|
## Available Charts
|
||||||
|
|
||||||
### Bar Chart
|
### Bar Chart
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
search: english
|
search: en
|
||||||
---
|
---
|
||||||
|
|
||||||
# vue-chartjs
|
# vue-chartjs
|
||||||
@@ -287,25 +287,33 @@ Sometimes you need more control over chart.js. Thats why you can access the char
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Webpack, Browserify and dist files.
|
|
||||||
|
|
||||||
If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
|
## Explanation of Different Builds
|
||||||
This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
|
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
|
||||||
And you end up with two vue instances.
|
|
||||||
|
|
||||||
If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources.
|
- Browser
|
||||||
If you know what you're doing you can import directly from the transpiled es sources:
|
- Browserify / Webpack 1
|
||||||
|
- Webpack 2
|
||||||
|
|
||||||
```
|
|
||||||
import { Line } from 'vue-chartjs/es'
|
|
||||||
```
|
|
||||||
|
|
||||||
### Browserify
|
| 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 |
|
||||||
|
|
||||||
In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
|
### Browser
|
||||||
|
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
|
||||||
|
|
||||||
```
|
|
||||||
{
|
### Browserify / Webpack 1
|
||||||
"presets": ["es2015"]
|
|
||||||
}
|
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.
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||||
|
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work. Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
|
||||||
|
|||||||
@@ -30,6 +30,15 @@ docute.init({
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
evanyou()
|
evanyou(),
|
||||||
|
docsearch({
|
||||||
|
apiKey: 'b3544f7387612693644777553675d56a',
|
||||||
|
indexName: 'vue-chartjs',
|
||||||
|
// algolia docsearch allows you to search with tag filter
|
||||||
|
tags: ['en', 'de'],
|
||||||
|
// this plugin does require a url too
|
||||||
|
// where docsearch fetches contents
|
||||||
|
url: 'https://vue-chartjs.org'
|
||||||
|
})
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
search: deutsch
|
search: de
|
||||||
---
|
---
|
||||||
|
|
||||||
# vue-chartjs
|
# vue-chartjs
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script src="https://unpkg.com/docute-evanyou"></script>
|
<script src="https://unpkg.com/docute-evanyou"></script>
|
||||||
<script src="https://unpkg.com/docute/dist/docute.js"></script>
|
<script src="https://unpkg.com/docute/dist/docute.js"></script>
|
||||||
|
<script src="https://unpkg.com/docute/plugins/docsearch.js"></script>
|
||||||
<script src="./config.js"></script>
|
<script src="./config.js"></script>
|
||||||
<!-- don't remove this part end -->
|
<!-- don't remove this part end -->
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-chartjs",
|
"name": "vue-chartjs",
|
||||||
"version": "2.6.0-rc1",
|
"version": "2.6.1",
|
||||||
"description": "vue.js wrapper for chart.js",
|
"description": "vue.js wrapper for chart.js",
|
||||||
"author": "Jakub Juszczak <jakub@posteo.de>",
|
"author": "Jakub Juszczak <jakub@posteo.de>",
|
||||||
"homepage": "http://vue-chartjs.org",
|
"homepage": "http://vue-chartjs.org",
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options, type) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
|
|||||||
Reference in New Issue
Block a user