diff --git a/deploy-docs.sh b/deploy-docs.sh new file mode 100644 index 00000000..6f989bfe --- /dev/null +++ b/deploy-docs.sh @@ -0,0 +1,13 @@ +#!/usr/bin/env sh + +# abort on errors +set -e +# build +npm run docs:build + +# navigate into the build output directory +cd docs/.vuepress/dist + +# if you are deploying to a custom domain +echo 'vue-chartjs.org' > CNAME +touch .nojekyll diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index a8168297..428f8b5e 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -4,7 +4,7 @@ module.exports = { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, - { text: 'References', link: '/reference/' } + { text: 'API', link: '/api/' } ], sidebar: 'auto', repo: 'apertureless/vue-chartjs', diff --git a/docs/.vuepress/dist/404.html b/docs/.vuepress/dist/404.html index c747af53..ca77f9a9 100644 --- a/docs/.vuepress/dist/404.html +++ b/docs/.vuepress/dist/404.html @@ -3,15 +3,15 @@ - VuePress - + 📈 vue-chartjs + - - + +

404

There's nothing here.
Take me home.
- + diff --git a/docs/.vuepress/dist/api/index.html b/docs/.vuepress/dist/api/index.html new file mode 100644 index 00000000..3edaf6f2 --- /dev/null +++ b/docs/.vuepress/dist/api/index.html @@ -0,0 +1,62 @@ + + + + + + Coding Reference | 📈 vue-chartjs + + + + + + + +
📈 vue-chartjs

Coding Reference

Props

There are some basic props defined in the components provided by vue-chartjs. Because you extend them, they are invisible, but you can overwrite them:

Prop Description
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
plugins Array with chartjs plugins

Events

If the reactiveData or reactiveProp mixin is attached, following events will be emitted:

Event Description
chart:render if the mixin performs a complete rerender
chart:destroy if the mixin deletes the chart object instance
chart:update if the mixin performs an update instead of a re-render
labels:update if new labels were set
xlabels:update if new xLabels were set
ylabels:update if new yLabels were set

Global Methods

Global Methods need to be imported.

generateChart

  • Type: Function
  • Arguments: chart-id, chart-type
  • Usage:
import { generateChart } from 'vue-chartjs'
+// First argument is the chart-id, second the chart type.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+

Instance Methods

Instance methods can be used inside your chart component.

generateLegend()

Helper function to generate a HTML legend.

  • Type: Function
  • Arguments: none
  • Usage:










 




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

In Chart.js you can define global and inline plugins. Global plugins are working without problems with vue-chartjs like in the Chart.js docs described.

If you want to add inline plugins, vue-chartjs exposes a helper method called addPlugin() +You should call addPlugin() before the renderChart() method.

  • Type: Function
  • Arguments: Array of Plugins
  • Usage:
mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+

renderChart()

Creates a Chart.js instance and renders the chart.

  • Type: Function
  • Arguments: Chart Data, Chart Options
  • Usage:
mounted () {
+  this.renderChart({
+    labels: ['January', 'February'],
+    datasets: [
+      {
+        label: 'Data One',
+        backgroundColor: '#f87979',
+        data: [40, 20]
+      }
+    ]},
+    {
+      responsive: true
+    }
+  )
+}
+

Chart.js Object

You can access the Chart.js object inside your chart component with this.$data._chart

Canvas

You can access the canvas with this.$refs.canvas

Edit this page on GitHub
+ + + diff --git a/docs/.vuepress/dist/assets/css/2.styles.5a2a73d8.css b/docs/.vuepress/dist/assets/css/2.styles.8f5c8e96.css similarity index 100% rename from docs/.vuepress/dist/assets/css/2.styles.5a2a73d8.css rename to docs/.vuepress/dist/assets/css/2.styles.8f5c8e96.css diff --git a/docs/.vuepress/dist/assets/css/styles.1a764383.css b/docs/.vuepress/dist/assets/css/styles.9e2c2fad.css similarity index 100% rename from docs/.vuepress/dist/assets/css/styles.1a764383.css rename to docs/.vuepress/dist/assets/css/styles.9e2c2fad.css diff --git a/docs/.vuepress/dist/assets/js/10.b27c2bcc.js b/docs/.vuepress/dist/assets/js/10.b27c2bcc.js new file mode 100644 index 00000000..75c22d0d --- /dev/null +++ b/docs/.vuepress/dist/assets/js/10.b27c2bcc.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{145:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/11.49ff9f4e.js b/docs/.vuepress/dist/assets/js/11.49ff9f4e.js new file mode 100644 index 00000000..6c3545be --- /dev/null +++ b/docs/.vuepress/dist/assets/js/11.49ff9f4e.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{150:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/12.01d63eaa.js b/docs/.vuepress/dist/assets/js/12.01d63eaa.js new file mode 100644 index 00000000..84ab42a0 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/12.01d63eaa.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{149:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/13.ebea3386.js b/docs/.vuepress/dist/assets/js/13.ebea3386.js new file mode 100644 index 00000000..b8394874 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/13.ebea3386.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{148:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/14.94612b70.js b/docs/.vuepress/dist/assets/js/14.94612b70.js new file mode 100644 index 00000000..f06fbe85 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/14.94612b70.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{147:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/15.fd4516df.js b/docs/.vuepress/dist/assets/js/15.fd4516df.js new file mode 100644 index 00000000..d0e852dd --- /dev/null +++ b/docs/.vuepress/dist/assets/js/15.fd4516df.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{146:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/16.9ae1da91.js b/docs/.vuepress/dist/assets/js/16.9ae1da91.js new file mode 100644 index 00000000..c7f2c7e7 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/16.9ae1da91.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{165:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/17.546d6885.js b/docs/.vuepress/dist/assets/js/17.546d6885.js new file mode 100644 index 00000000..2c7ebf19 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/17.546d6885.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{164:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/18.26f4f9eb.js b/docs/.vuepress/dist/assets/js/18.26f4f9eb.js new file mode 100644 index 00000000..5a376192 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/18.26f4f9eb.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{163:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/19.4100c56d.js b/docs/.vuepress/dist/assets/js/19.4100c56d.js new file mode 100644 index 00000000..3773d11e --- /dev/null +++ b/docs/.vuepress/dist/assets/js/19.4100c56d.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{162:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/2.5a2a73d8.js b/docs/.vuepress/dist/assets/js/2.8f5c8e96.js similarity index 87% rename from docs/.vuepress/dist/assets/js/2.5a2a73d8.js rename to docs/.vuepress/dist/assets/js/2.8f5c8e96.js index 28201e39..05a71591 100644 --- a/docs/.vuepress/dist/assets/js/2.5a2a73d8.js +++ b/docs/.vuepress/dist/assets/js/2.8f5c8e96.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{142:function(t,e,n){},143:function(t,e,n){"use strict";var a=n(142);n.n(a).a},145:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||a().default)}},i=(n(143),n(0)),o=Object(i.a)(a,void 0,void 0,!1,null,"099ab69c",null);o.options.__file="Badge.vue";e.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{142:function(t,e,n){},143:function(t,e,n){"use strict";var a=n(142);n.n(a).a},155:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||a().default)}},i=(n(143),n(0)),o=Object(i.a)(a,void 0,void 0,!1,null,"099ab69c",null);o.options.__file="Badge.vue";e.default=o.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/20.8a5c8025.js b/docs/.vuepress/dist/assets/js/20.8a5c8025.js new file mode 100644 index 00000000..6beb029f --- /dev/null +++ b/docs/.vuepress/dist/assets/js/20.8a5c8025.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{161:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/21.e2afe677.js b/docs/.vuepress/dist/assets/js/21.e2afe677.js new file mode 100644 index 00000000..117f6d16 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/21.e2afe677.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{160:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/22.28a14c49.js b/docs/.vuepress/dist/assets/js/22.28a14c49.js new file mode 100644 index 00000000..92984411 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/22.28a14c49.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{159:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/23.e1908054.js b/docs/.vuepress/dist/assets/js/23.e1908054.js new file mode 100644 index 00000000..a141099c --- /dev/null +++ b/docs/.vuepress/dist/assets/js/23.e1908054.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{151:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/3.5774cb5b.js b/docs/.vuepress/dist/assets/js/3.5774cb5b.js new file mode 100644 index 00000000..1b0c26cb --- /dev/null +++ b/docs/.vuepress/dist/assets/js/3.5774cb5b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{158:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/3.8d1b5fa1.js b/docs/.vuepress/dist/assets/js/3.8d1b5fa1.js deleted file mode 100644 index 3931726c..00000000 --- a/docs/.vuepress/dist/assets/js/3.8d1b5fa1.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{146:function(t,e,s){"use strict";s.r(e);var l=s(0),n=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"hello-world-vp"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#hello-world-vp","aria-hidden":"true"}},[this._v("#")]),this._v(" Hello World VP")])])}],!1,null,null,null);n.options.__file="README.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/4.06a15e23.js b/docs/.vuepress/dist/assets/js/4.06a15e23.js new file mode 100644 index 00000000..3b93ad6d --- /dev/null +++ b/docs/.vuepress/dist/assets/js/4.06a15e23.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{157:function(t,s,a){"use strict";a.r(s);var n=a(0),e=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._v(" "),t._m(1),t._v(" "),t._m(2),t._v(" "),t._m(3),t._v(" "),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),t._m(7),t._v(" "),a("p",[t._v("Global Methods need to be imported.")]),t._v(" "),t._m(8),t._v(" "),t._m(9),t._v(" "),t._m(10),t._m(11),t._v(" "),a("p",[t._v("Instance methods can be used inside your chart component.")]),t._v(" "),t._m(12),t._v(" "),a("p",[t._v("Helper function to generate a HTML legend.")]),t._v(" "),t._m(13),t._v(" "),t._m(14),t._m(15),t._v(" "),a("p",[t._v("In Chart.js you can define global and inline plugins. Global plugins are working without problems with "),a("code",[t._v("vue-chartjs")]),t._v(" like in the "),a("a",{attrs:{href:"http://www.chartjs.org/docs/latest/developers/plugins.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Chart.js docs"),a("OutboundLink")],1),t._v(" described.")]),t._v(" "),t._m(16),t._v(" "),t._m(17),t._v(" "),t._m(18),t._m(19),t._v(" "),a("p",[t._v("Creates a Chart.js instance and renders the chart.")]),t._v(" "),t._m(20),t._v(" "),t._m(21),t._m(22),t._v(" "),t._m(23),t._v(" "),t._m(24),t._v(" "),t._m(25)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"coding-reference"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#coding-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" Coding Reference")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"props"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("#")]),this._v(" Props")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("There are some basic props defined in the components provided by "),s("code",[this._v("vue-chartjs")]),this._v(". Because you "),s("code",[this._v("extend")]),this._v(" them, they are "),s("em",[this._v("invisible")]),this._v(", but you can overwrite them:")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("table",[a("thead",[a("tr",[a("th",[t._v("Prop")]),t._v(" "),a("th",[t._v("Description")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("width")]),t._v(" "),a("td",[t._v("chart width")])]),t._v(" "),a("tr",[a("td",[t._v("height")]),t._v(" "),a("td",[t._v("chart height")])]),t._v(" "),a("tr",[a("td",[t._v("chart-id")]),t._v(" "),a("td",[t._v("id of the canvas")])]),t._v(" "),a("tr",[a("td",[t._v("css-classes")]),t._v(" "),a("td",[t._v("String with css classes for the surrounding div")])]),t._v(" "),a("tr",[a("td",[t._v("styles")]),t._v(" "),a("td",[t._v("Object with css styles for the surrounding div container")])]),t._v(" "),a("tr",[a("td",[t._v("plugins")]),t._v(" "),a("td",[t._v("Array with chartjs plugins")])])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("#")]),this._v(" Events")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If the "),s("code",[this._v("reactiveData")]),this._v(" or "),s("code",[this._v("reactiveProp")]),this._v(" mixin is attached, following events will be emitted:")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("table",[a("thead",[a("tr",[a("th",[t._v("Event")]),t._v(" "),a("th",[t._v("Description")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("chart:render")])]),t._v(" "),a("td",[t._v("if the mixin performs a complete rerender")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("chart:destroy")])]),t._v(" "),a("td",[t._v("if the mixin deletes the chart object instance")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("chart:update")])]),t._v(" "),a("td",[t._v("if the mixin performs an update instead of a re-render")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("labels:update")])]),t._v(" "),a("td",[t._v("if new labels were set")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("xlabels:update")])]),t._v(" "),a("td",[t._v("if new xLabels were set")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("ylabels:update")])]),t._v(" "),a("td",[t._v("if new yLabels were set")])])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"global-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#global-methods","aria-hidden":"true"}},[this._v("#")]),this._v(" Global Methods")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"generatechart"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#generatechart","aria-hidden":"true"}},[this._v("#")]),this._v(" generateChart")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Function")])]),t._v(" "),a("li",[a("strong",[t._v("Arguments")]),t._v(": "),a("code",[t._v("chart-id")]),t._v(", "),a("code",[t._v("chart-type")])]),t._v(" "),a("li",[a("strong",[t._v("Usage:")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" generateChart "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'vue-chartjs'")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// First argument is the chart-id, second the chart type.")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" CustomLine "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token function"}},[t._v("generateChart")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'custom-line'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'LineWithLine'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"instance-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#instance-methods","aria-hidden":"true"}},[this._v("#")]),this._v(" Instance Methods")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"generatelegend"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#generatelegend","aria-hidden":"true"}},[this._v("#")]),this._v(" generateLegend()")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Function")])]),t._v(" "),a("li",[a("strong",[t._v("Arguments")]),t._v(": "),a("code",[t._v("none")])]),t._v(" "),a("li",[a("strong",[t._v("Usage:")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Line "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'vue-chartjs'")]),t._v("\n\n"),a("span",{attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("extends")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Line"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n props"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'datasets'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'options'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n data"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n htmlLegend"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token function"}},[t._v("mounted")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("renderChart")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("datasets"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("htmlLegend "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("generateLegend")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"addplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addplugin","aria-hidden":"true"}},[this._v("#")]),this._v(" addPlugin")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("If you want to add inline plugins, "),a("code",[t._v("vue-chartjs")]),t._v(" exposes a helper method called "),a("code",[t._v("addPlugin()")]),t._v("\nYou should call "),a("code",[t._v("addPlugin()")]),t._v(" before the "),a("code",[t._v("renderChart()")]),t._v(" method.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Function")])]),t._v(" "),a("li",[a("strong",[t._v("Arguments")]),t._v(": "),a("code",[t._v("Array")]),t._v(" of Plugins")]),t._v(" "),a("li",[a("strong",[t._v("Usage:")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token function"}},[t._v("mounted")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addPlugin")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'my-plugin'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n beforeInit"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("chart"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"renderchart"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#renderchart","aria-hidden":"true"}},[this._v("#")]),this._v(" renderChart()")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Function")])]),t._v(" "),a("li",[a("strong",[t._v("Arguments")]),t._v(": "),a("code",[t._v("Chart Data")]),t._v(", "),a("code",[t._v("Chart Options")])]),t._v(" "),a("li",[a("strong",[t._v("Usage:")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token function"}},[t._v("mounted")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("renderChart")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n labels"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'January'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'February'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n datasets"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Data One'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n backgroundColor"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#f87979'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n data"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token number"}},[t._v("40")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("20")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n responsive"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"chart-js-object"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#chart-js-object","aria-hidden":"true"}},[this._v("#")]),this._v(" Chart.js Object")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("You can access the Chart.js object inside your chart component with "),s("code",[this._v("this.$data._chart")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"canvas"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("You can access the canvas with "),s("code",[this._v("this.$refs.canvas")])])}],!1,null,null,null);e.options.__file="README.md";s.default=e.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/5.e04e82dd.js b/docs/.vuepress/dist/assets/js/5.e04e82dd.js new file mode 100644 index 00000000..2d063ea6 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/5.e04e82dd.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{156:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/6.b2f4c173.js b/docs/.vuepress/dist/assets/js/6.b2f4c173.js new file mode 100644 index 00000000..b038d477 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/6.b2f4c173.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{166:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/7.aed9035e.js b/docs/.vuepress/dist/assets/js/7.aed9035e.js new file mode 100644 index 00000000..e7efec93 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/7.aed9035e.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{154:function(t,n,e){"use strict";e.r(n);var s=e(0),i=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})},[],!1,null,null,null);i.options.__file="README.md";n.default=i.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/8.d5b39b11.js b/docs/.vuepress/dist/assets/js/8.d5b39b11.js new file mode 100644 index 00000000..4b87d3db --- /dev/null +++ b/docs/.vuepress/dist/assets/js/8.d5b39b11.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{153:function(t,s,a){"use strict";a.r(s);var n=a(0),e=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._v(" "),a("p",[a("strong",[t._v("vue-chartjs")]),t._v(" is a wrapper for "),a("a",{attrs:{href:"https://github.com/chartjs/Chart.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Chart.js"),a("OutboundLink")],1),t._v(" in Vue. You can easily create reusable chart components.")]),t._v(" "),t._m(1),t._v(" "),t._m(2),t._v(" "),a("p",[t._v("It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility.")]),t._v(" "),t._m(3),t._v(" "),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),t._m(7),t._v(" "),t._m(8),t._v(" "),t._m(9),t._v(" "),t._m(10),t._m(11),t._v(" "),t._m(12),t._v(" "),t._m(13),t._v(" "),a("p",[t._v("This way, the methods and logic in the Chart components, get merged into your own chart component.")]),t._v(" "),t._m(14),t._v(" "),a("p",[t._v("You need to import the base chart and extend it. This gives more flexibility when working with different data. You can encapsulate your components and use props to pass data or you can input them directly inside the component. However your component is not reusable this way.")]),t._v(" "),t._m(15),t._v(" "),t._m(16),t._m(17),t._v(" "),t._m(18),t._v(" "),a("p",[t._v("Check out the offical "),a("a",{attrs:{href:"http://www.chartjs.org/docs/latest/#creating-a-chart",target:"_blank",rel:"noopener noreferrer"}},[t._v("Chart.js docs"),a("OutboundLink")],1),t._v(" to see the object structure you need to provide.")]),t._v(" "),t._m(19),t._v(" "),t._m(20),t._v(" "),t._m(21),t._v(" "),t._m(22),t._m(23),t._v(" "),t._m(24),t._v(" "),t._m(25),t._v(" "),t._m(26),t._v(" "),t._m(27),t._v(" "),t._m(28),t._v(" "),t._m(29),t._v(" "),t._m(30),t._v(" "),t._m(31),t._m(32),t._v(" "),t._m(33),a("div",{staticClass:"danger custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("Limitations")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://vuejs.org/v2/guide/list.html#Caveats",target:"_blank",rel:"noopener noreferrer"}},[t._v("Caveats"),a("OutboundLink")],1),t._v(" "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats",target:"_blank",rel:"noopener noreferrer"}},[t._v("Change-Detection-Caveats"),a("OutboundLink")],1),t._v(" "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#vm-watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("vm.$watch"),a("OutboundLink")],1)])]),t._v(" "),t._m(34),t._v(" "),t._m(35),t._v(" "),t._m(36),t._v(" "),t._m(37),t._v(" "),t._m(38),t._v(" "),t._m(39),t._v(" "),t._m(40),t._v(" "),t._m(41),t._v(" "),t._m(42),t._v(" "),t._m(43),t._v(" "),t._m(44),t._v(" "),t._m(45),t._v(" "),t._m(46),t._v(" "),a("p",[t._v("A simple watcher would be:")]),t._v(" "),t._m(47),t._m(48),t._v(" "),t._m(49),t._v(" "),a("p",[t._v("Your goal should be to create reuseable chart components. For this purpose you should utilize Vue.js props to pass in your options and your chart data. This way the chart itself does not care,about fetching data and is only for presentation.")]),t._v(" "),a("p",[t._v("First create your component")]),t._v(" "),t._m(50),a("p",[t._v("After that you can add your chart component to a parent component")]),t._v(" "),t._m(51),t._m(52),t._v(" "),t._m(53),t._v(" "),t._m(54),t._m(55),t._v(" "),a("p",[t._v("It is a common pattern to use an API to get your data. However there are some things to keep in mind. The most common problem is, that you mount your chart component directly and pass in data from an async api call. The problem with this approach is, that chart.js tries to render your chart and access the chart data, but your api call is async. So you chart mounts before your data arrives.")]),t._v(" "),t._m(56),t._v(" "),a("p",[t._v("Create your chart component with a data prop and options prop, so we can pass in our data and options from a container component.")]),t._v(" "),t._m(57),t._v(" "),t._m(58),t._m(59),t._v(" "),t._m(60),t._m(61),t._v(" "),t._m(62),t._v(" "),t._m(63),t._v(" "),t._m(64),t._m(65),t._v(" "),a("p",[t._v("Sometimes you need to extend the default Chart.js charts. There are a lot of "),a("a",{attrs:{href:"http://www.chartjs.org/docs/latest/developers/charts.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("examples"),a("OutboundLink")],1),t._v(" how to extend and modify the default charts. Or you want to create a own chart type.")]),t._v(" "),t._m(66),t._v(" "),t._m(67),t._m(68),t._v(" "),t._m(69),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f",target:"_blank",rel:"noopener noreferrer"}},[t._v("Using vue-chartjs with WordPress"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a",target:"_blank",rel:"noopener noreferrer"}},[t._v("Create stunning Charts with Vue and Chart.js"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44",target:"_blank",rel:"noopener noreferrer"}},[t._v("Let’s Build a Web App with Vue, Chart.js and an API Part I"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf",target:"_blank",rel:"noopener noreferrer"}},[t._v("Let’s Build a Web App with Vue, Chart.js and an API Part II"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Build a realtime chart with VueJS and Pusher"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"getting-started"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting Started")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"introduction"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#introduction","aria-hidden":"true"}},[this._v("#")]),this._v(" Introduction")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("code",[this._v("vue-chartjs")]),this._v(" lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"installation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[this._v("#")]),this._v(" Installation")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"npm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[this._v("#")]),this._v(" NPM")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("You can install "),a("code",[t._v("vue-chartjs")]),t._v(" over "),a("code",[t._v("npm")]),t._v(". However you also need to add "),a("code",[t._v("chart.js")]),t._v(" as a dependency to your project. Because "),a("code",[t._v("Chart.js")]),t._v(" is a peerDependency. This way you have full control over the versioning of Chart.js")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("code",[this._v("yarn add vue-chartjs chart.js")]),this._v(" or "),s("code",[this._v("npm install vue-chartjs chart.js --save")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[this._v("TIP")]),this._v(" "),s("p",[this._v("If you are using vue 1.x please use the "),s("code",[this._v("legacy")]),this._v(" tag. However the Vue 1 version is not maintained anymore.")]),this._v(" "),s("p",[s("code",[this._v("yarn add vue-chartjs@legacy")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"browser"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#browser","aria-hidden":"true"}},[this._v("#")]),this._v(" Browser")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("You can also use "),s("code",[this._v("vue-chartjs")]),this._v(" directly in the browser.\nFirst add the "),s("code",[this._v("Chart.js")]),this._v(" script and then the "),s("code",[this._v("vue-chartjs")]),this._v(" script.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token script language-javascript"}}),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token script language-javascript"}}),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"integration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#integration","aria-hidden":"true"}},[this._v("#")]),this._v(" Integration")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Every chart type that is available in "),s("code",[this._v("Chart.js")]),this._v(" is exported as a named component and can be imported as such. These components are normal Vue components, however you need to "),s("code",[this._v("extend")]),this._v(" it.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("The idea behind "),s("code",[this._v("vue-chartjs")]),this._v(" is to provide easy to use components, with maximum flexibility and extensibility. To achive this, you need to create your own "),s("em",[this._v("Chart Component")]),this._v(" and extend it with the provided "),s("code",[this._v("vue-chartjs")]),this._v(" components.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"creating-your-first-chart"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#creating-your-first-chart","aria-hidden":"true"}},[this._v("#")]),this._v(" Creating your first Chart")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("You can import the whole package or each module individual. Then you need either to use "),a("code",[t._v("extends:")]),t._v(" or "),a("code",[t._v("mixins:[]")]),t._v(". And then in the "),a("code",[t._v("mounted()")]),t._v(" hook, call "),a("code",[t._v("this.renderChart()")]),t._v(". This will create your chart instance.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("div",{staticClass:"highlight-lines"},[a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Bar "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'vue-chartjs'")]),t._v("\n\n"),a("span",{attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("extends")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Bar"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{attrs:{class:"token function"}},[t._v("mounted")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("this")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("renderChart")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[this._v("TIP")]),this._v(" "),s("p",[this._v("You can either use "),s("code",[this._v("extends: Bar")]),this._v(" or "),s("code",[this._v("mixins: [Bar]")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("The method "),s("code",[this._v("this.renderChart()")]),this._v(" is provided by the "),s("code",[this._v("Bar")]),this._v(" component and is accepting two parameters. Both are "),s("code",[this._v("objects")]),this._v(". The first one is your chart data and the second one is an options object.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"vue-single-file-components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vue-single-file-components","aria-hidden":"true"}},[this._v("#")]),this._v(" Vue Single File Components")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Most examples in the docs are based on javascript files and not "),s("code",[this._v(".vue")]),this._v(" files. This is because you mostly will only need the "),s("code",[this._v(" + + diff --git a/docs/.vuepress/dist/fr-fr/guide/index.html b/docs/.vuepress/dist/fr-fr/guide/index.html new file mode 100644 index 00000000..b9741005 --- /dev/null +++ b/docs/.vuepress/dist/fr-fr/guide/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
📈 vue-chartjs

    Edit this page on GitHub
    + + + diff --git a/docs/.vuepress/dist/fr-fr/index.html b/docs/.vuepress/dist/fr-fr/index.html new file mode 100644 index 00000000..9caec129 --- /dev/null +++ b/docs/.vuepress/dist/fr-fr/index.html @@ -0,0 +1,25 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
    📈 vue-chartjs

    • Home

      hero

      📈 vue-chartjs

      + ⚡ Easy and beautiful charts with Chart.js and Vue.js +

      Get Started →

      Easy

      Easy for both beginners and pros 🙌

      Extendable

      Simple to use, easy to extend 💪

      Powerfull

      With the full power of chart.js 💯

      + MIT Licensed | Copyright © 2018-present Jakub Juszczak +
      + + + diff --git a/docs/.vuepress/dist/guide/index.html b/docs/.vuepress/dist/guide/index.html new file mode 100644 index 00000000..932af733 --- /dev/null +++ b/docs/.vuepress/dist/guide/index.html @@ -0,0 +1,282 @@ + + + + + + Getting Started | 📈 vue-chartjs + + + + + + + +
      📈 vue-chartjs

      Getting Started

      vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reusable chart components.

      Introduction

      vue-chartjs lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible.

      It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility.

      Installation

      NPM

      You can install vue-chartjs over npm. However you also need to add chart.js as a dependency to your project. Because Chart.js is a peerDependency. This way you have full control over the versioning of Chart.js

      yarn add vue-chartjs chart.js or npm install vue-chartjs chart.js --save

      TIP

      If you are using vue 1.x please use the legacy tag. However the Vue 1 version is not maintained anymore.

      yarn add vue-chartjs@legacy

      Browser

      You can also use vue-chartjs directly in the browser. +First add the Chart.js script and then the vue-chartjs script.

      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
+<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
+

      Integration

      Every chart type that is available in Chart.js is exported as a named component and can be imported as such. These components are normal Vue components, however you need to extend it.

      The idea behind vue-chartjs is to provide easy to use components, with maximum flexibility and extensibility. To achive this, you need to create your own Chart Component and extend it with the provided vue-chartjs components.

      This way, the methods and logic in the Chart components, get merged into your own chart component.

      Creating your first Chart

      You need to import the base chart and extend it. This gives more flexibility when working with different data. You can encapsulate your components and use props to pass data or you can input them directly inside the component. However your component is not reusable this way.

      You can import the whole package or each module individual. Then you need either to use extends: or mixins:[]. And then in the mounted() hook, call this.renderChart(). This will create your chart instance.

       


       

       



      import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  mounted () {
+    this.renderChart(data, options)
+  }
+}
+

      TIP

      You can either use extends: Bar or mixins: [Bar]

      The method this.renderChart() is provided by the Bar component and is accepting two parameters. Both are objects. The first one is your chart data and the second one is an options object.

      Check out the offical Chart.js docs to see the object structure you need to provide.

      Vue Single File Components

      Most examples in the docs are based on javascript files and not .vue files. This is because you mostly will only need the <script> block. You can however use .vue files as well.

      Chart.vue

      <script>
+import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: ['chartdata', 'options'],
+  mounted () {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+</script>
+
+<style>
+</style>
+

      Template Tag can not be merged

      Do not include the <template> tag to your .vue files. Vue can not merge templates. If you add an empty <template> tag, Vue will took the template from your component and not from the extended one, which will result in an empty template and errors.

      Updating Charts

      Chart.js does not provide a live update if you change the datasets. However vue-chartjs provides two mixins to achieve this.

      • reactiveProp
      • reactiveData

      Both mixins do actually achieve the same. Most of the time you will use reactiveProp. It extends the logic of your chart component and automatically creates a prop named chartData and adds a vue watch on this prop. On data change, it will either call update() if only the data inside the datasets has changed or renderChart() if new datasets were added.

      reactiveData simply creates a local chartData variable which is not a prop! and adds a watcher. This is only useful, if you need single purpose charts and make an API call inside your chart component.

      Example

      LineChart.js

      import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // 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)
+  }
+}
+

      RandomChart.vue

      <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>
+

      Limitations

      Caveats Change-Detection-Caveats vm.$watch

      Events

      The reactive mixins will emit events if the data changes. You can listen to them with v:on on the chart component. Following events are available:

      • chart:render - if the mixin performs a complete rerender
      • chart:destroy - if the mixin deletes the chart object instance
      • chart:update - if the mixin performs an update instead of a re-render
      • labels:update - if new labels were set
      • xlabels:update if new xLabels were set
      • ylabels:update - if new yLabels were set

      Troubleshooting

      The reactivity system at it's current state is not robust. You will run into several problems with it, because there are many use-cases and ways to pass in your data.

      Options

      The options object is not reactive right now. So if you dynamically change the chart options, they will not be recognized by the mixin.

      If you are using the mixin you need to pass in your options as a prop names options. This is important because the mixin will call chart.js update() method or destroy and render a new chart. If the mixin renders a new chart it calls this.renderChart(this.chartData, this.options).

      But if you pass in your options directly in your mounted() hook, they get lost.

      Wrong Way







       



      import { Line, mixins } from 'vue-chartjs'
+
+export default {
+  components: { Line }
+  mixins: [mixins.reactiveProp],
+  mounted () {
+    this.renderChart(this.chartData, {responsive: true})
+  }
+}
+

      Right Way







       



      import { Line, mixins } from 'vue-chartjs'
+
+export default {
+  components: { Line }
+  mixins: [mixins.reactiveProp],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+}
+

      Own watcher

      If you transform your data a lot of changing it (instead of pushing new data) it is the best, if you implement your own watcher. +You can then either call this.$data._chart.update() or this.renderChart() by yourself, depending on your needs.

      A simple watcher would be:

      watch: {
+  chartData () {
+    this.$data._chart.update()
+  }
+}
+

      Exampels

      Chart with props

      Your goal should be to create reuseable chart components. For this purpose you should utilize Vue.js props to pass in your options and your chart data. This way the chart itself does not care,about fetching data and is only for presentation.

      First create your component

      import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: {
+    chartdata: {
+      type: Object,
+      default: null
+    }
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  mounted () {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+

      After that you can add your chart component to a parent component

       <line-chart :chartdata="chartData" :options="chartOptions"/>
+

      Chart with local data

      You can handle your chart data directly in your own chart component. You only need to pass it to the renderChart() method.

      import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  data: () => ({
+    chartdata: {
+      datacollection: {
+        labels: ['January', 'February'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20]
+          }
+        ]
+      }
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  }),
+
+  mounted () {
+    this.renderChart(this.datacollection, this.options)
+  }
+}
+

      Chart with API data

      It is a common pattern to use an API to get your data. However there are some things to keep in mind. The most common problem is, that you mount your chart component directly and pass in data from an async api call. The problem with this approach is, that chart.js tries to render your chart and access the chart data, but your api call is async. So you chart mounts before your data arrives.

      To prevent this, a simple v-if is the best solution.

      Create your chart component with a data prop and options prop, so we can pass in our data and options from a container component.

      Chart.vue

      import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: {
+    chartdata: {
+      type: Object,
+      default: null
+    }
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  mounted () {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+

      Then create a container component, which handles your api call or vuex connection. +ChartContainer.vue




       




























      <template>
+  <div class="container">
+    <line-chart
+      v-if="loaded"
+      :chartdata="chartdata"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+import LineChart from './LineChart.vue'
+
+export default {
+  name: 'LineChartContainer',
+  components: { LineChart },
+  data: () => ({
+    loaded: false,
+    chartdata: null
+  }),
+  async mounted () {
+    this.loaded = false
+      try {
+        const { userlist } = await fetch('/api/userlist')
+        this.chartData = userlist
+        this.loaded = true
+      } catch (e) {
+        console.error(e)
+      }
+  }
+}
+</script>
+

      Chart with dynamic styles

      You can set responsive: true and pass in an styles object which get applied as inline styles to the outer div. This way you can change the height and width of the outer container dynamically. Which is not the default behaviour of chart.js. It is best to use computed properties for this.

      WARNING

      You need to set position: relative

      <template>
+     <div>
+       <line-chart :styles="myStyles"/>
+       <button @click="increase()">Increase height</button>
+     </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      height: 300
+    }
+  },
+  methods: {
+    increase () {
+     this.height += 10
+    }
+  },
+  computed: {
+    myStyles () {
+      return {
+        height: `${this.height}px`,
+        position: 'relative'
+      }
+    }
+  }
+}
+</script>
+

      Custom / New Charts

      Sometimes you need to extend the default Chart.js charts. There are a lot of examples how to extend and modify the default charts. Or you want to create a own chart type.

      In vue-chartjs you can do this pretty much the same way.

      // 1. Import Chart.js so you can use the global Chart object
+import Chart from 'chart.js'
+// 2. Import the `generateChart()` method to create the vue component.
+import { generateChart } from 'vue-chartjs'
+
+// 3. Extend on of the default charts
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */})
+
+// 4. Generate the vue-chartjs component
+// First argument is the chart-id, second the chart type.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+
+// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
+
+export default {
+  extends: CustomLine,
+  mounted () {
+    // ....
+  }
+}
+

      Resources

      You can find here some resources like tutorials on how to use vue-chartjs

      Edit this page on GitHub
      + + + diff --git a/docs/.vuepress/dist/id/api/index.html b/docs/.vuepress/dist/id/api/index.html new file mode 100644 index 00000000..8144101c --- /dev/null +++ b/docs/.vuepress/dist/id/api/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
      📈 vue-chartjs

        Edit this page on GitHub
        + + + diff --git a/docs/.vuepress/dist/id/guide/index.html b/docs/.vuepress/dist/id/guide/index.html new file mode 100644 index 00000000..386e5712 --- /dev/null +++ b/docs/.vuepress/dist/id/guide/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
        📈 vue-chartjs

          Edit this page on GitHub
          + + + diff --git a/docs/.vuepress/dist/id/index.html b/docs/.vuepress/dist/id/index.html new file mode 100644 index 00000000..076ac991 --- /dev/null +++ b/docs/.vuepress/dist/id/index.html @@ -0,0 +1,25 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
          📈 vue-chartjs

          • Home

            hero

            📈 vue-chartjs

            + ⚡ Easy and beautiful charts with Chart.js and Vue.js +

            Get Started →

            Easy

            Easy for both beginners and pros 🙌

            Extendable

            Simple to use, easy to extend 💪

            Powerfull

            With the full power of chart.js 💯

            + MIT Licensed | Copyright © 2018-present Jakub Juszczak +
            + + + diff --git a/docs/.vuepress/dist/index.html b/docs/.vuepress/dist/index.html index 85707597..e5d3e52c 100644 --- a/docs/.vuepress/dist/index.html +++ b/docs/.vuepress/dist/index.html @@ -3,15 +3,23 @@ - Hello World VP - + 📈 vue-chartjs + - - + + -

            Hello World VP

            - +
            📈 vue-chartjs

            • Home

              hero

              📈 vue-chartjs

              + ⚡ Easy and beautiful charts with Chart.js and Vue.js +

              Get Started →

              Easy

              Easy for both beginners and pros 🙌

              Extendable

              Simple to use, easy to extend 💪

              Powerfull

              With the full power of chart.js 💯

              + MIT Licensed | Copyright © 2018-present Jakub Juszczak +
              + diff --git a/docs/.vuepress/dist/ja/api/index.html b/docs/.vuepress/dist/ja/api/index.html new file mode 100644 index 00000000..b565204b --- /dev/null +++ b/docs/.vuepress/dist/ja/api/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
              📈 vue-chartjs

                Edit this page on GitHub
                + + + diff --git a/docs/.vuepress/dist/ja/guide/index.html b/docs/.vuepress/dist/ja/guide/index.html new file mode 100644 index 00000000..0555430b --- /dev/null +++ b/docs/.vuepress/dist/ja/guide/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                📈 vue-chartjs

                  Edit this page on GitHub
                  + + + diff --git a/docs/.vuepress/dist/ja/index.html b/docs/.vuepress/dist/ja/index.html new file mode 100644 index 00000000..57c42526 --- /dev/null +++ b/docs/.vuepress/dist/ja/index.html @@ -0,0 +1,25 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                  📈 vue-chartjs

                  • Home

                    hero

                    📈 vue-chartjs

                    + ⚡ Easy and beautiful charts with Chart.js and Vue.js +

                    Get Started →

                    Easy

                    Easy for both beginners and pros 🙌

                    Extendable

                    Simple to use, easy to extend 💪

                    Powerfull

                    With the full power of chart.js 💯

                    + MIT Licensed | Copyright © 2018-present Jakub Juszczak +
                    + + + diff --git a/docs/.vuepress/dist/pt-br/api/index.html b/docs/.vuepress/dist/pt-br/api/index.html new file mode 100644 index 00000000..9cb4e79b --- /dev/null +++ b/docs/.vuepress/dist/pt-br/api/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                    📈 vue-chartjs

                      Edit this page on GitHub
                      + + + diff --git a/docs/.vuepress/dist/pt-br/guide/index.html b/docs/.vuepress/dist/pt-br/guide/index.html new file mode 100644 index 00000000..6f5479eb --- /dev/null +++ b/docs/.vuepress/dist/pt-br/guide/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                      📈 vue-chartjs

                        Edit this page on GitHub
                        + + + diff --git a/docs/.vuepress/dist/pt-br/index.html b/docs/.vuepress/dist/pt-br/index.html new file mode 100644 index 00000000..4cb87f9c --- /dev/null +++ b/docs/.vuepress/dist/pt-br/index.html @@ -0,0 +1,25 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                        📈 vue-chartjs

                        • Home

                          hero

                          📈 vue-chartjs

                          + ⚡ Easy and beautiful charts with Chart.js and Vue.js +

                          Get Started →

                          Easy

                          Easy for both beginners and pros 🙌

                          Extendable

                          Simple to use, easy to extend 💪

                          Powerfull

                          With the full power of chart.js 💯

                          + MIT Licensed | Copyright © 2018-present Jakub Juszczak +
                          + + + diff --git a/docs/.vuepress/dist/ru/api/index.html b/docs/.vuepress/dist/ru/api/index.html new file mode 100644 index 00000000..62452825 --- /dev/null +++ b/docs/.vuepress/dist/ru/api/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                          📈 vue-chartjs

                            Edit this page on GitHub
                            + + + diff --git a/docs/.vuepress/dist/ru/guide/index.html b/docs/.vuepress/dist/ru/guide/index.html new file mode 100644 index 00000000..ce981a98 --- /dev/null +++ b/docs/.vuepress/dist/ru/guide/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                            📈 vue-chartjs

                              Edit this page on GitHub
                              + + + diff --git a/docs/.vuepress/dist/ru/index.html b/docs/.vuepress/dist/ru/index.html new file mode 100644 index 00000000..33fc3800 --- /dev/null +++ b/docs/.vuepress/dist/ru/index.html @@ -0,0 +1,25 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                              📈 vue-chartjs

                              • Home

                                hero

                                📈 vue-chartjs

                                + ⚡ Easy and beautiful charts with Chart.js and Vue.js +

                                Get Started →

                                Easy

                                Easy for both beginners and pros 🙌

                                Extendable

                                Simple to use, easy to extend 💪

                                Powerfull

                                With the full power of chart.js 💯

                                + MIT Licensed | Copyright © 2018-present Jakub Juszczak +
                                + + + diff --git a/docs_old/assets/vue-chartjs.png b/docs/.vuepress/dist/vue-chartjs.png similarity index 100% rename from docs_old/assets/vue-chartjs.png rename to docs/.vuepress/dist/vue-chartjs.png diff --git a/docs_old/assets/vue-chartjs.svg b/docs/.vuepress/dist/vue-chartjs.svg similarity index 100% rename from docs_old/assets/vue-chartjs.svg rename to docs/.vuepress/dist/vue-chartjs.svg diff --git a/docs/.vuepress/dist/zh-cn/api/index.html b/docs/.vuepress/dist/zh-cn/api/index.html new file mode 100644 index 00000000..b4a05447 --- /dev/null +++ b/docs/.vuepress/dist/zh-cn/api/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                                📈 vue-chartjs

                                  Edit this page on GitHub
                                  + + + diff --git a/docs/.vuepress/dist/zh-cn/guide/index.html b/docs/.vuepress/dist/zh-cn/guide/index.html new file mode 100644 index 00000000..878df4fd --- /dev/null +++ b/docs/.vuepress/dist/zh-cn/guide/index.html @@ -0,0 +1,21 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                                  📈 vue-chartjs

                                    Edit this page on GitHub
                                    + + + diff --git a/docs/.vuepress/dist/zh-cn/index.html b/docs/.vuepress/dist/zh-cn/index.html new file mode 100644 index 00000000..fde886cc --- /dev/null +++ b/docs/.vuepress/dist/zh-cn/index.html @@ -0,0 +1,25 @@ + + + + + + 📈 vue-chartjs + + + + + + + +
                                    📈 vue-chartjs

                                    • Home

                                      hero

                                      📈 vue-chartjs

                                      + ⚡ Easy and beautiful charts with Chart.js and Vue.js +

                                      Get Started →

                                      Easy

                                      Easy for both beginners and pros 🙌

                                      Extendable

                                      Simple to use, easy to extend 💪

                                      Powerfull

                                      With the full power of chart.js 💯

                                      + MIT Licensed | Copyright © 2018-present Jakub Juszczak +
                                      + + + diff --git a/docs/reference/README.md b/docs/api/README.md similarity index 100% rename from docs/reference/README.md rename to docs/api/README.md diff --git a/docs/fr-fr/reference/README.md b/docs/fr-fr/api/README.md similarity index 100% rename from docs/fr-fr/reference/README.md rename to docs/fr-fr/api/README.md diff --git a/docs/id/reference/README.md b/docs/id/api/README.md similarity index 100% rename from docs/id/reference/README.md rename to docs/id/api/README.md diff --git a/docs/ja/reference/README.md b/docs/ja/api/README.md similarity index 100% rename from docs/ja/reference/README.md rename to docs/ja/api/README.md diff --git a/docs/pt-br/reference/README.md b/docs/pt-br/api/README.md similarity index 100% rename from docs/pt-br/reference/README.md rename to docs/pt-br/api/README.md diff --git a/docs/ru/reference/README.md b/docs/ru/api/README.md similarity index 100% rename from docs/ru/reference/README.md rename to docs/ru/api/README.md diff --git a/docs/zh-cn/reference/README.md b/docs/zh-cn/api/README.md similarity index 100% rename from docs/zh-cn/reference/README.md rename to docs/zh-cn/api/README.md diff --git a/docs_old/.nojekyll b/docs_old/.nojekyll deleted file mode 100644 index e69de29b..00000000 diff --git a/docs_old/CNAME b/docs_old/CNAME deleted file mode 100644 index c915bec1..00000000 --- a/docs_old/CNAME +++ /dev/null @@ -1 +0,0 @@ -vue-chartjs.org \ No newline at end of file diff --git a/docs_old/README.md b/docs_old/README.md deleted file mode 100644 index 50408395..00000000 --- a/docs_old/README.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -search: -- "language\:en" ---- - -# vue-chartjs -**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reusable chart components. - -## Introduction -`vue-chartjs` lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible. - -It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility. - -## Installation -If you are working with Vue.js 2+ simple run: - -`yarn add vue-chartjs chart.js` - -If you are using vue 1.x please use the `legacy` tag. However the Vue 1 version is not maintained anymore. - -`yarn add vue-chartjs@legacy` - - -## Legend Generation - -`vue-chartjs` provides a small helper to generate a HTML legend. - -```js -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() - } -} -``` - -## Examples - -## Reactive Data - -Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achieve this. - -- `reactiveProp` -- `reactiveData` - -Both mixins do actually achieve the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop named `chartData` and adds a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added. - -`reactiveData` simply creates a local chartData variable which is not a prop! and adds a watcher. This is only useful, if you need single purpose charts and make an API call inside your chart component. - -```javascript -data () { - return { - chartData: null - } -} -``` - -### Events - -The reactive mixins will emit events if the data changes. You can listen to them with `v:on` on the chart component. Following events are available: - -- `chart:render` - if the mixin performs a complete rerender -- `chart:destroy` - if the mixin deletes the chart object instance -- `chart:update` - if the mixin performs an update instead of a re-render -- `labels:update` - if new labels were set -- `xlabels:update` if new xLabels were set -- `ylabels:update` - if new yLabels were set - -### Example - -**LineChart.js** -```javascript -import { Line, mixins } from 'vue-chartjs' -const { reactiveProp } = mixins - -export default { - extends: Line, - mixins: [reactiveProp], - props: ['options'], - mounted () { - // 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) - } -} -``` - -**RandomChart.vue** - -```javascript - - - - - -``` - -

                                      - ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep the javascript limitations in mind. - More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44) -

                                      - -### Limitations - - -## Chart.js object - -Sometimes you need more control over Chart.js. That's why you can access the Chart.js instance over `this.$data._chart`. - -## Inline plugins - -In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described. - -If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()` -You should call `addPlugin()` before the `renderChart()` method. - -### Example - -```javascript -mounted () { - this.addPlugin({ - id: 'my-plugin', - beforeInit: function (chart) { - .... - } - }) -} -``` -## Custom / New Charts - -Sometimes you need to extend the default Chart.js charts. There are a lot of examples how to extend and modify the default charts. Or you want to create a own chart type. - -In `vue-chartjs` you can do this pretty much the same way. - -```js -// 1. Import Chart.js so you can use the global Chart object -import Chart from 'chart.js' -// 2. Import the `generateChart()` method to create the vue component. -import { generateChart } from 'vue-chartjs' - -// 3. Extend on of the default charts -// http://www.chartjs.org/docs/latest/developers/charts.html -Chart.defaults.LineWithLine = Chart.defaults.line; -Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */}) - -// 4. Generate the vue-chartjs component -// First argument is the chart-id, second the chart type. -const CustomLine = generateChart('custom-line', 'LineWithLine') - -// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts. - -export default { - extends: CustomLine, - mounted () { - // .... - } -} -``` - -## Available Charts - -### Bar Chart -

                                      - There are two versions of the Bar chart: `{Bar}` and `{HorizontalBar}` -

                                      - -![Bar](assets/bar.png) -### Line Chart - -![Line](assets/line.png) - -### Doughnut - -![Doughnut](assets/doughnut.png) - -### Pie - -![Pie](assets/pie.png) - -### Radar - -![Pie](assets/radar.png) - -### Polar Area - -![Pie](assets/polar.png) - -### Bubble - -![Bubble](assets/bubble.png) - -### Scatter - -This chart has a different data structure then the others. Right now the reactive mixins are not working for this chart type. - -![Scatter](assets/scatter.png) - -## Resources - -You can find here some resources like tutorials on how to use `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/) diff --git a/docs_old/_landing.html b/docs_old/_landing.html deleted file mode 100644 index 17e3760e..00000000 --- a/docs_old/_landing.html +++ /dev/null @@ -1,78 +0,0 @@ -

                                      📈 vue-chartjs

                                      - -

                                      ⚡ Easy and beautiful charts with Chart.js and Vue.js

                                      - - - -
                                      - - GitHub - - - - Docs - - - - Demo - -
                                      - - diff --git a/docs_old/assets/bar.png b/docs_old/assets/bar.png deleted file mode 100755 index d93d7bb7..00000000 Binary files a/docs_old/assets/bar.png and /dev/null differ diff --git a/docs_old/assets/bubble.png b/docs_old/assets/bubble.png deleted file mode 100755 index f82f7488..00000000 Binary files a/docs_old/assets/bubble.png and /dev/null differ diff --git a/docs_old/assets/doughnut.png b/docs_old/assets/doughnut.png deleted file mode 100755 index 07977753..00000000 Binary files a/docs_old/assets/doughnut.png and /dev/null differ diff --git a/docs_old/assets/line.png b/docs_old/assets/line.png deleted file mode 100755 index 28bf84a6..00000000 Binary files a/docs_old/assets/line.png and /dev/null differ diff --git a/docs_old/assets/logo.png b/docs_old/assets/logo.png deleted file mode 100644 index f3d2503f..00000000 Binary files a/docs_old/assets/logo.png and /dev/null differ diff --git a/docs_old/assets/pie.png b/docs_old/assets/pie.png deleted file mode 100755 index ee54d683..00000000 Binary files a/docs_old/assets/pie.png and /dev/null differ diff --git a/docs_old/assets/polar.png b/docs_old/assets/polar.png deleted file mode 100755 index 8343f6be..00000000 Binary files a/docs_old/assets/polar.png and /dev/null differ diff --git a/docs_old/assets/radar.png b/docs_old/assets/radar.png deleted file mode 100755 index ab8e6a5d..00000000 Binary files a/docs_old/assets/radar.png and /dev/null differ diff --git a/docs_old/assets/scatter.png b/docs_old/assets/scatter.png deleted file mode 100755 index 6a357053..00000000 Binary files a/docs_old/assets/scatter.png and /dev/null differ diff --git a/docs_old/config.js b/docs_old/config.js deleted file mode 100644 index 9ba85fd2..00000000 --- a/docs_old/config.js +++ /dev/null @@ -1,61 +0,0 @@ -const langs = [ - {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/}, - {title: 'Deutsch', path: '/de/', matchPath: /^\/de/}, - {title: 'Français', path: '/fr-fr/', matchPath: /^\/fr-fr/}, - {title: '日本語', path: '/ja/', matchPath: /^\/ja/}, - {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}, - {title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/}, - {title: 'Русский', path: '/ru/', matchPath: /^\/ru/}, - {title: 'Bahasa Indonesia', path: '/id/', matchPath: /^\/ru/} -] - -docute.init({ - title: 'vue-chartjs documentation', - announcement(route) { - const info = { type: 'success' } - info.html = 'Donate! Support vue-chartjs development by a one-time donation.' - return info - }, - debug: true, - landing: '_landing.html', - repo: 'apertureless/vue-chartjs', - twitter: 'apertureless', - tocVisibleDepth: 2, - 'edit-link': 'https://github.com/apertureless/vue-chartjs/blob/master/docs', - nav: { - default: [ - { - title: 'Home', path: '/home' - }, - { - title: 'Changelog', path: '/changelog', source: 'https://raw.githubusercontent.com/apertureless/vue-chartjs/develop/CHANGELOG.md' - }, - { - title: 'Languages', type: 'dropdown', items: langs - } - ], - 'de': [ - { - title: 'Startseite', path: '/de/' - } - ], - 'fr-fr': [ - { - title: 'Home', path: '/fr-fr/' - } - ] - }, - plugins: [ - evanyou(), - docsearch({ - appId: 'BH4D9OD16A', - apiKey: 'b3544f7387612693644777553675d56a', - indexName: 'vue-chartjs', - // algolia docsearch allows you to search with tag filter - tags: ['en', 'fr-fr', 'id', 'ja', 'pt-br', 'ru', 'zh-cn'], - // this plugin does require a url too - // where docsearch fetches contents - url: 'http://vue-chartjs.org' - }) - ] -}) diff --git a/docs_old/fr-fr/README.md b/docs_old/fr-fr/README.md deleted file mode 100644 index af0279bc..00000000 --- a/docs_old/fr-fr/README.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -search: -- "language\:fr-fr" ---- - -# vue-chartjs -**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components. - -## Introduction -`vue-chartjs` vous permet d'utiliser chart.js avec vue sans prise de tête. C'est la solution idéale pour ceux qui souhaitent créer des graphes simplement et rapidement. - -La logique interne de chart.js est abstraite, mais l'objet sous-jacent est exposé, de sorte que vous puissiez bénéficier de la plus grande flexibilité possible. - -## Installation -Si vous travaillez avec Vue.js 2+, exécutez simplement : - -`yarn add vue-chartjs chart.js` - -Avec vue 1.x, il vous faudra utiliser le marqueur `legacy`. Notez toutefois que la version 1 de vue n'est plus maintenue à l'heure actuelle. - -`yarn add vue-chartjs@legacy` - -## Démarrage rapide - -Importez l'objet graphe de base afin de l'étendre. Cette façon de faire offre beaucoup plus de flexibilité lorsque plusieurs sources de données sont utilisées. -Il est possible d'encapsuler vos composants et d'utiliser les props pour transmettre les données, ou vous pouvez également les indiquer directement à l'intérieur du composant. Cependant, cette seconde méthode ne créera pas des composants réutilisables. - -Vous pouvez choisir d'importer le package dans son intégralité, ou chaque composant individuellement. - -```javascript -// CommitChart.js -import { Bar } from 'vue-chartjs' - -export default { - extends: Bar, - mounted () { - // Surcharge de la méthode render avec les données. - this.renderChart(data, options) - } -} -``` - -La méthode `renderChart()` prend deux paramètres : - -- un objet de données -- un objet d'options - -### Objet de données - -L'objet de données prend la structure suivante : - -```javascript -{ - labels: ['Janvier', 'Février'], - datasets: [ - { - label: 'Commits sur GitHub', - backgroundColor: '#f87979', - data: [40, 20] - } - ] -} -``` - -Pour plus d'informations, vous pouvez lire la documentation [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data). - -## Props - -Certains props de base sont définis dans BaseCharts. Grâce à l'héritage de l'opération `extend()`, ceux-ci peuvent être surchargés, bien qu'ils soient *invisibles*. - -| Prop | Description | -|---|---| -| width | largeur du graphe | -| height | hauteur du graphe | -| chart-id | id du canvas | -| css-classes | Chaîne de caractères avec les classes CSS à appliquer à l'élément div parent | -| styles | Object avec les styles CSS à appliquer à l'élément div parent | - -## Exemples - -Voici quelques exemples. - -### Graphe avec props - -Vous pouvez créer les props data et options à transmetttre au graphe. - -```javascript -// LineChart.js -import { Line } from 'vue-chartjs' - -export default { - extends: Line, - props: ['data', 'options'], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -Vous pourrez les utiliser après avoir ajouté votre composant : - -```html - -``` - -Si vous souhaitez modifier la hauteur ou la largeur : - -```html - - -``` - -

                                      -Vous devrez préciser `responsive: false` si vous souhaitez appliquer une taille fixe avec `width` et `height`. -

                                      - -### Graphe avec données locales - -```javascript -import {Bar} from 'vue-chartjs' - -export default { - extends: Bar, - data () { - return { - datacollection: { - labels: ['Janvier', 'Février'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 20] - } - ] - } - } - }, - mounted () { - this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false}) - } -} -``` - -### Composants réutilisables - -Si vous souhaitez faire en sorte que vos composants restent réutilisables, appliquez un wrapper. De cette manière, le composant graphique est seulement responsable de la représentation de la donnée, alors que le wrapper se charge de la logique derrière elle. Il y a de nombreux cas d'utilisations, et la manière de faire sera différente si vous êtes sur une Application Monopage (SPA) ou si vous intégrez sur du Laravel par exemple. - -## Données en direct - -Chart.js ne fournit pas de mécanisme de mise à jour automatique si jamais vous deviez modifier vos jeux de données. Cependant, `vue-chartjs` met à disposition deux mixins pour cela : - -- `reactiveProp` -- `reactiveData` - -Tous deux réalisent le même travail. La plupart du temps, c'est `reactiveProp` que vous utiliserez. Il reprend la logique de votre composant graphique, et crée automatiquement une prop `chartData` et ajoute une `vue watch` sur celle-ci. Lorsque la donnée change, `update()` sera appelée si c'est seulement le coeur de la donnée qui est modifié, et `renderChart()` si de nouveaux jeux de données ont été ajoutés. - -`reactiveData` crée une variable locale chartData (pas une prop !), et lui ajoute un watcher. -Le seul cas d'utilisation est celui où vous souhaitez un graphe à usage unique, et que vous effectuez des appels API à l'intérieur même du composant. - -```javascript -data () { - return { - chartData: null - } -} -``` - -### Exemple - -**LineChart.js** - -```javascript -import { Line, mixins } from 'vue-chartjs' -const { reactiveProp } = mixins - -export default { - extends: Line, - mixins: [reactiveProp], - props: ['options'], - mounted () { - // this.chartData est créé par le mixin. - // si vous voulez transmettre des options, il faudra créer une variable locale - this.renderChart(this.chartData, this.options) - } -} -``` - -**RandomChart.vue** - -```javascript - - - - - -``` - -

                                      - ⚠ Attention : si vous permutez vos données dans un composant parent puis les transmettez à un composant enfant, gardez à l'esprit les limitations de javascript. - Plus d'infos sur [issue#44](https://github.com/apertureless/vue-chartjs/issues/44). -

                                      - -### Limitations - - -## Objet Chart.js - -Il peut arriver d'avoir besoin de plus de contrôle sur l'objet chart.js. Vous pouvez, à cet effet, accéder à cet objet via `this.$data._chart`. - -## Plugins inline - -Avec Chart.js, vous pouvez définir des pugins globaux ou inline. Les plugins globaux fonctionnent sans souci avec `vue-chartjs`, comme décrit dans la [documentation chart.js](http://www.chartjs.org/docs/latest/developers/plugins.html). - -Si vous désirez ajouter des plugins inline, `vue-chartjs` expose une méthode `addPlugin()`. L'appel à cette méthode doit se faire avant celui de `renderChart()`. - -### Exemple - -```javascript -mounted () { - this.addPlugin({ - id: 'mon-plugin', - beforeInit: function (chart) { - .... - } - }) -} -``` - -## Diagrammes disponibles - -### Colonnes - -

                                      - Il y a deux versions du diagramme colonnes : `{Bar}` et `{HorizontalBar}` -

                                      - -![Colonnes](../assets/bar.png) - -### Ligne - -![Ligne](../assets/line.png) - -### Beignet - -![Beignet](../assets/doughnut.png) - -### Circulaire - -![Circulaire](../assets/pie.png) - -### Radar - -![Radar](../assets/radar.png) - -### Polaire - -![Plaire](../assets/polar.png) - -### Bulles - -![Bulles](../assets/bubble.png) - - -### Nuages de points - -Ce diagramme utilise une structure de données différente des autres. Pour le moment, les mixis de mise à jour de données ne fonctionnent pas avec ce type de graphique. - -![Nuage de points](../assets/scatter.png) - - -## Explications sur les différents builds - -Il y a trois builds différents. Le choix dépend de votre projet. Les dépendances sont soient intégrées, soit marquées comme peerDependency. - -- Browser -- Browserify / Webpack 1 -- Webpack 2 - - -| Build | Chart.js | Vue.js | -|---|---|---| -| vue-chartjs.full.js | Intégré | Intégré | -| vue-chartjs.full.min.js | Intégré | Intégré | -| vue-chartjs.js | peerDependency | peerDependency | -| vue-chartjs.min.js | peerDependency | peerDependency | -| es/index* | peerDependency | peerDependency | - -### Browser - -Vous pouvez utiliser `vue-chartjs` directement depuis votre navigateur sans aucun pré-requis. Comme par exemple sur ce [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Dans une telle situation, veuillez utiliser `vue-chartjs.full.min.js`, qui est la version compressée. Elle intègre Vue.js et Chart.js, et est bundlée à un module UMD. Donc ce fichier se suffit à lui-même. - - -### Browserify / Webpack 1 - -Si vous utilisez Gulp, Browserify ou Webpack 1, vous devrez prendre `vue-chartjs.js`, qui est __transpilé__ et __bundlé__ comme module UMD. - -Toutefois, Vue.js et Chart.js sont des `peerDependencies`, vous devrez donc les installer séparemment. Dans la plupart des projets, `Vue.js` sera de toute façon déjà installé. De cette manière, vous pouvez utiliser des versions différentes de Vue.js et Chart.js dans un même package. - -### Webpack 2 - -Si vous utilisez Webpack 2, `jsnext:main` / `module` sera automatiquement sélectionné. `es/index.js`est une version es __transpilée__ des sources, et n'est pas __bundlée__ à un module. Ainsi, rien ne devrait bloquer l'élimination de code mort. Comme dans la version bundlée précédente, `Vue.js` et `Chart.js` sont des `peerDependencies` et doivent être installés. - -## Ressources - -Voici une liste de ressources et tutoriels sur comment utiliser `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/) diff --git a/docs_old/id/README.md b/docs_old/id/README.md deleted file mode 100644 index 4fee7359..00000000 --- a/docs_old/id/README.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -search: -- "language\:id" ---- - -# vue-chartjs -**vue-chartjs** adalah wrapper [Chart.js](https://github.com/chartjs/Chart.js) dalam vue. Kamu dapat dengan mudah membuat komponen chart reusable. - -## Pengenalan -`vue-chartjs` memungkinkan kamu untuk menggunakan chart.js tanpa usaha lebih didalam vue. Sempurna untuk orang-orang yang membutuhkan bagan/chart simpel dengan cepat. - -Flexibel karena langsung menampilkan objek chart.js. - - -## Instalasi -Jika kamu menggunakan Vue.js 2+: - -`yarn add vue-chartjs chart.js` - -Jika menggunakan vue 1.x gunakan tag `legacy`. versi vue 1 sudah tidak diurus lagi. - -`yarn add vue-chartjs@legacy` - -## Mulai Cepat - -Kamu perlu untuk meng-import base chart dan meng-extend-nya. Dengan cara ini akan lebih fleksibel ketika bekerja dengan data yang berbeda. -Kamu dapat melakukan enkapsulasi komponen-komponen dan menggunakan props untuk menyampaikan data atau bisa juga dengan menginputkan langsung didalam komponen. Namun komponenmu tidak reuseable. - -Kamu bisa meng-import seluruh package atau modul-modul terpisah. - -```javascript -// CommitChart.js -import { Bar } from 'vue-chartjs' - -export default { - extends: Bar, - mounted () { - // Overwriting base render method with actual data. - this.renderChart(data, options) - } -} -``` - -Kamu dapat melewatkan dua argumen pada `renderChart()`: - -- Objek Data -- Objek Opsi - -### Data object - -Objek data: - -```javascript -{ - labels: ['January', 'February'], - datasets: [ - { - label: 'GitHub Commits', - backgroundColor: '#f87979', - data: [40, 20] - } - ] -} -``` - -Untuk keterangan lebih lanjut dapat dilihat di dokumentasi [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data). - -## Props - -Terdapat beberapa props standar yang didefinisikan didalam BaseChart. Karena menggunakan `extend()`, props-props tersebut *tidak terlihat*, Namun kamu tetap bisa menulis ulang: - -| Prop | Description | -|---|---| -| width | lebar chart | -| height | tinggi chart | -| chart-id | id canvas | -| css-classes | String dengan kelas css mengelilingi div | -| styles | Objek dengan style css mengelilingi div | - -## Contoh - -Berikut adalah beberapa contoh penggunaan - -### Chart dengan props - -Kamu dapat membuat props data dan opsi untuk melewatkan data pada chart. - -```javascript -// LineChart.js -import { Line } from 'vue-chartjs' - -export default { - extends: Line, - props: ['data', 'options'], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -Setelah kamu menambahkannya kamu dapat menggunakannya seperti biasa: - -```html - -``` - -Jika kamu ingin mengatur tinggi dan lebar: - -```html - - -``` - -

                                      - Perlu diingat, kamu perlu untuk mengatur `responsive: false` agaar dapat mengatur `width` dan `height`. -

                                      - -### Chart dengan data lokal - -```javascript -import {Bar} from 'vue-chartjs' - -export default { - extends: Bar, - data () { - return { - datacollection: { - labels: ['January', 'February'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 20] - } - ] - } - } - }, - mounted () { - this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false}) - } -} -``` - -### Reusable Komponen - -Jika kamu ingin agar komponen chart reusable, cara paling baik adalah dengan menambahkan sebuah wrapper. Dengan cara ini komponen chart hanya bertanggung jawab dalam representasi data dan wrapper komponen bertanggung jawab dengan logika didalamnya. Banyak kasus-kasus yang berbeda dan juga berbeda jika kamu menjalankan Single Page Application atau mengintegrasikannya pada contoh laravel. - -## Reactive Data - -Chart.js tidak menyediakan live update jika kamu mengubah datasets. Akan tetapi `vue-chartjs` menyediakan 2 mixins untuk melakukannya. - -- `reactiveProp` -- `reactiveData` - -Kedua mixins tersebut sebenarnya sama. `reactiveProp` akan sering digunakan. `reactiveProp` meng-extend logika dari komponen chart dan secara otomatis membuat props `chartData` dan menambahkan `vue watch` dalam props ini. Pada saat data berubah, itu akan memanggil `update()` jika data memiliki datasets atau `renderChart()` jika datasets telah ada sebelumnya. - -`reactiveData` secara sederhana membuat variabel lokal chartData dimana itu bukan sebuah props! dan watcher. Hal ini bisa berguna, jika kamu membutuhkan chart tertentu dan melakukan akses API didalam komponen chart. - -```javascript -data () { - return { - chartData: null - } -} -``` - -### Contoh - -**LineChart.js** -```javascript -import { Line, mixins } from 'vue-chartjs' -const { reactiveProp } = mixins - -export default { - extends: Line, - mixins: [reactiveProp], - props: ['options'], - mounted () { - // 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) - } -} -``` - -**RandomChart.vue** - -```javascript - - - - - -``` - -

                                      - ⚠ Perhatian: jika kamu memutasi data didalam komponen parent dan melewatkannya pada child komponen chart perlu diingat batasan javascript. - Info lebih lanjut [issue#44](https://github.com/apertureless/vue-chartjs/issues/44) -

                                      - -### Batasan - - -## Objek Chart.js - -Suatu ketika kamu membutuhkan kontrol chart.js. Kamu dapat mengaksesnya dengan `this.$data._chart` - -## Inline plugins - -Di Chart.js kamu dapat mendefinisikan plugin global dan inline. Plugin global bekerja tanpa masalah dengan `vue-chartjs` seperti yang dijelaskan pada [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) - -If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()` -You should call `addPlugin()` before the `renderChart()` method. -Jika kamu ingin menambahkan plugin inline, `vue-chartjs` menyediakan method helper `addPlugin()` kamu harus memanggil `addPlugin()` sebelum method `renderChart()`. - -### Contoh - -```javascript -mounted () { - this.addPlugin({ - id: 'my-plugin', - beforeInit: function (chart) { - .... - } - }) -} -``` - -## Charts yang Tersedia - -### Bar Chart -

                                      - Terdapat dua versi bar chart. `{Bar}` dan `{HorizontalBar}` -

                                      - -![Bar](assets/bar.png) -### Line Chart - -![Line](assets/line.png) - -### Doughnut - -![Doughnut](assets/doughnut.png) - -### Pie - -![Pie](assets/pie.png) - -### Radar - -![Pie](assets/radar.png) - -### Polar Area - -![Pie](assets/polar.png) - -### Bubble - -![Bubble](assets/bubble.png) - -### Scatter - -This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type. -Chart ini memiliki struktur data yang berbeda dengan yang lainnya. Untuk sekarang reactive mixins tidak dapat bekerja pada tipe chart ini. - -![Scatter](assets/scatter.png) - - -## Penjelasan Build -Terdapat tiga jenis titik entri. Tergantung setup mana yang kamu gunakan. Dependensi-dependensi telah di-bundle atau require sebagai 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 -Kamu dapat menggunakan `vue-chartjs` secara langsung didalam browser tanpa setup build. Seperti berikut [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Dalam kasus ini, mohon gunakan `vue-chartjs.full.min.js` yang telah di-minify. Didalamnya terdapat Vue.js dan Chart.js. Dan bundel modul UMD. Jadi kamu hanya membutuhkan satu file saja. - - -### Browserify / Webpack 1 - -Jika kamu menggunakan GUlp, Browserify atau Webpack 1 entri yang digunakan adalah `vue-chartjs.js` dimana telah di__transpile__ dan di__bundle__ UMD Module. - -Bagaimanapun juga Vue.js dan Chart.js adalah `peerDependencies` jadi kamu harus meng-instalnya secara terpisah. Jika kamu telah memiliki `Vue.js` kamu dapat menggunakan versi Vue.js dan Chart.js yang terdapat di-package ini. - -### Webpack 2 -Jika kamu menggunakan Webpack 2 secara otomatis akan menggunakan titik entri `jsnext:main` / `module`. Di `es/index.js` -Di__transpile__ es sumber dari versi ini. Dan tidak di__bundle__ pada modul. Sehingga tree shaking akan bekerja. Sama seperti versi bundle, `Vue.js` dan `Chart.js` adalah `peerDependencies` dan butuh untuk diinstal. - -## Sumber-sumber - -Kamu dapat menemukan sumber-sumber seperti tutrial bagaimana cara untuk menggunakan `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/) diff --git a/docs_old/index.html b/docs_old/index.html deleted file mode 100644 index 2a0b9c2f..00000000 --- a/docs_old/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - vue-chartjs documentation - - - - -
                                      - - - - - - - diff --git a/docs_old/ja/README.md b/docs_old/ja/README.md deleted file mode 100644 index 3883abd0..00000000 --- a/docs_old/ja/README.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -search: -- "language\:ja" ---- - -# vue-chartjs -**vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 - -## イントロ -`vue-chartjs` vueの中であまり面倒なことがなくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。 - -chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。 - -## インストール -Vue.jsの Version2以上を使用している場合は簡単にインストールできます。: - -`yarn add vue-chartjs chart.js` - -Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。 - -`yarn add vue-chartjs@legacy` - -## クイックスタート - -BaseChartをインポートしてextendします。異なるデータのチャートを表示するときに柔軟性が大幅に向上します。 -コンポーネントをカプセル化し、プロパティをコンポーネントのデータに渡したり、コンポーネント内に直接データを記述することができます。ただし直接データを記述した場合はコンポーネントの再利用ができません。 - -パッケージ全体またはモジュールごとに個別にインポートすることができます。 - -```javascript -// CommitChart.js -import { Bar } from 'vue-chartjs' - -export default { - extends: Bar, - mounted () { - // Overwriting base render method with actual data. - this.renderChart(data, options) - } -} -``` - -`renderChart()`メソッドに2つの引数を渡すことができます: - -- 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) のドキュメントをご覧ください。 - -## プロパティ - -BaseChartsには基本プロパティがいくつか定義されています。 `extend()`したときにそれらは *表示されていません* が、使用するときに上書きして設定することができます。 - -| プロパティ | 説明 | -|---|---| -| width | chartの表示幅 | -| height | chartの表示高さ | -| chart-id | canvas要素のid | -| css-classes | 周囲のdivのCSSクラスの文字列 | -| styles | 周囲のdivコンテナのCSSスタイルを持つオブジェクト | - -## 実装例 - -いくつか例を記載します。 - -### プロパティの利用 - -dataとoptionsプロパティを作成して、チャートにデータを渡すことが出来ます。 - -```javascript -// LineChart.js -import { Line } from 'vue-chartjs' - -export default { - extends: Line, - props: ['data', 'options'], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -コンポーネントに追加して、使用することができます。 - -```html - -``` - -幅と高さを上書きする場合: - -```html - - -``` - -

                                      -`width` と `height` を固定値で表示させるためには、 `responsive：false` を設定しなければならないことに注意してください。 -

                                      - -### ローカルデータを使用したチャート - -```javascript -import {Bar} from 'vue-chartjs' - -export default { - extends: Bar, - 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` ではこれを実現するために2つのミックスインを提供します。 - -- `reactiveProp` -- `reactiveData` - -この２つのミックスインは実際には同じものです。 ほとんどの場合 `reactiveProp` を使用します。これはチャートコンポーネントのロジックを拡張し、自動的に `chartData` という名前のプロパティを追加し、さらにこのプロパティに対して `vue watch` を追加します。 データの更新に対して、データセット内のデータのみが変更されたときには `update()` を呼び出し、新しいデータセットが追加された場合は `renderChart()` が呼び出されます。 - -`reactiveData` は単純に(プロパティではない!!)ローカルの chartData 変数を追加し、ウォッチャーを追加します。 -単一の目的のチャートのみ必要でチャートコンポーネント内でAPI呼び出しを行うときのみ有用です。 - -```javascript -data () { - return { - chartData: null - } -} -``` - -### 例 - -**LineChart.js** -```javascript -import { Line, mixins } from 'vue-chartjs' -const { reactiveProp } = mixins - -export default { - extends: Line, - mixins: [reactiveProp], - props: ['options'], - mounted () { - // 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) - } -} -``` - -**RandomChart.vue** - -```javascript - - - - - -``` - -

                                      - ⚠ 注意:親コンポーネントでデータを変更し、それを子チャートコンポーネントに渡す場合は、JavaScriptの制限事項に注意してください。 - この問題の詳細 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44) -

                                      - -### 制限事項 - - -## Chart.js オブジェクト - -時にはchart.jsをより詳細に制御する必要があります。そのためには `this.$data._chart` を使ってChart.jsインスタンスにアクセスすることができます。 - -## インライン プラグイン - -Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。[Chart.js docs]（http://www.chartjs.org/docs/latest/developers/plugins.html）で記載されているのようなグローバルプラグインは、 `vue-chartjs ` で問題なく動作しています。 - -インラインプラグインを追加したい場合のために `vue-chartjs`は` addPlugin（） `というヘルパーメソッドを提供します。 -`renderChart（）`メソッドの前に `addPlugin（）`を呼び出す必要があります。 - -### Example - -```javascript -mounted () { - this.addPlugin({ - id: 'my-plugin', - beforeInit: function (chart) { - .... - } - }) -} -``` -## チャートのカスタマイズ / 新たに定義するチャート - -場合によっては、デフォルトの Chart.jsのチャートを拡張する必要があります。デフォルトのグラフを拡張して変更する方法の例がたくさんあります。または、必要であれば独自のチャートタイプを作成することもできます。 - -`vue-chartjs` においても、これと同じようにすることができます。 - -```js -// 1. Chart.jsをインポートして、グローバルChartオブジェクトを使用できるようにします。 -import Chart from 'chart.js' -// 2. コンポーネントを作成するときに使用する `generateChart()` メソッドをインポートします。 -import { generateChart } from 'vue-chartjs' - -// 3. デフォルトチャートを拡張します -// http://www.chartjs.org/docs/latest/developers/charts.html -Chart.defaults.LineWithLine = Chart.defaults.line; -Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */}) - -// 4. vue-chartjs コンポーネントを作成します。 -// 最初の引数はチャートのID, 2番目の引数はチャートタイプ -const CustomLine = generateChart('custom-line', 'LineWithLine') - -// 5. 拡張された CustomLine コンポーネントはデフォルトのvue-chartjsチャートのように使用できます。 - -export default { - extends: CustomLine, - mounted () { - // .... - } -} -``` - -## 利用可能なグラフ - -### 棒グラフ -

                                      - 棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。 -

                                      - -![Bar](../assets/bar.png) -### 折れ線グラフ - -![Line](../assets/line.png) - -### ドーナツチャート - -![Doughnut](../assets/doughnut.png) - -### パイチャート - -![Pie](../assets/pie.png) - -### レーダーチャート - -![Pie](../assets/radar.png) - -### 鶏頭図 - -![Pie](../assets/polar.png) - -### バブルチャート - -![Bubble](../assets/bubble.png) - -### 散布図 - -このチャートは、他のものとは異なるデータ構造を持っています。現在のところ、reactive mixins はこのチャートタイプでは機能していません。 - -![Scatter](../assets/scatter.png) - - - -## Resources - -以下に `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/) diff --git a/docs_old/pt-br/README.md b/docs_old/pt-br/README.md deleted file mode 100644 index e69ef247..00000000 --- a/docs_old/pt-br/README.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -search: -- "language\:pt-br" ---- - -
                                      - vue-chartjs logo -
                                      - -[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) -[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) -[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs) -[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs) -[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs) -[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby) -[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt) -[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs) - -# vue-chartjs - -**vue-chartjs** é um wrapper para o [Chart.js](https://github.com/chartjs/Chart.js) no vue. Você pode criar gráficos reutilizáveis facilmente. - -## Demo & Docs - -- 📺 [Demo](http://demo.vue-chartjs.org/) -- 📖 [Docs](http://www.vue-chartjs.org/) - -### Compatibilidade - -- v1 later `@legacy` - - Vue.js 1.x -- v2 later - - Vue.js 2.x - -Após a release final do vue.js 2, você também instala por padrão o vue-chartjs v2 pelo npm. -Não é mas necessária a tag @next. Se você quiser a versão v1, você precisa definir a versão ou usar uma tag legada. -Se está procurando pela versão v1, dê uma olhada nessa [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3) - -## Instalação - -Simplemente execute `yarn add vue-chartjs chart.js` - -Ou se quiser utilizar diretamente no browser, adicione - -```html - -``` -em seus scripts. Veja [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010) - -## Explicação das diferentes builds - -Existem três diferentes pontos de entrada (entry points). Isso depende da configuração de build que você possui. As dependências são empacotadas (bundled) ou requisitadas como 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 -Você pode usar o `vue-chartjs` diretamente no seu browser sem qualquer configuração de build. Como em [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Nesse caso, use `vue-chartjs.full.min.js` que é a versão minificada. Esse arquivo contém o Vue.js e o Chart.js inseridos nele. E são And empacotados (bundled) em um módulo UMD. Então você precisa somente desse arquivo. - - -### Browserify / Webpack 1 - -Se você estiver usando Gulb, Browserify ou Webpack 1 a opção é `vue-chartjs.js`, que é __transpiled__ e __bundled__ no modelo UMD. - -Porém, Vue.js e Chart.js são `peerDependencies`, então você precisa instalá-los seperadamente. Na maioria dos projetos você terá o `Vue.js` instalado de qualquer maneira. Dessa forma, você pode ter diferentes versões do Vue.js e do Chart.j nesse pacote. - - -### Webpack 2 -Se você está usando o Webpack 2, ele automaticamente usará a opção `jsnext:main` / `module`. Que é `es/index.js`, uma versão do código do es __transpiled__. Não é __bundled__ em módulo algum. Dessa forma, seu [tree shaking](https://webpack.js.org/guides/tree-shaking/) funcionará. Como na versão bundled, o `Vue.js` e o `Chart.js` são `peerDependencies` e precisam ser instalados. - -## Como usar - -Você precisa importar a classe de gráficos básica e extendê-la. Isso garante muito mais flexibilidade quando se está trabalhando com dados diferentes. Você pode passar dados via props ou vue-resource. - -Você pode importar todo o pacote ou cada módulo individualmente. - -```javascript -import VueCharts from 'vue-chartjs' -import { Bar, Line } from 'vue-chartjs' -``` - -Apenas crie seu próprio componente. - -```javascript -// CommitChart.js -import { Bar } from 'vue-chartjs' - -export default { - extends: Bar, - mounted () { - // Overwriting base render method with actual data. - 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] - } - ] - }) - } -} -``` - -Então, simplesmente importe e use seu próprio componente extendido como um componente vue. - -```javascript -import CommitChart from 'path/to/component/CommitChart' -``` - -## Another Example with options - -Você pode sobreescrever as options (opções) padrão do gráfico. Basta passar o objeto options como segundo parâmetro do método de renderização. - -```javascript -// MonthlyIncome.js -import { Line } from 'vue-chartjs' - -export default { - extends: Line, - props: ["data", "options"], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -Use isso no seu componente vue - -```javascript -import MonthlyIncome from 'path/to/component/MonthlyIncome' - - - - -``` - -## Reactivity (Reatividade) - -O Chart.js não atualiza nem re-renderiza o gráfico se novos dados são passados. -Porém, você pode implementar isso por si só ou usar um dos dois mixins inclusos. - -- `reactiveProp` -- `reactiveData` - -Ambos estão incluídos no módulo de `mixins`. - -Os mixins criam automaticamente o `chartData` como um prop ou como um data. E adiciona um watcher. Se os dados mudarem, o gráfico será atualizado. Mas matenha em mente as limitações do vue e do javascript para as mutations(mutações) em vetores e objetos. Mais informações [aqui](http://vue-chartjs.org/#/home?id=reactive-data) - - -```javascript -// MonthlyIncome.js -import { Line, mixins } from 'vue-chartjs' - -export default { - extends: Line, - mixins: [mixins.reactiveProp], - props: ["chartData", "options"], - mounted () { - this.renderChart(this.chartData, this.options) - } -} - -``` - -### Módulo de Mixins -O módulo de `mixins` está incluído no módulo do `VueCharts` e como módulo separado. -Algumas maneiras de importá-los: - -```javascript -// Load complete module with all charts -import VueCharts from 'vue-chartjs' - -export default { - extends: VueCharts.Line, - 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 { - extends: Line, - 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 { - extends: Line, - mixins: [reactiveProp], - props: ["chartData", "options"], - mounted () { - this.renderChart(this.chartData, this.options) - } -} -``` - -## Gráficos disponíveis - -### Gráfico de Barra - -![Barra](../assets/bar.png) - -### Gráfico de Linha - -![Linha](../assets/line.png) - -### Donut - -![Donut](../assets/doughnut.png) - -### Pizza - -![Pizza](../assets/pie.png) - -### Radar - -![Radar](../assets/radar.png) - -### Área Polar - -![Área Polar](../assets/polar.png) - -### Bolha - -![Bolha](../assets/bubble.png) - -## Configurações de Build - -``` bash -# Instala as dependências -npm install - -# roda o servidor com hot reload at localhost:8080 -npm run dev - -# build para produção com minificação -npm run build - -# roda testes unitários -npm run unit - -# roda testes e2e -npm run e2e - -# roda todos os teste -npm test -``` - -Para informações detalhadas de como as coisas funcionam, confira o [guia](http://vuejs-templates.github.io/webpack/) e [documentação do vue-loader](http://vuejs.github.io/vue-loader). - -## Contribuindo - -1. Faça um fork o projeto ( https://github.com/apertureless/vue-chartjs/fork ) -2. Crie uma branch da sua feature (`git checkout -b my-new-feature`) -3. Faça o commit das suas modificações (`git commit -am 'Add some feature'`) -4. Faça o push da branch (`git push origin my-new-feature`) -5. Crie uma nova requisição de pull - -## License - -Esse software é distribuído sob a licença [MIT license](LICENSE.txt). diff --git a/docs_old/ru/README.md b/docs_old/ru/README.md deleted file mode 100644 index 92b6ed6a..00000000 --- a/docs_old/ru/README.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -search: -- "language\:ru" ---- - -
                                      - vue-chartjs logo -
                                      - -[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) -[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) -[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs) -[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs) -[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs) -[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby) -[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt) -[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](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 - -``` -в ваши скрипты. Смотрите пример на [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 { - extends: Bar, - 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 { - extends: Line, - props: ['data', 'options'], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -Используйте это в вашем vue приложении - -```javascript -import MonthlyIncome from 'path/to/component/MonthlyIncome' - - - - -``` - -## Реактивность - -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 { - extends: Line, - 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 { - extends: VueCharts.Line, - 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 { - extends: Line, - 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 { - extends: Line, - mixins: [reactiveProp], - props: ['chartData', 'options'], - mounted () { - this.renderChart(this.chartData, this.options) - } -} -``` - -## Доступные диаграммы - -### Bar Chart - -![Bar](../assets/bar.png) - -### Line Chart - -![Line](../assets/line.png) - -### Doughnut - -![Doughnut](../assets/doughnut.png) - -### Pie - -![Pie](../assets/pie.png) - -### Radar - -![Pie](../assets/radar.png) - -### Polar Area - -![Pie](../assets/polar.png) - -### Bubble - -![Bubble](../assets/bubble.png) - -### Scatter - -![Scatter](../assets/scatter.png) - -## Настройка сборки - -``` 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). diff --git a/docs_old/zh-cn/README.md b/docs_old/zh-cn/README.md deleted file mode 100644 index 3542ce10..00000000 --- a/docs_old/zh-cn/README.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -search: -- "language\: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 { - extends: Bar, - 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 { - extends: Line, - props: ['data', 'options'], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -然后你可以把它作为组件使用。 - -```html - -``` - -如果你想要覆盖宽度和高度： - -```html - - -``` - -

                                      - 请注意，你必须设置 `responsive: false` 才可以使用 `width` 和 `height`。 -

                                      - -### 使用本地数据创建图表 - -```javascript -import {Bar} from 'vue-chartjs' - -export default { - extends: Bar, - 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 { - extends: Line, - mixins: [reactiveProp], - props: ['options'], - mounted () { - // this.chartData is created in the mixin - this.renderChart(this.chartData, this.options) - } -} -``` - -**RandomChart.vue** - -```javascript - - - - - -``` - -

                                      - ⚠ 注意：如果在父组件中修改数据并将数据传递给子图表组件时，请注意 JavaScript 的限制。 - 更多信息请查阅 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44) -

                                      - -### 限制 - - -## Chart.js 对象 - -有时你需要更多的调整 chart.js。你可以访问 `this.$data._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) { - .... - } - }) -} -``` - -## 支持的图表 - -### 柱状图 - -

                                      - 柱状图有两个版本。 `{Bar}` 和 `{HorizontalBar}` -

                                      - -![Bar](assets/bar.png) - -### 折线图 - -![Line](assets/line.png) - -### 环形图 - -![Doughnut](assets/doughnut.png) - -### 饼图 - -![Pie](assets/pie.png) - -### 雷达图 - -![Pie](assets/radar.png) - -### 极坐标 - -![Pie](assets/polar.png) - -### 热点图 - -![Bubble](assets/bubble.png) - -### 散点图 - -这个图表有不同的数据结构。目前动态数据不适用于此图表类型。 - -![Scatter](assets/scatter.png) - - -## 不同构建工具的说明 -有三种不同的切入点，取决于你用哪种构建工具。作为 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/)