From e8c0980c21e53893876ec61eb837637b5b570ccc Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Wed, 2 Aug 2023 13:37:59 +0000 Subject: [PATCH] deploy --- CNAME | 1 + api/index.html | 26 ++ assets/api_index.md.a284a332.js | 5 + assets/api_index.md.a284a332.lean.js | 1 + assets/app.494b20fe.js | 1 + assets/chunks/AlgoliaSearchBox.de00b314.js | 13 + assets/examples_index.md.807311bb.js | 1 + assets/examples_index.md.807311bb.lean.js | 1 + assets/guide_index.md.516b45f9.js | 205 ++++++++++++ assets/guide_index.md.516b45f9.lean.js | 1 + assets/index.md.05808d1c.js | 1 + assets/index.md.05808d1c.lean.js | 1 + assets/ja_api_index.md.079878ad.js | 41 +++ assets/ja_api_index.md.079878ad.lean.js | 1 + assets/ja_guide_index.md.8194d779.js | 259 +++++++++++++++ assets/ja_guide_index.md.8194d779.lean.js | 1 + assets/ja_index.md.76baad4c.js | 1 + assets/ja_index.md.76baad4c.lean.js | 1 + assets/migration-guides_index.md.c5c02963.js | 118 +++++++ ...migration-guides_index.md.c5c02963.lean.js | 1 + assets/pt-br_api_index.md.e70924fe.js | 41 +++ assets/pt-br_api_index.md.e70924fe.lean.js | 1 + assets/pt-br_guide_index.md.2bb553a6.js | 259 +++++++++++++++ assets/pt-br_guide_index.md.2bb553a6.lean.js | 1 + assets/pt-br_index.md.9ecbdeb8.js | 1 + assets/pt-br_index.md.9ecbdeb8.lean.js | 1 + assets/ru_api_index.md.57e22624.js | 41 +++ assets/ru_api_index.md.57e22624.lean.js | 1 + assets/ru_guide_index.md.2d993276.js | 273 ++++++++++++++++ assets/ru_guide_index.md.2d993276.lean.js | 1 + assets/ru_index.md.e8a06353.js | 1 + assets/ru_index.md.e8a06353.lean.js | 1 + assets/style.5f10c5ca.css | 1 + assets/zh-cn_api_index.md.d35aa510.js | 41 +++ assets/zh-cn_api_index.md.d35aa510.lean.js | 1 + assets/zh-cn_guide_index.md.750273c0.js | 257 +++++++++++++++ assets/zh-cn_guide_index.md.750273c0.lean.js | 1 + assets/zh-cn_index.md.e38db505.js | 1 + assets/zh-cn_index.md.e38db505.lean.js | 1 + examples/index.html | 22 ++ guide/index.html | 226 ++++++++++++++ hashmap.json | 1 + index.html | 22 ++ ja/api/index.html | 62 ++++ ja/guide/index.html | 280 +++++++++++++++++ ja/index.html | 22 ++ migration-guides/index.html | 139 +++++++++ pt-br/api/index.html | 62 ++++ pt-br/guide/index.html | 280 +++++++++++++++++ pt-br/index.html | 22 ++ ru/api/index.html | 62 ++++ ru/guide/index.html | 294 ++++++++++++++++++ ru/index.html | 22 ++ zh-cn/api/index.html | 62 ++++ zh-cn/guide/index.html | 278 +++++++++++++++++ zh-cn/index.html | 22 ++ 56 files changed, 3483 insertions(+) create mode 100644 CNAME create mode 100644 api/index.html create mode 100644 assets/api_index.md.a284a332.js create mode 100644 assets/api_index.md.a284a332.lean.js create mode 100644 assets/app.494b20fe.js create mode 100644 assets/chunks/AlgoliaSearchBox.de00b314.js create mode 100644 assets/examples_index.md.807311bb.js create mode 100644 assets/examples_index.md.807311bb.lean.js create mode 100644 assets/guide_index.md.516b45f9.js create mode 100644 assets/guide_index.md.516b45f9.lean.js create mode 100644 assets/index.md.05808d1c.js create mode 100644 assets/index.md.05808d1c.lean.js create mode 100644 assets/ja_api_index.md.079878ad.js create mode 100644 assets/ja_api_index.md.079878ad.lean.js create mode 100644 assets/ja_guide_index.md.8194d779.js create mode 100644 assets/ja_guide_index.md.8194d779.lean.js create mode 100644 assets/ja_index.md.76baad4c.js create mode 100644 assets/ja_index.md.76baad4c.lean.js create mode 100644 assets/migration-guides_index.md.c5c02963.js create mode 100644 assets/migration-guides_index.md.c5c02963.lean.js create mode 100644 assets/pt-br_api_index.md.e70924fe.js create mode 100644 assets/pt-br_api_index.md.e70924fe.lean.js create mode 100644 assets/pt-br_guide_index.md.2bb553a6.js create mode 100644 assets/pt-br_guide_index.md.2bb553a6.lean.js create mode 100644 assets/pt-br_index.md.9ecbdeb8.js create mode 100644 assets/pt-br_index.md.9ecbdeb8.lean.js create mode 100644 assets/ru_api_index.md.57e22624.js create mode 100644 assets/ru_api_index.md.57e22624.lean.js create mode 100644 assets/ru_guide_index.md.2d993276.js create mode 100644 assets/ru_guide_index.md.2d993276.lean.js create mode 100644 assets/ru_index.md.e8a06353.js create mode 100644 assets/ru_index.md.e8a06353.lean.js create mode 100644 assets/style.5f10c5ca.css create mode 100644 assets/zh-cn_api_index.md.d35aa510.js create mode 100644 assets/zh-cn_api_index.md.d35aa510.lean.js create mode 100644 assets/zh-cn_guide_index.md.750273c0.js create mode 100644 assets/zh-cn_guide_index.md.750273c0.lean.js create mode 100644 assets/zh-cn_index.md.e38db505.js create mode 100644 assets/zh-cn_index.md.e38db505.lean.js create mode 100644 examples/index.html create mode 100644 guide/index.html create mode 100644 hashmap.json create mode 100644 index.html create mode 100644 ja/api/index.html create mode 100644 ja/guide/index.html create mode 100644 ja/index.html create mode 100644 migration-guides/index.html create mode 100644 pt-br/api/index.html create mode 100644 pt-br/guide/index.html create mode 100644 pt-br/index.html create mode 100644 ru/api/index.html create mode 100644 ru/guide/index.html create mode 100644 ru/index.html create mode 100644 zh-cn/api/index.html create mode 100644 zh-cn/guide/index.html create mode 100644 zh-cn/index.html diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..4aafea50 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +vue-chartjs.org diff --git a/api/index.html b/api/index.html new file mode 100644 index 00000000..54579253 --- /dev/null +++ b/api/index.html @@ -0,0 +1,26 @@ + + + + + + Coding Reference | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

Coding Reference

Props

There are some basic props defined in the components provided by vue-chartjs.

PropDescription
dataThe data object that is passed into the Chart.js chart
optionsThe options object that is passed into the Chart.js chart
datasetIdKeyKey name to identificate dataset
pluginsThe plugins array that is passed into the Chart.js chart
updateModeA mode string to indicate transition configuration should be used.

Rest props will fall through to the canvas element.

Global Methods

Global Methods need to be imported.

createTypedChart

  • Type: Function
  • Arguments:chart-type, chart-controller
  • Usage:
import { createTypedChart } from 'vue-chartjs'
+import { LineController } from 'chart.js'
+
+const CustomLine = createTypedChart('line', LineController)
+
+ + + + + \ No newline at end of file diff --git a/assets/api_index.md.a284a332.js b/assets/api_index.md.a284a332.js new file mode 100644 index 00000000..2df8f317 --- /dev/null +++ b/assets/api_index.md.a284a332.js @@ -0,0 +1,5 @@ +import{_ as t,c as e,o as a,a as s}from"./app.494b20fe.js";const _='{"title":"Coding Reference","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"Global Methods","slug":"global-methods"},{"level":3,"title":"createTypedChart","slug":"createtypedchart"}],"relativePath":"api/index.md","lastUpdated":1690983419000}',n={},o=s(`

Coding Reference

Props

There are some basic props defined in the components provided by vue-chartjs.

PropDescription
dataThe data object that is passed into the Chart.js chart
optionsThe options object that is passed into the Chart.js chart
datasetIdKeyKey name to identificate dataset
pluginsThe plugins array that is passed into the Chart.js chart
updateModeA mode string to indicate transition configuration should be used.

Rest props will fall through to the canvas element.

Global Methods

Global Methods need to be imported.

createTypedChart 

import { createTypedChart } from 'vue-chartjs'
+import { LineController } from 'chart.js'
+
+const CustomLine = createTypedChart('line', LineController)
+
`,10),r=[o];function d(c,p,i,l,h,u){return a(),e("div",null,r)}var k=t(n,[["render",d]]);export{_ as __pageData,k as default}; diff --git a/assets/api_index.md.a284a332.lean.js b/assets/api_index.md.a284a332.lean.js new file mode 100644 index 00000000..ee5cd46b --- /dev/null +++ b/assets/api_index.md.a284a332.lean.js @@ -0,0 +1 @@ +import{_ as t,c as e,o as a,a as s}from"./app.494b20fe.js";const _='{"title":"Coding Reference","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"Global Methods","slug":"global-methods"},{"level":3,"title":"createTypedChart","slug":"createtypedchart"}],"relativePath":"api/index.md","lastUpdated":1690983419000}',n={},o=s("",10),r=[o];function d(c,p,i,l,h,u){return a(),e("div",null,r)}var k=t(n,[["render",d]]);export{_ as __pageData,k as default}; diff --git a/assets/app.494b20fe.js b/assets/app.494b20fe.js new file mode 100644 index 00000000..d91d7b8d --- /dev/null +++ b/assets/app.494b20fe.js @@ -0,0 +1 @@ +function es(e,t){const n=Object.create(null),s=e.split(",");for(let r=0;r!!n[r.toLowerCase()]:r=>!!n[r]}function ts(e){if(F(e)){const t={};for(let n=0;n{if(n){const s=n.split(Co);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function dt(e){let t="";if(he(e))t=e;else if(F(e))for(let n=0;nhe(e)?e:e==null?"":F(e)||se(e)&&(e.toString===gr||!B(e.toString))?JSON.stringify(e,hr,2):String(e),hr=(e,t)=>t&&t.__v_isRef?hr(e,t.value):vt(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r])=>(n[`${s} =>`]=r,n),{})}:pr(t)?{[`Set(${t.size})`]:[...t.values()]}:se(t)&&!F(t)&&!mr(t)?String(t):t,ne={},mt=[],Re=()=>{},Io=()=>!1,Oo=/^on[^a-z]/,zt=e=>Oo.test(e),ns=e=>e.startsWith("onUpdate:"),$e=Object.assign,ss=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Ro=Object.prototype.hasOwnProperty,q=(e,t)=>Ro.call(e,t),F=Array.isArray,vt=e=>yn(e)==="[object Map]",pr=e=>yn(e)==="[object Set]",B=e=>typeof e=="function",he=e=>typeof e=="string",rs=e=>typeof e=="symbol",se=e=>e!==null&&typeof e=="object",_r=e=>se(e)&&B(e.then)&&B(e.catch),gr=Object.prototype.toString,yn=e=>gr.call(e),Mo=e=>yn(e).slice(8,-1),mr=e=>yn(e)==="[object Object]",os=e=>he(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Ft=es(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),xn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},So=/-(\w)/g,De=xn(e=>e.replace(So,(t,n)=>n?n.toUpperCase():"")),Fo=/\B([A-Z])/g,At=xn(e=>e.replace(Fo,"-$1").toLowerCase()),wn=xn(e=>e.charAt(0).toUpperCase()+e.slice(1)),Mn=xn(e=>e?`on${wn(e)}`:""),Ut=(e,t)=>!Object.is(e,t),Sn=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},vr=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let Ps;const Ho=()=>Ps||(Ps=typeof globalThis!="undefined"?globalThis:typeof self!="undefined"?self:typeof window!="undefined"?window:typeof global!="undefined"?global:{});let je;class No{constructor(t=!1){this.detached=t,this.active=!0,this.effects=[],this.cleanups=[],this.parent=je,!t&&je&&(this.index=(je.scopes||(je.scopes=[])).push(this)-1)}run(t){if(this.active){const n=je;try{return je=this,t()}finally{je=n}}}on(){je=this}off(){je=this.parent}stop(t){if(this.active){let n,s;for(n=0,s=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},br=e=>(e.w&et)>0,yr=e=>(e.n&et)>0,Bo=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s{(h==="length"||h>=c)&&l.push(f)})}else switch(n!==void 0&&l.push(i.get(n)),t){case"add":F(e)?os(n)&&l.push(i.get("length")):(l.push(i.get(ct)),vt(e)&&l.push(i.get(qn)));break;case"delete":F(e)||(l.push(i.get(ct)),vt(e)&&l.push(i.get(qn)));break;case"set":vt(e)&&l.push(i.get(ct));break}if(l.length===1)l[0]&&zn(l[0]);else{const c=[];for(const f of l)f&&c.push(...f);zn(is(c))}}function zn(e,t){const n=F(e)?e:[...e];for(const s of n)s.computed&&Os(s);for(const s of n)s.computed||Os(s)}function Os(e,t){(e!==Ie||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}const Do=es("__proto__,__v_isRef,__isVue"),$r=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(rs)),Ko=cs(),Wo=cs(!1,!0),qo=cs(!0),Rs=zo();function zo(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=V(this);for(let o=0,i=this.length;o{e[t]=function(...n){Pt();const s=V(this)[t].apply(this,n);return It(),s}}),e}function cs(e=!1,t=!1){return function(s,r,o){if(r==="__v_isReactive")return!e;if(r==="__v_isReadonly")return e;if(r==="__v_isShallow")return t;if(r==="__v_raw"&&o===(e?t?ci:Lr:t?Tr:Cr).get(s))return s;const i=F(s);if(!e&&i&&q(Rs,r))return Reflect.get(Rs,r,o);const l=Reflect.get(s,r,o);return(rs(r)?$r.has(r):Do(r))||(e||Ce(s,"get",r),t)?l:ge(l)?i&&os(r)?l:l.value:se(l)?e?Ar(l):kn(l):l}}const Vo=kr(),Jo=kr(!0);function kr(e=!1){return function(n,s,r,o){let i=n[s];if($t(i)&&ge(i)&&!ge(r))return!1;if(!e&&(!un(r)&&!$t(r)&&(i=V(i),r=V(r)),!F(n)&&ge(i)&&!ge(r)))return i.value=r,!0;const l=F(n)&&os(s)?Number(s)e,$n=e=>Reflect.getPrototypeOf(e);function Qt(e,t,n=!1,s=!1){e=e.__v_raw;const r=V(e),o=V(t);n||(t!==o&&Ce(r,"get",t),Ce(r,"get",o));const{has:i}=$n(r),l=s?as:n?ds:Dt;if(i.call(r,t))return l(e.get(t));if(i.call(r,o))return l(e.get(o));e!==r&&e.get(t)}function Gt(e,t=!1){const n=this.__v_raw,s=V(n),r=V(e);return t||(e!==r&&Ce(s,"has",e),Ce(s,"has",r)),e===r?n.has(e):n.has(e)||n.has(r)}function en(e,t=!1){return e=e.__v_raw,!t&&Ce(V(e),"iterate",ct),Reflect.get(e,"size",e)}function Ms(e){e=V(e);const t=V(this);return $n(t).has.call(t,e)||(t.add(e),ze(t,"add",e,e)),this}function Ss(e,t){t=V(t);const n=V(this),{has:s,get:r}=$n(n);let o=s.call(n,e);o||(e=V(e),o=s.call(n,e));const i=r.call(n,e);return n.set(e,t),o?Ut(t,i)&&ze(n,"set",e,t):ze(n,"add",e,t),this}function Fs(e){const t=V(this),{has:n,get:s}=$n(t);let r=n.call(t,e);r||(e=V(e),r=n.call(t,e)),s&&s.call(t,e);const o=t.delete(e);return r&&ze(t,"delete",e,void 0),o}function Hs(){const e=V(this),t=e.size!==0,n=e.clear();return t&&ze(e,"clear",void 0,void 0),n}function tn(e,t){return function(s,r){const o=this,i=o.__v_raw,l=V(i),c=t?as:e?ds:Dt;return!e&&Ce(l,"iterate",ct),i.forEach((f,h)=>s.call(r,c(f),c(h),o))}}function nn(e,t,n){return function(...s){const r=this.__v_raw,o=V(r),i=vt(o),l=e==="entries"||e===Symbol.iterator&&i,c=e==="keys"&&i,f=r[e](...s),h=n?as:t?ds:Dt;return!t&&Ce(o,"iterate",c?qn:ct),{next(){const{value:p,done:b}=f.next();return b?{value:p,done:b}:{value:l?[h(p[0]),h(p[1])]:h(p),done:b}},[Symbol.iterator](){return this}}}}function Ye(e){return function(...t){return e==="delete"?!1:this}}function ei(){const e={get(o){return Qt(this,o)},get size(){return en(this)},has:Gt,add:Ms,set:Ss,delete:Fs,clear:Hs,forEach:tn(!1,!1)},t={get(o){return Qt(this,o,!1,!0)},get size(){return en(this)},has:Gt,add:Ms,set:Ss,delete:Fs,clear:Hs,forEach:tn(!1,!0)},n={get(o){return Qt(this,o,!0)},get size(){return en(this,!0)},has(o){return Gt.call(this,o,!0)},add:Ye("add"),set:Ye("set"),delete:Ye("delete"),clear:Ye("clear"),forEach:tn(!0,!1)},s={get(o){return Qt(this,o,!0,!0)},get size(){return en(this,!0)},has(o){return Gt.call(this,o,!0)},add:Ye("add"),set:Ye("set"),delete:Ye("delete"),clear:Ye("clear"),forEach:tn(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(o=>{e[o]=nn(o,!1,!1),n[o]=nn(o,!0,!1),t[o]=nn(o,!1,!0),s[o]=nn(o,!0,!0)}),[e,n,t,s]}const[ti,ni,si,ri]=ei();function us(e,t){const n=t?e?ri:si:e?ni:ti;return(s,r,o)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?s:Reflect.get(q(n,r)&&r in s?n:s,r,o)}const oi={get:us(!1,!1)},ii={get:us(!1,!0)},li={get:us(!0,!1)},Cr=new WeakMap,Tr=new WeakMap,Lr=new WeakMap,ci=new WeakMap;function ai(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function ui(e){return e.__v_skip||!Object.isExtensible(e)?0:ai(Mo(e))}function kn(e){return $t(e)?e:fs(e,!1,Er,oi,Cr)}function fi(e){return fs(e,!1,Go,ii,Tr)}function Ar(e){return fs(e,!0,Qo,li,Lr)}function fs(e,t,n,s,r){if(!se(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const o=r.get(e);if(o)return o;const i=ui(e);if(i===0)return e;const l=new Proxy(e,i===2?s:n);return r.set(e,l),l}function bt(e){return $t(e)?bt(e.__v_raw):!!(e&&e.__v_isReactive)}function $t(e){return!!(e&&e.__v_isReadonly)}function un(e){return!!(e&&e.__v_isShallow)}function Pr(e){return bt(e)||$t(e)}function V(e){const t=e&&e.__v_raw;return t?V(t):e}function Ht(e){return an(e,"__v_skip",!0),e}const Dt=e=>se(e)?kn(e):e,ds=e=>se(e)?Ar(e):e;function Ir(e){Qe&&Ie&&(e=V(e),wr(e.dep||(e.dep=is())))}function Or(e,t){e=V(e),e.dep&&zn(e.dep)}function ge(e){return!!(e&&e.__v_isRef===!0)}function at(e){return Rr(e,!1)}function di(e){return Rr(e,!0)}function Rr(e,t){return ge(e)?e:new hi(e,t)}class hi{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:V(t),this._value=n?t:Dt(t)}get value(){return Ir(this),this._value}set value(t){const n=this.__v_isShallow||un(t)||$t(t);t=n?t:V(t),Ut(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Dt(t),Or(this))}}function k(e){return ge(e)?e.value:e}const pi={get:(e,t,n)=>k(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const r=e[t];return ge(r)&&!ge(n)?(r.value=n,!0):Reflect.set(e,t,n,s)}};function Mr(e){return bt(e)?e:new Proxy(e,pi)}function Sr(e){const t=F(e)?new Array(e.length):{};for(const n in e)t[n]=gi(e,n);return t}class _i{constructor(t,n,s){this._object=t,this._key=n,this._defaultValue=s,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}}function gi(e,t,n){const s=e[t];return ge(s)?s:new _i(e,t,n)}var Fr;class mi{constructor(t,n,s,r){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this[Fr]=!1,this._dirty=!0,this.effect=new ls(t,()=>{this._dirty||(this._dirty=!0,Or(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!r,this.__v_isReadonly=s}get value(){const t=V(this);return Ir(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}Fr="__v_isReadonly";function vi(e,t,n=!1){let s,r;const o=B(e);return o?(s=e,r=Re):(s=e.get,r=e.set),new mi(s,r,o||!r,n)}function Ge(e,t,n,s){let r;try{r=s?e(...s):e()}catch(o){Vt(o,t,n)}return r}function Me(e,t,n,s){if(B(e)){const o=Ge(e,t,n,s);return o&&_r(o)&&o.catch(i=>{Vt(i,t,n)}),o}const r=[];for(let o=0;o>>1;Wt(ve[s])Ue&&ve.splice(t,1)}function wi(e){F(e)?yt.push(...e):(!qe||!qe.includes(e,e.allowRecurse?it+1:it))&&yt.push(e),jr()}function Ns(e,t=Kt?Ue+1:0){for(;tWt(n)-Wt(s)),it=0;ite.id==null?1/0:e.id,$i=(e,t)=>{const n=Wt(e)-Wt(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Br(e){Vn=!1,Kt=!0,ve.sort($i);const t=Re;try{for(Ue=0;Uehe(C)?C.trim():C)),p&&(r=n.map(vr))}let l,c=s[l=Mn(t)]||s[l=Mn(De(t))];!c&&o&&(c=s[l=Mn(At(t))]),c&&Me(c,e,6,r);const f=s[l+"Once"];if(f){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,Me(f,e,6,r)}}function Ur(e,t,n=!1){const s=t.emitsCache,r=s.get(e);if(r!==void 0)return r;const o=e.emits;let i={},l=!1;if(!B(e)){const c=f=>{const h=Ur(f,t,!0);h&&(l=!0,$e(i,h))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!o&&!l?(se(e)&&s.set(e,null),null):(F(o)?o.forEach(c=>i[c]=null):$e(i,o),se(e)&&s.set(e,i),i)}function Cn(e,t){return!e||!zt(t)?!1:(t=t.slice(2).replace(/Once$/,""),q(e,t[0].toLowerCase()+t.slice(1))||q(e,At(t))||q(e,t))}let be=null,Tn=null;function dn(e){const t=be;return be=e,Tn=e&&e.type.__scopeId||null,t}function Dr(e){Tn=e}function Kr(){Tn=null}function We(e,t=be,n){if(!t||e._n)return e;const s=(...r)=>{s._d&&Vs(-1);const o=dn(t);let i;try{i=e(...r)}finally{dn(o),s._d&&Vs(1)}return i};return s._n=!0,s._c=!0,s._d=!0,s}function Fn(e){const{type:t,vnode:n,proxy:s,withProxy:r,props:o,propsOptions:[i],slots:l,attrs:c,emit:f,render:h,renderCache:p,data:b,setupState:C,ctx:L,inheritAttrs:R}=e;let z,v;const x=dn(e);try{if(n.shapeFlag&4){const U=r||s;z=Pe(h.call(U,U,p,o,C,b,L)),v=c}else{const U=t;z=Pe(U.length>1?U(o,{attrs:c,slots:l,emit:f}):U(o,null)),v=t.props?c:Ei(c)}}catch(U){Bt.length=0,Vt(U,e,1),z=H(Ve)}let $=z;if(v&&R!==!1){const U=Object.keys(v),{shapeFlag:J}=$;U.length&&J&7&&(i&&U.some(ns)&&(v=Ci(v,i)),$=Et($,v))}return n.dirs&&($=Et($),$.dirs=$.dirs?$.dirs.concat(n.dirs):n.dirs),n.transition&&($.transition=n.transition),z=$,dn(x),z}const Ei=e=>{let t;for(const n in e)(n==="class"||n==="style"||zt(n))&&((t||(t={}))[n]=e[n]);return t},Ci=(e,t)=>{const n={};for(const s in e)(!ns(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function Ti(e,t,n){const{props:s,children:r,component:o}=e,{props:i,children:l,patchFlag:c}=t,f=o.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?js(s,i,f):!!i;if(c&8){const h=t.dynamicProps;for(let p=0;pe.__isSuspense;function Wr(e,t){t&&t.pendingBranch?F(e)?t.effects.push(...e):t.effects.push(e):wi(e)}function Pi(e,t){if(de){let n=de.provides;const s=de.parent&&de.parent.provides;s===n&&(n=de.provides=Object.create(s)),n[e]=t}}function xt(e,t,n=!1){const s=de||be;if(s){const r=s.parent==null?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides;if(r&&e in r)return r[e];if(arguments.length>1)return n&&B(t)?t.call(s.proxy):t}}function qr(e,t){return ps(e,null,t)}const sn={};function ut(e,t,n){return ps(e,t,n)}function ps(e,t,{immediate:n,deep:s,flush:r,onTrack:o,onTrigger:i}=ne){const l=de;let c,f=!1,h=!1;if(ge(e)?(c=()=>e.value,f=un(e)):bt(e)?(c=()=>e,s=!0):F(e)?(h=!0,f=e.some($=>bt($)||un($)),c=()=>e.map($=>{if(ge($))return $.value;if(bt($))return gt($);if(B($))return Ge($,l,2)})):B(e)?t?c=()=>Ge(e,l,2):c=()=>{if(!(l&&l.isUnmounted))return p&&p(),Me(e,l,3,[b])}:c=Re,t&&s){const $=c;c=()=>gt($())}let p,b=$=>{p=v.onStop=()=>{Ge($,l,4)}},C;if(Tt)if(b=Re,t?n&&Me(t,l,3,[c(),h?[]:void 0,b]):c(),r==="sync"){const $=wl();C=$.__watcherHandles||($.__watcherHandles=[])}else return Re;let L=h?new Array(e.length).fill(sn):sn;const R=()=>{if(!!v.active)if(t){const $=v.run();(s||f||(h?$.some((U,J)=>Ut(U,L[J])):Ut($,L)))&&(p&&p(),Me(t,l,3,[$,L===sn?void 0:h&&L[0]===sn?[]:L,b]),L=$)}else v.run()};R.allowRecurse=!!t;let z;r==="sync"?z=R:r==="post"?z=()=>ke(R,l&&l.suspense):(R.pre=!0,l&&(R.id=l.uid),z=()=>En(R));const v=new ls(c,z);t?n?R():L=v.run():r==="post"?ke(v.run.bind(v),l&&l.suspense):v.run();const x=()=>{v.stop(),l&&l.scope&&ss(l.scope.effects,v)};return C&&C.push(x),x}function Ii(e,t,n){const s=this.proxy,r=he(e)?e.includes(".")?zr(s,e):()=>s[e]:e.bind(s,s);let o;B(t)?o=t:(o=t.handler,n=t);const i=de;Ct(this);const l=ps(r,o.bind(s),n);return i?Ct(i):ft(),l}function zr(e,t){const n=t.split(".");return()=>{let s=e;for(let r=0;r{gt(n,t)});else if(mr(e))for(const n in e)gt(e[n],t);return e}function ie(e){return B(e)?{setup:e,name:e.name}:e}const wt=e=>!!e.type.__asyncLoader;function Oi(e){B(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:s,delay:r=200,timeout:o,suspensible:i=!0,onError:l}=e;let c=null,f,h=0;const p=()=>(h++,c=null,b()),b=()=>{let C;return c||(C=c=t().catch(L=>{if(L=L instanceof Error?L:new Error(String(L)),l)return new Promise((R,z)=>{l(L,()=>R(p()),()=>z(L),h+1)});throw L}).then(L=>C!==c&&c?c:(L&&(L.__esModule||L[Symbol.toStringTag]==="Module")&&(L=L.default),f=L,L)))};return ie({name:"AsyncComponentWrapper",__asyncLoader:b,get __asyncResolved(){return f},setup(){const C=de;if(f)return()=>Hn(f,C);const L=x=>{c=null,Vt(x,C,13,!s)};if(i&&C.suspense||Tt)return b().then(x=>()=>Hn(x,C)).catch(x=>(L(x),()=>s?H(s,{error:x}):null));const R=at(!1),z=at(),v=at(!!r);return r&&setTimeout(()=>{v.value=!1},r),o!=null&&setTimeout(()=>{if(!R.value&&!z.value){const x=new Error(`Async component timed out after ${o}ms.`);L(x),z.value=x}},o),b().then(()=>{R.value=!0,C.parent&&_s(C.parent.vnode)&&En(C.parent.update)}).catch(x=>{L(x),z.value=x}),()=>{if(R.value&&f)return Hn(f,C);if(z.value&&s)return H(s,{error:z.value});if(n&&!v.value)return H(n)}}})}function Hn(e,t){const{ref:n,props:s,children:r,ce:o}=t.vnode,i=H(e,s,r);return i.ref=n,i.ce=o,delete t.vnode.ce,i}const _s=e=>e.type.__isKeepAlive;function Ri(e,t){Vr(e,"a",t)}function Mi(e,t){Vr(e,"da",t)}function Vr(e,t,n=de){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(Ln(t,s,n),n){let r=n.parent;for(;r&&r.parent;)_s(r.parent.vnode)&&Si(s,t,n,r),r=r.parent}}function Si(e,t,n,s){const r=Ln(t,e,s,!0);An(()=>{ss(s[t],r)},n)}function Ln(e,t,n=de,s=!1){if(n){const r=n[e]||(n[e]=[]),o=t.__weh||(t.__weh=(...i)=>{if(n.isUnmounted)return;Pt(),Ct(n);const l=Me(t,n,e,i);return ft(),It(),l});return s?r.unshift(o):r.push(o),o}}const Je=e=>(t,n=de)=>(!Tt||e==="sp")&&Ln(e,(...s)=>t(...s),n),Fi=Je("bm"),Ot=Je("m"),Hi=Je("bu"),Jr=Je("u"),Ni=Je("bum"),An=Je("um"),ji=Je("sp"),Bi=Je("rtg"),Ui=Je("rtc");function Di(e,t=de){Ln("ec",e,t)}function Be(e,t,n,s){const r=e.dirs,o=t&&t.dirs;for(let i=0;it(i,l,void 0,o&&o[l]));else{const i=Object.keys(e);r=new Array(i.length);for(let l=0,c=i.length;lgn(t)?!(t.type===Ve||t.type===_e&&!Xr(t.children)):!0)?e:null}const Jn=e=>e?lo(e)?ys(e)||e.proxy:Jn(e.parent):null,Nt=$e(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Jn(e.parent),$root:e=>Jn(e.root),$emit:e=>e.emit,$options:e=>gs(e),$forceUpdate:e=>e.f||(e.f=()=>En(e.update)),$nextTick:e=>e.n||(e.n=Nr.bind(e.proxy)),$watch:e=>Ii.bind(e)}),Nn=(e,t)=>e!==ne&&!e.__isScriptSetup&&q(e,t),qi={get({_:e},t){const{ctx:n,setupState:s,data:r,props:o,accessCache:i,type:l,appContext:c}=e;let f;if(t[0]!=="$"){const C=i[t];if(C!==void 0)switch(C){case 1:return s[t];case 2:return r[t];case 4:return n[t];case 3:return o[t]}else{if(Nn(s,t))return i[t]=1,s[t];if(r!==ne&&q(r,t))return i[t]=2,r[t];if((f=e.propsOptions[0])&&q(f,t))return i[t]=3,o[t];if(n!==ne&&q(n,t))return i[t]=4,n[t];Yn&&(i[t]=0)}}const h=Nt[t];let p,b;if(h)return t==="$attrs"&&Ce(e,"get",t),h(e);if((p=l.__cssModules)&&(p=p[t]))return p;if(n!==ne&&q(n,t))return i[t]=4,n[t];if(b=c.config.globalProperties,q(b,t))return b[t]},set({_:e},t,n){const{data:s,setupState:r,ctx:o}=e;return Nn(r,t)?(r[t]=n,!0):s!==ne&&q(s,t)?(s[t]=n,!0):q(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(o[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:r,propsOptions:o}},i){let l;return!!n[i]||e!==ne&&q(e,i)||Nn(t,i)||(l=o[0])&&q(l,i)||q(s,i)||q(Nt,i)||q(r.config.globalProperties,i)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:q(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let Yn=!0;function zi(e){const t=gs(e),n=e.proxy,s=e.ctx;Yn=!1,t.beforeCreate&&Us(t.beforeCreate,e,"bc");const{data:r,computed:o,methods:i,watch:l,provide:c,inject:f,created:h,beforeMount:p,mounted:b,beforeUpdate:C,updated:L,activated:R,deactivated:z,beforeDestroy:v,beforeUnmount:x,destroyed:$,unmounted:U,render:J,renderTracked:te,renderTriggered:Y,errorCaptured:D,serverPrefetch:ue,expose:re,inheritAttrs:le,components:Se,directives:pe,filters:M}=t;if(f&&Vi(f,s,null,e.appContext.config.unwrapInjectedRef),i)for(const oe in i){const Q=i[oe];B(Q)&&(s[oe]=Q.bind(n))}if(r){const oe=r.call(n,n);se(oe)&&(e.data=kn(oe))}if(Yn=!0,o)for(const oe in o){const Q=o[oe],nt=B(Q)?Q.bind(n,n):B(Q.get)?Q.get.bind(n,n):Re,Xt=!B(Q)&&B(Q.set)?Q.set.bind(n):Re,st=W({get:nt,set:Xt});Object.defineProperty(s,oe,{enumerable:!0,configurable:!0,get:()=>st.value,set:He=>st.value=He})}if(l)for(const oe in l)Zr(l[oe],s,n,oe);if(c){const oe=B(c)?c.call(n):c;Reflect.ownKeys(oe).forEach(Q=>{Pi(Q,oe[Q])})}h&&Us(h,e,"c");function ee(oe,Q){F(Q)?Q.forEach(nt=>oe(nt.bind(n))):Q&&oe(Q.bind(n))}if(ee(Fi,p),ee(Ot,b),ee(Hi,C),ee(Jr,L),ee(Ri,R),ee(Mi,z),ee(Di,D),ee(Ui,te),ee(Bi,Y),ee(Ni,x),ee(An,U),ee(ji,ue),F(re))if(re.length){const oe=e.exposed||(e.exposed={});re.forEach(Q=>{Object.defineProperty(oe,Q,{get:()=>n[Q],set:nt=>n[Q]=nt})})}else e.exposed||(e.exposed={});J&&e.render===Re&&(e.render=J),le!=null&&(e.inheritAttrs=le),Se&&(e.components=Se),pe&&(e.directives=pe)}function Vi(e,t,n=Re,s=!1){F(e)&&(e=Xn(e));for(const r in e){const o=e[r];let i;se(o)?"default"in o?i=xt(o.from||r,o.default,!0):i=xt(o.from||r):i=xt(o),ge(i)&&s?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>i.value,set:l=>i.value=l}):t[r]=i}}function Us(e,t,n){Me(F(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Zr(e,t,n,s){const r=s.includes(".")?zr(n,s):()=>n[s];if(he(e)){const o=t[e];B(o)&&ut(r,o)}else if(B(e))ut(r,e.bind(n));else if(se(e))if(F(e))e.forEach(o=>Zr(o,t,n,s));else{const o=B(e.handler)?e.handler.bind(n):t[e.handler];B(o)&&ut(r,o,e)}}function gs(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:r,optionsCache:o,config:{optionMergeStrategies:i}}=e.appContext,l=o.get(t);let c;return l?c=l:!r.length&&!n&&!s?c=t:(c={},r.length&&r.forEach(f=>pn(c,f,i,!0)),pn(c,t,i)),se(t)&&o.set(t,c),c}function pn(e,t,n,s=!1){const{mixins:r,extends:o}=t;o&&pn(e,o,n,!0),r&&r.forEach(i=>pn(e,i,n,!0));for(const i in t)if(!(s&&i==="expose")){const l=Ji[i]||n&&n[i];e[i]=l?l(e[i],t[i]):t[i]}return e}const Ji={data:Ds,props:ot,emits:ot,methods:ot,computed:ot,beforeCreate:xe,created:xe,beforeMount:xe,mounted:xe,beforeUpdate:xe,updated:xe,beforeDestroy:xe,beforeUnmount:xe,destroyed:xe,unmounted:xe,activated:xe,deactivated:xe,errorCaptured:xe,serverPrefetch:xe,components:ot,directives:ot,watch:Xi,provide:Ds,inject:Yi};function Ds(e,t){return t?e?function(){return $e(B(e)?e.call(this,this):e,B(t)?t.call(this,this):t)}:t:e}function Yi(e,t){return ot(Xn(e),Xn(t))}function Xn(e){if(F(e)){const t={};for(let n=0;n0)&&!(i&16)){if(i&8){const h=e.vnode.dynamicProps;for(let p=0;p{c=!0;const[b,C]=Gr(p,t,!0);$e(i,b),C&&l.push(...C)};!n&&t.mixins.length&&t.mixins.forEach(h),e.extends&&h(e.extends),e.mixins&&e.mixins.forEach(h)}if(!o&&!c)return se(e)&&s.set(e,mt),mt;if(F(o))for(let h=0;h-1,C[1]=R<0||L-1||q(C,"default"))&&l.push(p)}}}const f=[i,l];return se(e)&&s.set(e,f),f}function Ks(e){return e[0]!=="$"}function Ws(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:e===null?"null":""}function qs(e,t){return Ws(e)===Ws(t)}function zs(e,t){return F(t)?t.findIndex(n=>qs(n,e)):B(t)&&qs(t,e)?0:-1}const eo=e=>e[0]==="_"||e==="$stable",ms=e=>F(e)?e.map(Pe):[Pe(e)],Gi=(e,t,n)=>{if(t._n)return t;const s=We((...r)=>ms(t(...r)),n);return s._c=!1,s},to=(e,t,n)=>{const s=e._ctx;for(const r in e){if(eo(r))continue;const o=e[r];if(B(o))t[r]=Gi(r,o,s);else if(o!=null){const i=ms(o);t[r]=()=>i}}},no=(e,t)=>{const n=ms(t);e.slots.default=()=>n},el=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=V(t),an(t,"_",n)):to(t,e.slots={})}else e.slots={},t&&no(e,t);an(e.slots,In,1)},tl=(e,t,n)=>{const{vnode:s,slots:r}=e;let o=!0,i=ne;if(s.shapeFlag&32){const l=t._;l?n&&l===1?o=!1:($e(r,t),!n&&l===1&&delete r._):(o=!t.$stable,to(t,r)),i=t}else t&&(no(e,t),i={default:1});if(o)for(const l in r)!eo(l)&&!(l in i)&&delete r[l]};function so(){return{app:null,config:{isNativeTag:Io,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let nl=0;function sl(e,t){return function(s,r=null){B(s)||(s=Object.assign({},s)),r!=null&&!se(r)&&(r=null);const o=so(),i=new Set;let l=!1;const c=o.app={_uid:nl++,_component:s,_props:r,_container:null,_context:o,_instance:null,version:$l,get config(){return o.config},set config(f){},use(f,...h){return i.has(f)||(f&&B(f.install)?(i.add(f),f.install(c,...h)):B(f)&&(i.add(f),f(c,...h))),c},mixin(f){return o.mixins.includes(f)||o.mixins.push(f),c},component(f,h){return h?(o.components[f]=h,c):o.components[f]},directive(f,h){return h?(o.directives[f]=h,c):o.directives[f]},mount(f,h,p){if(!l){const b=H(s,r);return b.appContext=o,h&&t?t(b,f):e(b,f,p),l=!0,c._container=f,f.__vue_app__=c,ys(b.component)||b.component.proxy}},unmount(){l&&(e(null,c._container),delete c._container.__vue_app__)},provide(f,h){return o.provides[f]=h,c}};return c}}function _n(e,t,n,s,r=!1){if(F(e)){e.forEach((b,C)=>_n(b,t&&(F(t)?t[C]:t),n,s,r));return}if(wt(s)&&!r)return;const o=s.shapeFlag&4?ys(s.component)||s.component.proxy:s.el,i=r?null:o,{i:l,r:c}=e,f=t&&t.r,h=l.refs===ne?l.refs={}:l.refs,p=l.setupState;if(f!=null&&f!==c&&(he(f)?(h[f]=null,q(p,f)&&(p[f]=null)):ge(f)&&(f.value=null)),B(c))Ge(c,l,12,[i,h]);else{const b=he(c),C=ge(c);if(b||C){const L=()=>{if(e.f){const R=b?q(p,c)?p[c]:h[c]:c.value;r?F(R)&&ss(R,o):F(R)?R.includes(o)||R.push(o):b?(h[c]=[o],q(p,c)&&(p[c]=h[c])):(c.value=[o],e.k&&(h[e.k]=c.value))}else b?(h[c]=i,q(p,c)&&(p[c]=i)):C&&(c.value=i,e.k&&(h[e.k]=i))};i?(L.id=-1,ke(L,n)):L()}}}let Xe=!1;const rn=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",on=e=>e.nodeType===8;function rl(e){const{mt:t,p:n,o:{patchProp:s,createText:r,nextSibling:o,parentNode:i,remove:l,insert:c,createComment:f}}=e,h=(v,x)=>{if(!x.hasChildNodes()){n(null,v,x),fn(),x._vnode=v;return}Xe=!1,p(x.firstChild,v,null,null,null),fn(),x._vnode=v,Xe&&console.error("Hydration completed but contains mismatches.")},p=(v,x,$,U,J,te=!1)=>{const Y=on(v)&&v.data==="[",D=()=>R(v,x,$,U,J,Y),{type:ue,ref:re,shapeFlag:le,patchFlag:Se}=x;let pe=v.nodeType;x.el=v,Se===-2&&(te=!1,x.dynamicChildren=null);let M=null;switch(ue){case kt:pe!==3?x.children===""?(c(x.el=r(""),i(v),v),M=v):M=D():(v.data!==x.children&&(Xe=!0,v.data=x.children),M=o(v));break;case Ve:pe!==8||Y?M=D():M=o(v);break;case jt:if(Y&&(v=o(v),pe=v.nodeType),pe===1||pe===3){M=v;const Fe=!x.children.length;for(let ee=0;ee{te=te||!!x.dynamicChildren;const{type:Y,props:D,patchFlag:ue,shapeFlag:re,dirs:le}=x,Se=Y==="input"&&le||Y==="option";if(Se||ue!==-1){if(le&&Be(x,null,$,"created"),D)if(Se||!te||ue&48)for(const M in D)(Se&&M.endsWith("value")||zt(M)&&!Ft(M))&&s(v,M,null,D[M],!1,void 0,$);else D.onClick&&s(v,"onClick",null,D.onClick,!1,void 0,$);let pe;if((pe=D&&D.onVnodeBeforeMount)&&Te(pe,$,x),le&&Be(x,null,$,"beforeMount"),((pe=D&&D.onVnodeMounted)||le)&&Wr(()=>{pe&&Te(pe,$,x),le&&Be(x,null,$,"mounted")},U),re&16&&!(D&&(D.innerHTML||D.textContent))){let M=C(v.firstChild,x,v,$,U,J,te);for(;M;){Xe=!0;const Fe=M;M=M.nextSibling,l(Fe)}}else re&8&&v.textContent!==x.children&&(Xe=!0,v.textContent=x.children)}return v.nextSibling},C=(v,x,$,U,J,te,Y)=>{Y=Y||!!x.dynamicChildren;const D=x.children,ue=D.length;for(let re=0;re{const{slotScopeIds:Y}=x;Y&&(J=J?J.concat(Y):Y);const D=i(v),ue=C(o(v),x,D,$,U,J,te);return ue&&on(ue)&&ue.data==="]"?o(x.anchor=ue):(Xe=!0,c(x.anchor=f("]"),D,ue),ue)},R=(v,x,$,U,J,te)=>{if(Xe=!0,x.el=null,te){const ue=z(v);for(;;){const re=o(v);if(re&&re!==ue)l(re);else break}}const Y=o(v),D=i(v);return l(v),n(null,x,D,Y,$,U,rn(D),J),Y},z=v=>{let x=0;for(;v;)if(v=o(v),v&&on(v)&&(v.data==="["&&x++,v.data==="]")){if(x===0)return o(v);x--}return v};return[h,p]}const ke=Wr;function ol(e){return il(e,rl)}function il(e,t){const n=Ho();n.__VUE__=!0;const{insert:s,remove:r,patchProp:o,createElement:i,createText:l,createComment:c,setText:f,setElementText:h,parentNode:p,nextSibling:b,setScopeId:C=Re,insertStaticContent:L}=e,R=(a,u,d,g=null,_=null,w=null,T=!1,y=null,E=!!u.dynamicChildren)=>{if(a===u)return;a&&!Mt(a,u)&&(g=Zt(a),He(a,_,w,!0),a=null),u.patchFlag===-2&&(E=!1,u.dynamicChildren=null);const{type:m,ref:I,shapeFlag:A}=u;switch(m){case kt:z(a,u,d,g);break;case Ve:v(a,u,d,g);break;case jt:a==null&&x(u,d,g,T);break;case _e:Se(a,u,d,g,_,w,T,y,E);break;default:A&1?J(a,u,d,g,_,w,T,y,E):A&6?pe(a,u,d,g,_,w,T,y,E):(A&64||A&128)&&m.process(a,u,d,g,_,w,T,y,E,pt)}I!=null&&_&&_n(I,a&&a.ref,w,u||a,!u)},z=(a,u,d,g)=>{if(a==null)s(u.el=l(u.children),d,g);else{const _=u.el=a.el;u.children!==a.children&&f(_,u.children)}},v=(a,u,d,g)=>{a==null?s(u.el=c(u.children||""),d,g):u.el=a.el},x=(a,u,d,g)=>{[a.el,a.anchor]=L(a.children,u,d,g,a.el,a.anchor)},$=({el:a,anchor:u},d,g)=>{let _;for(;a&&a!==u;)_=b(a),s(a,d,g),a=_;s(u,d,g)},U=({el:a,anchor:u})=>{let d;for(;a&&a!==u;)d=b(a),r(a),a=d;r(u)},J=(a,u,d,g,_,w,T,y,E)=>{T=T||u.type==="svg",a==null?te(u,d,g,_,w,T,y,E):ue(a,u,_,w,T,y,E)},te=(a,u,d,g,_,w,T,y)=>{let E,m;const{type:I,props:A,shapeFlag:O,transition:S,dirs:K}=a;if(E=a.el=i(a.type,w,A&&A.is,A),O&8?h(E,a.children):O&16&&D(a.children,E,null,g,_,w&&I!=="foreignObject",T,y),K&&Be(a,null,g,"created"),A){for(const X in A)X!=="value"&&!Ft(X)&&o(E,X,null,A[X],w,a.children,g,_,Ke);"value"in A&&o(E,"value",null,A.value),(m=A.onVnodeBeforeMount)&&Te(m,g,a)}Y(E,a,a.scopeId,T,g),K&&Be(a,null,g,"beforeMount");const G=(!_||_&&!_.pendingBranch)&&S&&!S.persisted;G&&S.beforeEnter(E),s(E,u,d),((m=A&&A.onVnodeMounted)||G||K)&&ke(()=>{m&&Te(m,g,a),G&&S.enter(E),K&&Be(a,null,g,"mounted")},_)},Y=(a,u,d,g,_)=>{if(d&&C(a,d),g)for(let w=0;w{for(let m=E;m{const y=u.el=a.el;let{patchFlag:E,dynamicChildren:m,dirs:I}=u;E|=a.patchFlag&16;const A=a.props||ne,O=u.props||ne;let S;d&&rt(d,!1),(S=O.onVnodeBeforeUpdate)&&Te(S,d,u,a),I&&Be(u,a,d,"beforeUpdate"),d&&rt(d,!0);const K=_&&u.type!=="foreignObject";if(m?re(a.dynamicChildren,m,y,d,g,K,w):T||Q(a,u,y,null,d,g,K,w,!1),E>0){if(E&16)le(y,u,A,O,d,g,_);else if(E&2&&A.class!==O.class&&o(y,"class",null,O.class,_),E&4&&o(y,"style",A.style,O.style,_),E&8){const G=u.dynamicProps;for(let X=0;X{S&&Te(S,d,u,a),I&&Be(u,a,d,"updated")},g)},re=(a,u,d,g,_,w,T)=>{for(let y=0;y{if(d!==g){if(d!==ne)for(const y in d)!Ft(y)&&!(y in g)&&o(a,y,d[y],null,T,u.children,_,w,Ke);for(const y in g){if(Ft(y))continue;const E=g[y],m=d[y];E!==m&&y!=="value"&&o(a,y,m,E,T,u.children,_,w,Ke)}"value"in g&&o(a,"value",d.value,g.value)}},Se=(a,u,d,g,_,w,T,y,E)=>{const m=u.el=a?a.el:l(""),I=u.anchor=a?a.anchor:l("");let{patchFlag:A,dynamicChildren:O,slotScopeIds:S}=u;S&&(y=y?y.concat(S):S),a==null?(s(m,d,g),s(I,d,g),D(u.children,d,I,_,w,T,y,E)):A>0&&A&64&&O&&a.dynamicChildren?(re(a.dynamicChildren,O,d,_,w,T,y),(u.key!=null||_&&u===_.subTree)&&ro(a,u,!0)):Q(a,u,d,I,_,w,T,y,E)},pe=(a,u,d,g,_,w,T,y,E)=>{u.slotScopeIds=y,a==null?u.shapeFlag&512?_.ctx.activate(u,d,g,T,E):M(u,d,g,_,w,T,E):Fe(a,u,E)},M=(a,u,d,g,_,w,T)=>{const y=a.component=pl(a,g,_);if(_s(a)&&(y.ctx.renderer=pt),_l(y),y.asyncDep){if(_&&_.registerDep(y,ee),!a.el){const E=y.subTree=H(Ve);v(null,E,u,d)}return}ee(y,a,u,d,_,w,T)},Fe=(a,u,d)=>{const g=u.component=a.component;if(Ti(a,u,d))if(g.asyncDep&&!g.asyncResolved){oe(g,u,d);return}else g.next=u,xi(g.update),g.update();else u.el=a.el,g.vnode=u},ee=(a,u,d,g,_,w,T)=>{const y=()=>{if(a.isMounted){let{next:I,bu:A,u:O,parent:S,vnode:K}=a,G=I,X;rt(a,!1),I?(I.el=K.el,oe(a,I,T)):I=K,A&&Sn(A),(X=I.props&&I.props.onVnodeBeforeUpdate)&&Te(X,S,I,K),rt(a,!0);const ce=Fn(a),Ae=a.subTree;a.subTree=ce,R(Ae,ce,p(Ae.el),Zt(Ae),a,_,w),I.el=ce.el,G===null&&Li(a,ce.el),O&&ke(O,_),(X=I.props&&I.props.onVnodeUpdated)&&ke(()=>Te(X,S,I,K),_)}else{let I;const{el:A,props:O}=u,{bm:S,m:K,parent:G}=a,X=wt(u);if(rt(a,!1),S&&Sn(S),!X&&(I=O&&O.onVnodeBeforeMount)&&Te(I,G,u),rt(a,!0),A&&Rn){const ce=()=>{a.subTree=Fn(a),Rn(A,a.subTree,a,_,null)};X?u.type.__asyncLoader().then(()=>!a.isUnmounted&&ce()):ce()}else{const ce=a.subTree=Fn(a);R(null,ce,d,g,a,_,w),u.el=ce.el}if(K&&ke(K,_),!X&&(I=O&&O.onVnodeMounted)){const ce=u;ke(()=>Te(I,G,ce),_)}(u.shapeFlag&256||G&&wt(G.vnode)&&G.vnode.shapeFlag&256)&&a.a&&ke(a.a,_),a.isMounted=!0,u=d=g=null}},E=a.effect=new ls(y,()=>En(m),a.scope),m=a.update=()=>E.run();m.id=a.uid,rt(a,!0),m()},oe=(a,u,d)=>{u.component=a;const g=a.vnode.props;a.vnode=u,a.next=null,Qi(a,u.props,g,d),tl(a,u.children,d),Pt(),Ns(),It()},Q=(a,u,d,g,_,w,T,y,E=!1)=>{const m=a&&a.children,I=a?a.shapeFlag:0,A=u.children,{patchFlag:O,shapeFlag:S}=u;if(O>0){if(O&128){Xt(m,A,d,g,_,w,T,y,E);return}else if(O&256){nt(m,A,d,g,_,w,T,y,E);return}}S&8?(I&16&&Ke(m,_,w),A!==m&&h(d,A)):I&16?S&16?Xt(m,A,d,g,_,w,T,y,E):Ke(m,_,w,!0):(I&8&&h(d,""),S&16&&D(A,d,g,_,w,T,y,E))},nt=(a,u,d,g,_,w,T,y,E)=>{a=a||mt,u=u||mt;const m=a.length,I=u.length,A=Math.min(m,I);let O;for(O=0;OI?Ke(a,_,w,!0,!1,A):D(u,d,g,_,w,T,y,E,A)},Xt=(a,u,d,g,_,w,T,y,E)=>{let m=0;const I=u.length;let A=a.length-1,O=I-1;for(;m<=A&&m<=O;){const S=a[m],K=u[m]=E?Ze(u[m]):Pe(u[m]);if(Mt(S,K))R(S,K,d,null,_,w,T,y,E);else break;m++}for(;m<=A&&m<=O;){const S=a[A],K=u[O]=E?Ze(u[O]):Pe(u[O]);if(Mt(S,K))R(S,K,d,null,_,w,T,y,E);else break;A--,O--}if(m>A){if(m<=O){const S=O+1,K=SO)for(;m<=A;)He(a[m],_,w,!0),m++;else{const S=m,K=m,G=new Map;for(m=K;m<=O;m++){const Ee=u[m]=E?Ze(u[m]):Pe(u[m]);Ee.key!=null&&G.set(Ee.key,m)}let X,ce=0;const Ae=O-K+1;let _t=!1,Ts=0;const Rt=new Array(Ae);for(m=0;m=Ae){He(Ee,_,w,!0);continue}let Ne;if(Ee.key!=null)Ne=G.get(Ee.key);else for(X=K;X<=O;X++)if(Rt[X-K]===0&&Mt(Ee,u[X])){Ne=X;break}Ne===void 0?He(Ee,_,w,!0):(Rt[Ne-K]=m+1,Ne>=Ts?Ts=Ne:_t=!0,R(Ee,u[Ne],d,null,_,w,T,y,E),ce++)}const Ls=_t?ll(Rt):mt;for(X=Ls.length-1,m=Ae-1;m>=0;m--){const Ee=K+m,Ne=u[Ee],As=Ee+1{const{el:w,type:T,transition:y,children:E,shapeFlag:m}=a;if(m&6){st(a.component.subTree,u,d,g);return}if(m&128){a.suspense.move(u,d,g);return}if(m&64){T.move(a,u,d,pt);return}if(T===_e){s(w,u,d);for(let A=0;Ay.enter(w),_);else{const{leave:A,delayLeave:O,afterLeave:S}=y,K=()=>s(w,u,d),G=()=>{A(w,()=>{K(),S&&S()})};O?O(w,K,G):G()}else s(w,u,d)},He=(a,u,d,g=!1,_=!1)=>{const{type:w,props:T,ref:y,children:E,dynamicChildren:m,shapeFlag:I,patchFlag:A,dirs:O}=a;if(y!=null&&_n(y,null,d,a,!0),I&256){u.ctx.deactivate(a);return}const S=I&1&&O,K=!wt(a);let G;if(K&&(G=T&&T.onVnodeBeforeUnmount)&&Te(G,u,a),I&6)ko(a.component,d,g);else{if(I&128){a.suspense.unmount(d,g);return}S&&Be(a,null,u,"beforeUnmount"),I&64?a.type.remove(a,u,d,_,pt,g):m&&(w!==_e||A>0&&A&64)?Ke(m,u,d,!1,!0):(w===_e&&A&384||!_&&I&16)&&Ke(E,u,d),g&&Es(a)}(K&&(G=T&&T.onVnodeUnmounted)||S)&&ke(()=>{G&&Te(G,u,a),S&&Be(a,null,u,"unmounted")},d)},Es=a=>{const{type:u,el:d,anchor:g,transition:_}=a;if(u===_e){$o(d,g);return}if(u===jt){U(a);return}const w=()=>{r(d),_&&!_.persisted&&_.afterLeave&&_.afterLeave()};if(a.shapeFlag&1&&_&&!_.persisted){const{leave:T,delayLeave:y}=_,E=()=>T(d,w);y?y(a.el,w,E):E()}else w()},$o=(a,u)=>{let d;for(;a!==u;)d=b(a),r(a),a=d;r(u)},ko=(a,u,d)=>{const{bum:g,scope:_,update:w,subTree:T,um:y}=a;g&&Sn(g),_.stop(),w&&(w.active=!1,He(T,a,u,d)),y&&ke(y,u),ke(()=>{a.isUnmounted=!0},u),u&&u.pendingBranch&&!u.isUnmounted&&a.asyncDep&&!a.asyncResolved&&a.suspenseId===u.pendingId&&(u.deps--,u.deps===0&&u.resolve())},Ke=(a,u,d,g=!1,_=!1,w=0)=>{for(let T=w;Ta.shapeFlag&6?Zt(a.component.subTree):a.shapeFlag&128?a.suspense.next():b(a.anchor||a.el),Cs=(a,u,d)=>{a==null?u._vnode&&He(u._vnode,null,null,!0):R(u._vnode||null,a,u,null,null,null,d),Ns(),fn(),u._vnode=a},pt={p:R,um:He,m:st,r:Es,mt:M,mc:D,pc:Q,pbc:re,n:Zt,o:e};let On,Rn;return t&&([On,Rn]=t(pt)),{render:Cs,hydrate:On,createApp:sl(Cs,On)}}function rt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function ro(e,t,n=!1){const s=e.children,r=t.children;if(F(s)&&F(r))for(let o=0;o>1,e[n[l]]0&&(t[s]=n[o-1]),n[o]=s)}}for(o=n.length,i=n[o-1];o-- >0;)n[o]=i,i=t[i];return n}const cl=e=>e.__isTeleport,_e=Symbol(void 0),kt=Symbol(void 0),Ve=Symbol(void 0),jt=Symbol(void 0),Bt=[];let Oe=null;function P(e=!1){Bt.push(Oe=e?null:[])}function al(){Bt.pop(),Oe=Bt[Bt.length-1]||null}let qt=1;function Vs(e){qt+=e}function oo(e){return e.dynamicChildren=qt>0?Oe||mt:null,al(),qt>0&&Oe&&Oe.push(e),e}function N(e,t,n,s,r,o){return oo(j(e,t,n,s,r,o,!0))}function me(e,t,n,s,r){return oo(H(e,t,n,s,r,!0))}function gn(e){return e?e.__v_isVNode===!0:!1}function Mt(e,t){return e.type===t.type&&e.key===t.key}const In="__vInternal",io=({key:e})=>e!=null?e:null,cn=({ref:e,ref_key:t,ref_for:n})=>e!=null?he(e)||ge(e)||B(e)?{i:be,r:e,k:t,f:!!n}:e:null;function j(e,t=null,n=null,s=0,r=null,o=e===_e?0:1,i=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&io(t),ref:t&&cn(t),scopeId:Tn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:o,patchFlag:s,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:be};return l?(vs(c,n),o&128&&e.normalize(c)):n&&(c.shapeFlag|=he(n)?8:16),qt>0&&!i&&Oe&&(c.patchFlag>0||o&6)&&c.patchFlag!==32&&Oe.push(c),c}const H=ul;function ul(e,t=null,n=null,s=0,r=null,o=!1){if((!e||e===Ki)&&(e=Ve),gn(e)){const l=Et(e,t,!0);return n&&vs(l,n),qt>0&&!o&&Oe&&(l.shapeFlag&6?Oe[Oe.indexOf(e)]=l:Oe.push(l)),l.patchFlag|=-2,l}if(yl(e)&&(e=e.__vccOpts),t){t=fl(t);let{class:l,style:c}=t;l&&!he(l)&&(t.class=dt(l)),se(c)&&(Pr(c)&&!F(c)&&(c=$e({},c)),t.style=ts(c))}const i=he(e)?1:Ai(e)?128:cl(e)?64:se(e)?4:B(e)?2:0;return j(e,t,n,s,r,i,o,!0)}function fl(e){return e?Pr(e)||In in e?$e({},e):e:null}function Et(e,t,n=!1){const{props:s,ref:r,patchFlag:o,children:i}=e,l=t?bs(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&io(l),ref:t&&t.ref?n&&r?F(r)?r.concat(cn(t)):[r,cn(t)]:cn(t):r,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:i,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==_e?o===-1?16:o|16:o,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&Et(e.ssContent),ssFallback:e.ssFallback&&Et(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx}}function Jt(e=" ",t=0){return H(kt,null,e,t)}function Yu(e,t){const n=H(jt,null,e);return n.staticCount=t,n}function Z(e="",t=!1){return t?(P(),me(Ve,null,e)):H(Ve,null,e)}function Pe(e){return e==null||typeof e=="boolean"?H(Ve):F(e)?H(_e,null,e.slice()):typeof e=="object"?Ze(e):H(kt,null,String(e))}function Ze(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:Et(e)}function vs(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(F(t))n=16;else if(typeof t=="object")if(s&65){const r=t.default;r&&(r._c&&(r._d=!1),vs(e,r()),r._c&&(r._d=!0));return}else{n=32;const r=t._;!r&&!(In in t)?t._ctx=be:r===3&&be&&(be.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else B(t)?(t={default:t,_ctx:be},n=32):(t=String(t),s&64?(n=16,t=[Jt(t)]):n=8);e.children=t,e.shapeFlag|=n}function bs(...e){const t={};for(let n=0;nde||be,Ct=e=>{de=e,e.scope.on()},ft=()=>{de&&de.scope.off(),de=null};function lo(e){return e.vnode.shapeFlag&4}let Tt=!1;function _l(e,t=!1){Tt=t;const{props:n,children:s}=e.vnode,r=lo(e);Zi(e,n,r,t),el(e,s);const o=r?gl(e,t):void 0;return Tt=!1,o}function gl(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=Ht(new Proxy(e.ctx,qi));const{setup:s}=n;if(s){const r=e.setupContext=s.length>1?vl(e):null;Ct(e),Pt();const o=Ge(s,e,0,[e.props,r]);if(It(),ft(),_r(o)){if(o.then(ft,ft),t)return o.then(i=>{Js(e,i,t)}).catch(i=>{Vt(i,e,0)});e.asyncDep=o}else Js(e,o,t)}else co(e,t)}function Js(e,t,n){B(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:se(t)&&(e.setupState=Mr(t)),co(e,n)}let Ys;function co(e,t,n){const s=e.type;if(!e.render){if(!t&&Ys&&!s.render){const r=s.template||gs(e).template;if(r){const{isCustomElement:o,compilerOptions:i}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,f=$e($e({isCustomElement:o,delimiters:l},i),c);s.render=Ys(r,f)}}e.render=s.render||Re}Ct(e),Pt(),zi(e),It(),ft()}function ml(e){return new Proxy(e.attrs,{get(t,n){return Ce(e,"get","$attrs"),t[n]}})}function vl(e){const t=s=>{e.exposed=s||{}};let n;return{get attrs(){return n||(n=ml(e))},slots:e.slots,emit:e.emit,expose:t}}function ys(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Mr(Ht(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Nt)return Nt[n](e)},has(t,n){return n in t||n in Nt}}))}function bl(e,t=!0){return B(e)?e.displayName||e.name:e.name||t&&e.__name}function yl(e){return B(e)&&"__vccOpts"in e}const W=(e,t)=>vi(e,t,Tt);function ht(e,t,n){const s=arguments.length;return s===2?se(t)&&!F(t)?gn(t)?H(e,null,[t]):H(e,t):H(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&gn(n)&&(n=[n]),H(e,t,n))}const xl=Symbol(""),wl=()=>xt(xl),$l="3.2.45",kl="http://www.w3.org/2000/svg",lt=typeof document!="undefined"?document:null,Xs=lt&<.createElement("template"),El={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t?lt.createElementNS(kl,e):lt.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>lt.createTextNode(e),createComment:e=>lt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>lt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,o){const i=n?n.previousSibling:t.lastChild;if(r&&(r===o||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===o||!(r=r.nextSibling)););else{Xs.innerHTML=s?`${e}`:e;const l=Xs.content;if(s){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[i?i.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function Cl(e,t,n){const s=e._vtc;s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function Tl(e,t,n){const s=e.style,r=he(n);if(n&&!r){for(const o in n)Qn(s,o,n[o]);if(t&&!he(t))for(const o in t)n[o]==null&&Qn(s,o,"")}else{const o=s.display;r?t!==n&&(s.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(s.display=o)}}const Zs=/\s*!important$/;function Qn(e,t,n){if(F(n))n.forEach(s=>Qn(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=Ll(e,t);Zs.test(n)?e.setProperty(At(s),n.replace(Zs,""),"important"):e[s]=n}}const Qs=["Webkit","Moz","ms"],jn={};function Ll(e,t){const n=jn[t];if(n)return n;let s=De(t);if(s!=="filter"&&s in e)return jn[t]=s;s=wn(s);for(let r=0;rBn||(Sl.then(()=>Bn=0),Bn=Date.now());function Hl(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;Me(Nl(s,n.value),t,5,[s])};return n.value=e,n.attached=Fl(),n}function Nl(e,t){if(F(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const tr=/^on[a-z]/,jl=(e,t,n,s,r=!1,o,i,l,c)=>{t==="class"?Cl(e,s,r):t==="style"?Tl(e,n,s):zt(t)?ns(t)||Rl(e,t,n,s,i):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Bl(e,t,s,r))?Pl(e,t,s,o,i,l,c):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Al(e,t,s,r))};function Bl(e,t,n,s){return s?!!(t==="innerHTML"||t==="textContent"||t in e&&tr.test(t)&&B(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||tr.test(t)&&he(n)?!1:t in e}const Ul=$e({patchProp:jl},El);let Un,nr=!1;function Dl(){return Un=nr?Un:ol(Ul),nr=!0,Un}const Kl=(...e)=>{const t=Dl().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=Wl(s);if(r)return n(r,!0,r instanceof SVGElement)},t};function Wl(e){return he(e)?document.querySelector(e):e}var ql='{"lang":"en-US","title":"VitePress","description":"A VitePress site","base":"/","head":[],"themeConfig":{"repo":"apertureless/vue-chartjs","docsDir":"website/src","docsBranch":"main","editLinks":true,"editLinkText":"Help us improve this page!","lastUpdated":"Last Updated","algolia":{"indexName":"vue-chartjs","apiKey":"a1bb4528e8ed1eb89e40d6e4c1000514","appId":"24VA3R3NCC"},"nav":[{"text":"Guide","link":"/guide/","activeMatch":"^/guide/"},{"text":"Migration guides","link":"/migration-guides/","activeMatch":"^/migration-guides/"},{"text":"API","link":"/api/","activeMatch":"^/api/"},{"text":"Examples","link":"/examples/","activeMatch":"^/examples/"},{"text":"Slack","link":"https://slack.cube.dev/?ref=eco-vue-chartjs"},{"text":"Stack Overflow","link":"https://stackoverflow.com/questions/tagged/vue-chartjs/"}],"sidebar":"auto","locales":{"/":{"selectText":"Languages","label":"English","editLinkText":"Edit this page on GitHub"}}},"locales":{"/":{"lang":"en-US","title":"\u{1F4C8} vue-chartjs","description":"\u26A1 Easy and beautiful charts with Chart.js and Vue.js"}},"langs":{"/":{"label":"English","lang":"en-US"}},"scrollOffset":90}';const ao=/^https?:/i,Le=typeof window!="undefined";function zl(e,t){t.sort((n,s)=>{const r=s.split("/").length-n.split("/").length;return r!==0?r:s.length-n.length});for(const n of t)if(e.startsWith(n))return n}function sr(e,t){const n=zl(t,Object.keys(e));return n?e[n]:void 0}function Vl(e){const{locales:t}=e.themeConfig||{},n=e.locales;return t&&n?Object.keys(t).reduce((s,r)=>(s[r]={label:t[r].label,lang:n[r].lang},s),{}):{}}function Jl(e,t){t=Yl(e,t);const n=sr(e.locales||{},t),s=sr(e.themeConfig.locales||{},t);return Object.assign({},e,n,{themeConfig:Object.assign({},e.themeConfig,s,{locales:{}}),lang:(n||e).lang,locales:{},langs:Vl(e)})}function Yl(e,t){if(!Le)return t;const n=e.base,s=n.endsWith("/")?n.slice(0,-1):n;return t.slice(s.length)}const uo=Symbol(),Yt=di(Xl(ql));function Xl(e){return JSON.parse(e)}function Zl(e){const t=W(()=>Jl(Yt.value,e.path));return{site:t,theme:W(()=>t.value.themeConfig),page:W(()=>e.data),frontmatter:W(()=>e.data.frontmatter),lang:W(()=>t.value.lang),localePath:W(()=>{const{langs:n,lang:s}=t.value,r=Object.keys(n).find(o=>n[o].lang===s);return Lt(r||"/")}),title:W(()=>e.data.title?e.data.title+" | "+t.value.title:t.value.title),description:W(()=>e.data.description||t.value.description)}}function ye(){const e=xt(uo);if(!e)throw new Error("vitepress data not properly injected in app");return e}function Ql(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function Lt(e){return ao.test(e)?e:Ql(Yt.value.base,e)}function fo(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t.endsWith("/")&&(t+="index"),Le){const n="/";t=t.slice(n.length).replace(/\//g,"_")+".md";const s=__VP_HASH_MAP__[t.toLowerCase()];t=`${n}assets/${t}.${s}.js`}else t=`./${t.slice(1).replace(/\//g,"_")}.md.js`;return t}const ho=Symbol(),rr="http://a.com",po={relativePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{},lastUpdated:0},Gl=()=>({path:"/",component:null,data:po});function ec(e,t){const n=kn(Gl());function s(i=Le?location.href:"/"){const l=new URL(i,rr);return!l.pathname.endsWith("/")&&!l.pathname.endsWith(".html")&&(l.pathname+=".html",i=l.pathname+l.search+l.hash),Le&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",i)),o(i)}let r=null;async function o(i,l=0,c=!1){const f=new URL(i,rr),h=r=f.pathname;try{let p=e(h);if("then"in p&&typeof p.then=="function"&&(p=await p),r===h){r=null;const{default:b,__pageData:C}=p;if(!b)throw new Error(`Invalid route component: ${b}`);n.path=h,n.component=Ht(b),n.data=Ht(JSON.parse(C)),Le&&Nr(()=>{if(f.hash&&!l){let L=null;try{L=document.querySelector(decodeURIComponent(f.hash))}catch(R){console.warn(R)}if(L){or(L,f.hash);return}}window.scrollTo(0,l)})}}catch(p){if(p.message.match(/fetch/)||console.error(p),!c)try{const b=await fetch(Yt.value.base+"hashmap.json");window.__VP_HASH_MAP__=await b.json(),await o(i,l,!0);return}catch{}r===h&&(r=null,n.path=h,n.component=t?Ht(t):null,n.data=po)}}return Le&&(window.addEventListener("click",i=>{const l=i.target.closest("a");if(l){const{href:c,protocol:f,hostname:h,pathname:p,hash:b,target:C}=l,L=window.location,R=p.match(/\.\w+$/);!i.ctrlKey&&!i.shiftKey&&!i.altKey&&!i.metaKey&&C!=="_blank"&&f===L.protocol&&h===L.hostname&&!(R&&R[0]!==".html")&&(i.preventDefault(),p===L.pathname?b&&b!==L.hash&&(history.pushState(null,"",b),window.dispatchEvent(new Event("hashchange")),or(l,b,l.classList.contains("header-anchor"))):s(c))}},{capture:!0}),window.addEventListener("popstate",i=>{o(location.href,i.state&&i.state.scrollPosition||0)}),window.addEventListener("hashchange",i=>{i.preventDefault()})),{route:n,go:s}}function tc(){const e=xt(ho);if(!e)throw new Error("useRouter() is called without provider.");return e}function tt(){return tc().route}function or(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.querySelector(decodeURIComponent(t))}catch(r){console.warn(r)}if(s){let r=Yt.value.scrollOffset;typeof r=="string"&&(r=document.querySelector(r).getBoundingClientRect().bottom+24);const o=parseInt(window.getComputedStyle(s).paddingTop,10),i=window.scrollY+s.getBoundingClientRect().top-r+o;!n||Math.abs(i-window.scrollY)>window.innerHeight?window.scrollTo(0,i):window.scrollTo({left:0,top:i,behavior:"smooth"})}}function nc(e,t){let n=[],s=!0;const r=o=>{if(s){s=!1;return}const i=[],l=Math.min(n.length,o.length);for(let c=0;cdocument.head.removeChild(c)),o.slice(l).forEach(c=>{const f=ir(c);document.head.appendChild(f),i.push(f)}),n=i};qr(()=>{const o=e.data,i=t.value,l=o&&o.title,c=o&&o.description,f=o&&o.frontmatter.head;document.title=(l?l+" | ":"")+i.title,document.querySelector("meta[name=description]").setAttribute("content",c||i.description),r([...f?rc(f):[]])})}function ir([e,t,n]){const s=document.createElement(e);for(const r in t)s.setAttribute(r,t[r]);return n&&(s.innerHTML=n),s}function sc(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function rc(e){return e.filter(t=>!sc(t))}const oc=ie({name:"VitePressContent",setup(){const e=tt();return()=>ht("div",{style:{position:"relative"}},[e.component?ht(e.component):null])}});var ae=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n};const ic=/#.*$/,lc=/(index)?\.(md|html)$/,mn=/\/$/,cc=/^[a-z]+:/i;function xs(e){return Array.isArray(e)}function ws(e){return cc.test(e)}function ac(e,t){if(t===void 0)return!1;const n=lr(`/${e.data.relativePath}`),s=lr(t);return n===s}function lr(e){return decodeURI(e).replace(ic,"").replace(lc,"")}function uc(e,t){const n=e.endsWith("/"),s=t.startsWith("/");return n&&s?e.slice(0,-1)+t:!n&&!s?`${e}/${t}`:e+t}function Gn(e){return/^\//.test(e)?e:`/${e}`}function _o(e){return e.replace(/(index)?(\.(md|html))?$/,"")||"/"}function fc(e){return e===!1||e==="auto"||xs(e)}function dc(e){return e.children!==void 0}function hc(e){return xs(e)?e.length===0:!e}function $s(e,t){if(fc(e))return e;t=Gn(t);for(const n in e)if(t.startsWith(Gn(n)))return e[n];return"auto"}function go(e){return e.reduce((t,n)=>(n.link&&t.push({text:n.text,link:_o(n.link)}),dc(n)&&(t=[...t,...go(n.children)]),t),[])}function mo(e){const t=tt(),n=ws(e.value.link);return{props:W(()=>{const r=cr(`/${t.data.relativePath}`);let o=!1;if(e.value.activeMatch)o=new RegExp(e.value.activeMatch).test(r);else{const i=cr(e.value.link);o=i==="/"?i===r:r.startsWith(i)}return{class:{active:o,isExternal:n},href:n?e.value.link:Lt(e.value.link),target:e.value.target||(n?"_blank":null),rel:e.value.rel||(n?"noopener noreferrer":null),"aria-label":e.value.ariaLabel}}),isExternal:n}}function cr(e){return e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\.(html|md)$/,"").replace(/\/index$/,"/")}const pc={},_c={class:"icon outbound",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"},gc=j("path",{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"},null,-1),mc=j("polygon",{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"},null,-1),vc=[gc,mc];function bc(e,t){return P(),N("svg",_c,vc)}var ks=ae(pc,[["render",bc]]);const yc={class:"nav-link"},xc=ie({__name:"NavLink",props:{item:null},setup(e){const n=Sr(e),{props:s,isExternal:r}=mo(n.item);return(o,i)=>(P(),N("div",yc,[j("a",bs({class:"item"},k(s)),[Jt(we(e.item.text)+" ",1),k(r)?(P(),me(ks,{key:0})):Z("",!0)],16)]))}});var vn=ae(xc,[["__scopeId","data-v-2cb643ba"]]);const wc={key:0,class:"home-hero"},$c={key:0,class:"figure"},kc=["src","alt"],Ec={key:1,id:"main-title",class:"title"},Cc={key:2,class:"tagline"},Tc=ie({__name:"HomeHero",setup(e){const{site:t,frontmatter:n}=ye(),s=W(()=>{const{heroImage:i,heroText:l,tagline:c,actionLink:f,actionText:h}=n.value;return i||l||c||f&&h}),r=W(()=>n.value.heroText||t.value.title),o=W(()=>n.value.tagline||t.value.description);return(i,l)=>k(s)?(P(),N("header",wc,[k(n).heroImage?(P(),N("figure",$c,[j("img",{class:"image",src:k(Lt)(k(n).heroImage),alt:k(n).heroAlt},null,8,kc)])):Z("",!0),k(r)?(P(),N("h1",Ec,we(k(r)),1)):Z("",!0),k(o)?(P(),N("p",Cc,we(k(o)),1)):Z("",!0),k(n).actionLink&&k(n).actionText?(P(),me(vn,{key:3,item:{link:k(n).actionLink,text:k(n).actionText},class:"action"},null,8,["item"])):Z("",!0),k(n).altActionLink&&k(n).altActionText?(P(),me(vn,{key:4,item:{link:k(n).altActionLink,text:k(n).altActionText},class:"action alt"},null,8,["item"])):Z("",!0)])):Z("",!0)}});var Lc=ae(Tc,[["__scopeId","data-v-562a0580"]]);const Ac={key:0,class:"home-features"},Pc={class:"wrapper"},Ic={class:"container"},Oc={class:"features"},Rc={key:0,class:"title"},Mc={key:1,class:"details"},Sc=ie({__name:"HomeFeatures",setup(e){const{frontmatter:t}=ye(),n=W(()=>t.value.features&&t.value.features.length>0),s=W(()=>t.value.features?t.value.features:[]);return(r,o)=>k(n)?(P(),N("div",Ac,[j("div",Pc,[j("div",Ic,[j("div",Oc,[(P(!0),N(_e,null,Pn(k(s),(i,l)=>(P(),N("section",{key:l,class:"feature"},[i.title?(P(),N("h2",Rc,we(i.title),1)):Z("",!0),i.details?(P(),N("p",Mc,we(i.details),1)):Z("",!0)]))),128))])])])])):Z("",!0)}});var Fc=ae(Sc,[["__scopeId","data-v-6ab60ae0"]]);const Hc={key:0,class:"footer"},Nc={class:"container"},jc={class:"text"},Bc=ie({__name:"HomeFooter",setup(e){const{frontmatter:t}=ye();return(n,s)=>k(t).footer?(P(),N("footer",Hc,[j("div",Nc,[j("p",jc,we(k(t).footer),1)])])):Z("",!0)}});var Uc=ae(Bc,[["__scopeId","data-v-f7637290"]]);const Dc={class:"home","aria-labelledby":"main-title"},Kc={class:"home-content"},Wc=ie({__name:"Home",setup(e){return(t,n)=>{const s=hn("Content");return P(),N("main",Dc,[H(Lc),fe(t.$slots,"hero",{},void 0,!0),H(Fc),j("div",Kc,[H(s)]),fe(t.$slots,"features",{},void 0,!0),H(Uc),fe(t.$slots,"footer",{},void 0,!0)])}}});var qc=ae(Wc,[["__scopeId","data-v-782aae37"]]);const zc=["href","aria-label"],Vc=["src"],Jc=ie({__name:"NavBarTitle",setup(e){const{site:t,theme:n,localePath:s}=ye();return(r,o)=>(P(),N("a",{class:"nav-bar-title",href:k(s),"aria-label":`${k(t).title}, back to home`},[k(n).logo?(P(),N("img",{key:0,class:"logo",src:k(Lt)(k(n).logo),alt:"Logo"},null,8,Vc)):Z("",!0),Jt(" "+we(k(t).title),1)],8,zc))}});var Yc=ae(Jc,[["__scopeId","data-v-b3da5816"]]);function Xc(){const{site:e,localePath:t,theme:n}=ye();return W(()=>{const s=e.value.langs,r=Object.keys(s);if(r.length<2)return null;const i=tt().path.replace(t.value,""),l=r.map(f=>({text:s[f].label,link:`${f}${i}`}));return{text:n.value.selectText||"Languages",items:l}})}const Zc=["GitHub","GitLab","Bitbucket"].map(e=>[e,new RegExp(e,"i")]);function Qc(){const{site:e}=ye();return W(()=>{const t=e.value.themeConfig,n=t.docsRepo||t.repo;if(!n)return null;const s=Gc(n);return{text:ea(s,t.repoLabel),link:s}})}function Gc(e){return ao.test(e)?e:`https://github.com/${e}`}function ea(e,t){if(t)return t;const n=e.match(/^https?:\/\/[^/]+/);if(!n)return"Source";const s=Zc.find(([r,o])=>o.test(n[0]));return s&&s[0]?s[0]:"Source"}const ta=e=>(Dr("data-v-34231d90"),e=e(),Kr(),e),na={class:"nav-dropdown-link-item"},sa=ta(()=>j("span",{class:"arrow"},null,-1)),ra={class:"text"},oa={class:"icon"},ia=ie({__name:"NavDropdownLinkItem",props:{item:null},setup(e){const n=Sr(e),{props:s,isExternal:r}=mo(n.item);return(o,i)=>(P(),N("div",na,[j("a",bs({class:"item"},k(s)),[sa,j("span",ra,we(e.item.text),1),j("span",oa,[k(r)?(P(),me(ks,{key:0})):Z("",!0)])],16)]))}});var la=ae(ia,[["__scopeId","data-v-34231d90"]]);const ca=["aria-label"],aa={class:"button-text"},ua={class:"dialog"},fa=ie({__name:"NavDropdownLink",props:{item:null},setup(e){const t=tt(),n=at(!1);ut(()=>t.path,()=>{n.value=!1});function s(){n.value=!n.value}return(r,o)=>(P(),N("div",{class:dt(["nav-dropdown-link",{open:n.value}])},[j("button",{class:"button","aria-label":e.item.ariaLabel,onClick:s},[j("span",aa,we(e.item.text),1),j("span",{class:dt(["button-arrow",n.value?"down":"right"])},null,2)],8,ca),j("ul",ua,[(P(!0),N(_e,null,Pn(e.item.items,i=>(P(),N("li",{key:i.text,class:"dialog-item"},[H(la,{item:i},null,8,["item"])]))),128))])],2))}});var ar=ae(fa,[["__scopeId","data-v-64b865bf"]]);const da={key:0,class:"nav-links"},ha={key:1,class:"item"},pa={key:2,class:"item"},_a=ie({__name:"NavLinks",setup(e){const{theme:t}=ye(),n=Xc(),s=Qc(),r=W(()=>t.value.nav||s.value||n.value);return(o,i)=>k(r)?(P(),N("nav",da,[k(t).nav?(P(!0),N(_e,{key:0},Pn(k(t).nav,l=>(P(),N("div",{key:l.text,class:"item"},[l.items?(P(),me(ar,{key:0,item:l},null,8,["item"])):(P(),me(vn,{key:1,item:l},null,8,["item"]))]))),128)):Z("",!0),k(n)?(P(),N("div",ha,[H(ar,{item:k(n)},null,8,["item"])])):Z("",!0),k(s)?(P(),N("div",pa,[H(vn,{item:k(s)},null,8,["item"])])):Z("",!0)])):Z("",!0)}});var vo=ae(_a,[["__scopeId","data-v-0fce24fe"]]);const ga={emits:["toggle"]},ma=j("svg",{class:"icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"},[j("path",{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z",class:""})],-1),va=[ma];function ba(e,t,n,s,r,o){return P(),N("div",{class:"sidebar-button",onClick:t[0]||(t[0]=i=>e.$emit("toggle"))},va)}var ya=ae(ga,[["render",ba]]);const xa=e=>(Dr("data-v-2ba227d5"),e=e(),Kr(),e),wa={class:"nav-bar"},$a=xa(()=>j("div",{class:"flex-grow"},null,-1)),ka={class:"nav"},Ea=ie({__name:"NavBar",emits:["toggle"],setup(e){return(t,n)=>(P(),N("header",wa,[H(ya,{onToggle:n[0]||(n[0]=s=>t.$emit("toggle"))}),H(Yc),$a,j("div",ka,[H(vo)]),fe(t.$slots,"search",{},void 0,!0)]))}});var Ca=ae(Ea,[["__scopeId","data-v-2ba227d5"]]);function Ta(){let e=null,t=null;const n=Oa(s,300);function s(){const i=La(),l=Aa(i);for(let c=0;c ul > li");l&&l!==t.parentElement?(e=l.querySelector("a"),e&&e.classList.add("active")):e=null}function o(i){i&&i.classList.remove("active")}Ot(()=>{s(),window.addEventListener("scroll",n)}),Jr(()=>{r(decodeURIComponent(location.hash))}),An(()=>{window.removeEventListener("scroll",n)})}function La(){return[].slice.call(document.querySelectorAll(".sidebar a.sidebar-link-item"))}function Aa(e){return[].slice.call(document.querySelectorAll(".header-anchor")).filter(t=>e.some(n=>n.hash===t.hash))}function Pa(){return document.querySelector(".nav-bar").offsetHeight}function ur(e){const t=Pa();return e.parentElement.offsetTop-t-15}function Ia(e,t,n){const s=window.scrollY;return e===0&&s===0?[!0,null]:s{n&&clearTimeout(n),s?n=setTimeout(e,t):(e(),s=!0,setTimeout(()=>{s=!1},t))}}function Ra(){const e=tt(),{site:t}=ye();return Ta(),W(()=>{const n=e.data.headers,s=e.data.frontmatter.sidebar,r=e.data.frontmatter.sidebarDepth;if(s===!1)return[];if(s==="auto")return fr(n,r);const o=$s(t.value.themeConfig.sidebar,e.data.relativePath);return o===!1?[]:o==="auto"?fr(n,r):o})}function fr(e,t){const n=[];if(e===void 0)return[];let s;return e.forEach(({level:r,title:o,slug:i})=>{if(r-1>t)return;const l={text:o,link:`#${i}`};r===2?(s=l,n.push(l)):s&&(s.children||(s.children=[])).push(l)}),n}const bo=e=>{const t=tt(),{site:n,frontmatter:s}=ye(),r=e.depth||1,o=s.value.sidebarDepth||1/0,i=t.data.headers,l=e.item.text,c=Ma(n.value.base,e.item.link),f=e.item.children,h=ac(t,e.item.link),p=r0?ht("ul",{class:"sidebar-links"},t.map(r=>ht(bo,{item:r,depth:s}))):e&&n?yo(!1,Sa(n),void 0,s):null}function Sa(e){return xo(Fa(e))}function Fa(e){e=e.map(n=>Object.assign({},n));let t;return e.forEach(n=>{n.level===2?t=n:t&&(t.children||(t.children=[])).push(n)}),e.filter(n=>n.level===2)}function xo(e){return e.map(t=>({text:t.title,link:`#${t.slug}`,children:t.children?xo(t.children):void 0}))}const Ha={key:0,class:"sidebar-links"},Na=ie({__name:"SideBarLinks",setup(e){const t=Ra();return(n,s)=>k(t).length>0?(P(),N("ul",Ha,[(P(!0),N(_e,null,Pn(k(t),r=>(P(),me(k(bo),{item:r},null,8,["item"]))),256))])):Z("",!0)}});const ja=ie({__name:"SideBar",props:{open:{type:Boolean}},setup(e){return(t,n)=>(P(),N("aside",{class:dt(["sidebar",{open:e.open}])},[H(vo,{class:"nav"}),fe(t.$slots,"sidebar-top",{},void 0,!0),H(Na),fe(t.$slots,"sidebar-bottom",{},void 0,!0)],2))}});var Ba=ae(ja,[["__scopeId","data-v-79af364c"]]);const Ua=/bitbucket.org/;function Da(){const{page:e,theme:t,frontmatter:n}=ye(),s=W(()=>{const{repo:o,docsDir:i="",docsBranch:l="master",docsRepo:c=o,editLinks:f}=t.value,h=n.value.editLink!=null?n.value.editLink:f,{relativePath:p}=e.value;return!h||!p||!o?null:Ka(o,c,i,l,p)}),r=W(()=>t.value.editLinkText||"Edit this page");return{url:s,text:r}}function Ka(e,t,n,s,r){return Ua.test(e)?qa(e,t,n,s,r):Wa(e,t,n,s,r)}function Wa(e,t,n,s,r){return(ws(t)?t:`https://github.com/${t}`).replace(mn,"")+`/edit/${s}/`+(n?n.replace(mn,"")+"/":"")+r}function qa(e,t,n,s,r){return(ws(t)?t:e).replace(mn,"")+`/src/${s}/`+(n?n.replace(mn,"")+"/":"")+r+`?mode=edit&spa=0&at=${s}&fileviewer=file-view-default`}const za={class:"edit-link"},Va=["href"],Ja=ie({__name:"EditLink",setup(e){const{url:t,text:n}=Da();return(s,r)=>(P(),N("div",za,[k(t)?(P(),N("a",{key:0,class:"link",href:k(t),target:"_blank",rel:"noopener noreferrer"},[Jt(we(k(n))+" ",1),H(ks,{class:"icon"})],8,Va)):Z("",!0)]))}});var Ya=ae(Ja,[["__scopeId","data-v-40c300d5"]]);const Xa={key:0,class:"last-updated"},Za={class:"prefix"},Qa={class:"datetime"},Ga=ie({__name:"LastUpdated",setup(e){const{theme:t,page:n}=ye(),s=W(()=>{const i=t.value.lastUpdated;return i!==void 0&&i!==!1&&n.value.lastUpdated!==0}),r=W(()=>{const i=t.value.lastUpdated;return i===!0?"Last Updated":i}),o=at("");return Ot(()=>{qr(()=>{o.value=new Date(n.value.lastUpdated).toLocaleString("en-US")})}),(i,l)=>k(s)?(P(),N("p",Xa,[j("span",Za,we(k(r))+":",1),j("span",Qa,we(o.value),1)])):Z("",!0)}});var eu=ae(Ga,[["__scopeId","data-v-19e5f167"]]);const tu={class:"page-footer"},nu={class:"edit"},su={class:"updated"},ru=ie({__name:"PageFooter",setup(e){const{page:t}=ye();return(n,s)=>(P(),N("footer",tu,[j("div",nu,[H(Ya)]),j("div",su,[k(t).lastUpdated?(P(),me(eu,{key:0})):Z("",!0)])]))}});var ou=ae(ru,[["__scopeId","data-v-504b1bfc"]]);function iu(){const{page:e,theme:t}=ye(),n=W(()=>_o(Gn(e.value.relativePath))),s=W(()=>{const c=$s(t.value.sidebar,n.value);return xs(c)?go(c):[]}),r=W(()=>s.value.findIndex(c=>c.link===n.value)),o=W(()=>{if(t.value.nextLinks!==!1&&r.value>-1&&r.value{if(t.value.prevLinks!==!1&&r.value>0)return s.value[r.value-1]}),l=W(()=>!!o.value||!!i.value);return{next:o,prev:i,hasLinks:l}}const lu={},cu={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},au=j("path",{d:"M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"},null,-1),uu=[au];function fu(e,t){return P(),N("svg",cu,uu)}var du=ae(lu,[["render",fu]]);const hu={},pu={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},_u=j("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),gu=[_u];function mu(e,t){return P(),N("svg",pu,gu)}var vu=ae(hu,[["render",mu]]);const bu={key:0,class:"next-and-prev-link"},yu={class:"container"},xu={class:"prev"},wu=["href"],$u={class:"text"},ku={class:"next"},Eu=["href"],Cu={class:"text"},Tu=ie({__name:"NextAndPrevLinks",setup(e){const{hasLinks:t,prev:n,next:s}=iu();return(r,o)=>k(t)?(P(),N("div",bu,[j("div",yu,[j("div",xu,[k(n)?(P(),N("a",{key:0,class:"link",href:k(Lt)(k(n).link)},[H(du,{class:"icon icon-prev"}),j("span",$u,we(k(n).text),1)],8,wu)):Z("",!0)]),j("div",ku,[k(s)?(P(),N("a",{key:0,class:"link",href:k(Lt)(k(s).link)},[j("span",Cu,we(k(s).text),1),H(vu,{class:"icon icon-next"})],8,Eu)):Z("",!0)])])])):Z("",!0)}});var Lu=ae(Tu,[["__scopeId","data-v-0f10f042"]]);const Au={class:"page"},Pu={class:"container"},Iu=ie({__name:"Page",setup(e){return(t,n)=>{const s=hn("Content");return P(),N("main",Au,[j("div",Pu,[fe(t.$slots,"top",{},void 0,!0),H(s,{class:"content"}),H(ou),H(Lu),fe(t.$slots,"bottom",{},void 0,!0)])])}}});var Ou=ae(Iu,[["__scopeId","data-v-30e7de44"]]);const Ru={key:0,id:"ads-container"},Mu=ie({__name:"Layout",setup(e){const t=()=>null,n=t,s=t,r=Oi(()=>import("./chunks/AlgoliaSearchBox.de00b314.js")),o=tt(),{site:i,page:l,theme:c,frontmatter:f}=ye(),h=W(()=>!!f.value.customLayout),p=W(()=>!!f.value.home),b=W(()=>Object.keys(i.value.langs).length>1),C=W(()=>{const $=c.value;return f.value.navbar===!1||$.navbar===!1?!1:i.value.title||$.logo||$.repo||$.nav}),L=at(!1),R=W(()=>f.value.home||f.value.sidebar===!1?!1:!hc($s(c.value.sidebar,o.data.relativePath))),z=$=>{L.value=typeof $=="boolean"?$:!L.value},v=z.bind(null,!1);ut(o,v);const x=W(()=>[{"no-navbar":!C.value,"sidebar-open":L.value,"no-sidebar":!R.value}]);return($,U)=>{const J=hn("Content"),te=hn("Debug");return P(),N(_e,null,[j("div",{class:dt(["theme",k(x)])},[k(C)?(P(),me(Ca,{key:0,onToggle:z},{search:We(()=>[fe($.$slots,"navbar-search",{},()=>[k(c).algolia?(P(),me(k(r),{key:0,options:k(c).algolia,multilang:k(b)},null,8,["options","multilang"])):Z("",!0)])]),_:3})):Z("",!0),H(Ba,{open:L.value},{"sidebar-top":We(()=>[fe($.$slots,"sidebar-top")]),"sidebar-bottom":We(()=>[fe($.$slots,"sidebar-bottom")]),_:3},8,["open"]),j("div",{class:"sidebar-mask",onClick:U[0]||(U[0]=Y=>z(!1))}),k(h)?(P(),me(J,{key:1})):k(p)?fe($.$slots,"home",{key:2},()=>[H(qc,null,{hero:We(()=>[fe($.$slots,"home-hero")]),features:We(()=>[fe($.$slots,"home-features")]),footer:We(()=>[fe($.$slots,"home-footer")]),_:3})]):(P(),me(Ou,{key:3},{top:We(()=>[fe($.$slots,"page-top-ads",{},()=>[k(c).carbonAds&&k(c).carbonAds.carbon?(P(),N("div",Ru,[(P(),me(k(n),{key:"carbon"+k(l).relativePath,code:k(c).carbonAds.carbon,placement:k(c).carbonAds.placement},null,8,["code","placement"]))])):Z("",!0)]),fe($.$slots,"page-top")]),bottom:We(()=>[fe($.$slots,"page-bottom"),fe($.$slots,"page-bottom-ads",{},()=>[k(c).carbonAds&&k(c).carbonAds.custom?(P(),me(k(s),{key:"custom"+k(l).relativePath,code:k(c).carbonAds.custom,placement:k(c).carbonAds.placement},null,8,["code","placement"])):Z("",!0)])]),_:3}))],2),H(te)],64)}}}),Su={class:"theme"},Fu=j("h1",null,"404",-1),Hu=["href"],Nu=ie({__name:"NotFound",setup(e){const{site:t}=ye(),n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];function s(){return n[Math.floor(Math.random()*n.length)]}return(r,o)=>(P(),N("div",Su,[Fu,j("blockquote",null,we(s()),1),j("a",{href:k(t).base,"aria-label":"go to home"},"Take me home.",8,Hu)]))}}),bn={Layout:Mu,NotFound:Nu},Dn=new Set,wo=()=>document.createElement("link"),ju=e=>{const t=wo();t.rel="prefetch",t.href=e,document.head.appendChild(t)},Bu=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let ln;const Uu=Le&&(ln=wo())&&ln.relList&&ln.relList.supports&&ln.relList.supports("prefetch")?ju:Bu;function Du(){if(!Le||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(o=>{o.forEach(i=>{if(i.isIntersecting){const l=i.target;n.unobserve(l);const{pathname:c}=l;if(!Dn.has(c)){Dn.add(c);const f=fo(c);Uu(f)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(o=>{const{target:i,hostname:l,pathname:c}=o,f=c.match(/\.\w+$/);f&&f[0]!==".html"||i!=="_blank"&&l===location.hostname&&(c!==location.pathname?n.observe(o):Dn.add(c))})})};Ot(s);const r=tt();ut(()=>r.path,s),An(()=>{n&&n.disconnect()})}const Ku=ie({setup(e,{slots:t}){const n=at(!1);return Ot(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}}),Wu=bn.NotFound||(()=>"404 Not Found"),qu={name:"VitePressApp",setup(){const{site:e}=ye();return Ot(()=>{ut(()=>e.value.lang,t=>{document.documentElement.lang=t},{immediate:!0})}),Du(),()=>ht(bn.Layout)}};function zu(){const e=Ju(),t=Vu();t.provide(ho,e);const n=Zl(e.route);return t.provide(uo,n),Le&&nc(e.route,n.site),t.component("Content",oc),t.component("ClientOnly",Ku),t.component("Debug",()=>null),Object.defineProperty(t.config.globalProperties,"$frontmatter",{get(){return n.frontmatter.value}}),bn.enhanceApp&&bn.enhanceApp({app:t,router:e,siteData:Yt}),{app:t,router:e}}function Vu(){return Kl(qu)}function Ju(){let e=Le,t;return ec(n=>{let s=fo(n);return e&&(t=s),(e||t===s)&&(s=s.replace(/\.js$/,".lean.js")),Le?(e=!1,import(s)):require(s)},Wu)}if(Le){const{app:e,router:t}=zu();t.go().then(()=>{e.mount("#app")})}export{ae as _,Yu as a,tc as b,N as c,zu as createApp,ie as d,Ot as e,ye as f,Xu as g,P as o,tt as u,ut as w}; diff --git a/assets/chunks/AlgoliaSearchBox.de00b314.js b/assets/chunks/AlgoliaSearchBox.de00b314.js new file mode 100644 index 00000000..d9e533c1 --- /dev/null +++ b/assets/chunks/AlgoliaSearchBox.de00b314.js @@ -0,0 +1,13 @@ +import{d as Sr,u as Er,b as wr,w as Ct,e as jr,f as Pr,o as Ir,c as kr,g as Cr}from"../app.494b20fe.js";/*! @docsearch/js 3.0.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */function Dt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function P(e){for(var t=1;t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Fe(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol!="undefined"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var a,i,u=[],s=!0,l=!1;try{for(o=o.call(n);!(s=(a=o.next()).done)&&(u.push(a.value),!r||u.length!==r);s=!0);}catch(c){l=!0,i=c}finally{try{s||o.return==null||o.return()}finally{if(l)throw i}}return u}}(e,t)||qn(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function Be(e){return function(t){if(Array.isArray(t))return lt(t)}(e)||function(t){if(typeof Symbol!="undefined"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}(e)||qn(e)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function qn(e,t){if(e){if(typeof e=="string")return lt(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return n==="Object"&&e.constructor&&(n=e.constructor.name),n==="Map"||n==="Set"?Array.from(e):n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?lt(e,t):void 0}}function lt(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n3)for(n=[n],a=3;a0?ge(p.type,p.props,p.key,null,p.__v):p)!=null){if(p.__=n,p.__b=n.__b+1,(m=y[c])===null||m&&p.key==m.key&&p.type===m.type)y[c]=void 0;else for(d=0;d3)for(n=[n],a=3;a=n.__.length&&n.__.push({}),n.__[e]}function Ft(e,t,n){var r=we(ce++,2);return r.t=e,r.__c||(r.__=[n?n(t):Qn(void 0,t),function(o){var a=r.t(r.__[0],o);r.__[0]!==a&&(r.__=[a,r.__[1]],r.__c.setState({}))}],r.__c=L),r.__}function Bt(e,t){var n=we(ce++,4);!E.__s&&Et(n.__H,t)&&(n.__=e,n.__H=t,L.__h.push(n))}function Le(e,t){var n=we(ce++,7);return Et(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Lr(){ft.forEach(function(e){if(e.__P)try{e.__H.__h.forEach(qe),e.__H.__h.forEach(pt),e.__H.__h=[]}catch(t){e.__H.__h=[],E.__e(t,e.__v)}}),ft=[]}E.__b=function(e){L=null,Lt&&Lt(e)},E.__r=function(e){qt&&qt(e),ce=0;var t=(L=e.__c).__H;t&&(t.__h.forEach(qe),t.__h.forEach(pt),t.__h=[])},E.diffed=function(e){Mt&&Mt(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(ft.push(t)!==1&&Tt===E.requestAnimationFrame||((Tt=E.requestAnimationFrame)||function(n){var r,o=function(){clearTimeout(a),Vt&&cancelAnimationFrame(r),setTimeout(n)},a=setTimeout(o,100);Vt&&(r=requestAnimationFrame(o))})(Lr)),L=void 0},E.__c=function(e,t){t.some(function(n){try{n.__h.forEach(qe),n.__h=n.__h.filter(function(r){return!r.__||pt(r)})}catch(r){t.some(function(o){o.__h&&(o.__h=[])}),t=[],E.__e(r,n.__v)}}),Ht&&Ht(e,t)},E.unmount=function(e){Ut&&Ut(e);var t=e.__c;if(t&&t.__H)try{t.__H.__.forEach(qe)}catch(n){E.__e(n,t.__v)}};var Vt=typeof requestAnimationFrame=="function";function qe(e){var t=L;typeof e.__c=="function"&&e.__c(),L=t}function pt(e){var t=L;e.__c=e.__(),L=t}function Et(e,t){return!e||e.length!==t.length||t.some(function(n,r){return n!==e[r]})}function Qn(e,t){return typeof t=="function"?t(e):t}function Yn(e,t){for(var n in t)e[n]=t[n];return e}function mt(e,t){for(var n in e)if(n!=="__source"&&!(n in t))return!0;for(var r in t)if(r!=="__source"&&e[r]!==t[r])return!0;return!1}function dt(e){this.props=e}(dt.prototype=new B).isPureReactComponent=!0,dt.prototype.shouldComponentUpdate=function(e,t){return mt(this.props,e)||mt(this.state,t)};var zt=E.__b;E.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),zt&&zt(e)};var qr=typeof Symbol!="undefined"&&Symbol.for&&Symbol.for("react.forward_ref")||3911,Kt=function(e,t){return e==null?null:K(K(e).map(t))},Mr={map:Kt,forEach:Kt,count:function(e){return e?K(e).length:0},only:function(e){var t=K(e);if(t.length!==1)throw"Children.only";return t[0]},toArray:K},Hr=E.__e;function Me(){this.__u=0,this.t=null,this.__b=null}function Gn(e){var t=e.__.__c;return t&&t.__e&&t.__e(e)}function ve(){this.u=null,this.o=null}E.__e=function(e,t,n){if(e.then){for(var r,o=t;o=o.__;)if((r=o.__c)&&r.__c)return t.__e==null&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t)}Hr(e,t,n)},(Me.prototype=new B).__c=function(e,t){var n=t.__c,r=this;r.t==null&&(r.t=[]),r.t.push(n);var o=Gn(r.__v),a=!1,i=function(){a||(a=!0,n.componentWillUnmount=n.__c,o?o(u):u())};n.__c=n.componentWillUnmount,n.componentWillUnmount=function(){i(),n.__c&&n.__c()};var u=function(){if(!--r.__u){if(r.state.__e){var l=r.state.__e;r.__v.__k[0]=function d(m,p,v){return m&&(m.__v=null,m.__k=m.__k&&m.__k.map(function(h){return d(h,p,v)}),m.__c&&m.__c.__P===p&&(m.__e&&v.insertBefore(m.__e,m.__d),m.__c.__e=!0,m.__c.__P=v)),m}(l,l.__c.__P,l.__c.__O)}var c;for(r.setState({__e:r.__b=null});c=r.t.pop();)c.forceUpdate()}},s=t.__h===!0;r.__u++||s||r.setState({__e:r.__b=r.__v.__k[0]}),e.then(i,i)},Me.prototype.componentWillUnmount=function(){this.t=[]},Me.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function a(i,u,s){return i&&(i.__c&&i.__c.__H&&(i.__c.__H.__.forEach(function(l){typeof l.__c=="function"&&l.__c()}),i.__c.__H=null),(i=Yn({},i)).__c!=null&&(i.__c.__P===s&&(i.__c.__P=u),i.__c=null),i.__k=i.__k&&i.__k.map(function(l){return a(l,u,s)})),i}(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__e&&F(Q,null,e.fallback);return o&&(o.__h=null),[F(Q,null,t.__e?null:e.children),o]};var Wt=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&(e.props.revealOrder[0]!=="t"||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]>>1,1),t.i.removeChild(r)}}),Ee(F(Ur,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function Zn(e,t){return F(Fr,{__v:e,i:t})}(ve.prototype=new B).__e=function(e){var t=this,n=Gn(t.__v),r=t.o.get(e);return r[0]++,function(o){var a=function(){t.props.revealOrder?(r.push(o),Wt(t,e,r)):o()};n?n(a):a()}},ve.prototype.render=function(e){this.u=null,this.o=new Map;var t=K(e.children);e.revealOrder&&e.revealOrder[0]==="b"&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},ve.prototype.componentDidUpdate=ve.prototype.componentDidMount=function(){var e=this;this.o.forEach(function(t,n){Wt(e,n,t)})};var Xn=typeof Symbol!="undefined"&&Symbol.for&&Symbol.for("react.element")||60103,Br=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Vr=function(e){return(typeof Symbol!="undefined"&&Oe(Symbol())=="symbol"?/fil|che|rad/i:/fil|che|ra/i).test(e)};function er(e,t,n){return t.__k==null&&(t.textContent=""),Ee(e,t),typeof n=="function"&&n(),e?e.__c:null}B.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(B.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})});var Jt=E.event;function zr(){}function Kr(){return this.cancelBubble}function Wr(){return this.defaultPrevented}E.event=function(e){return Jt&&(e=Jt(e)),e.persist=zr,e.isPropagationStopped=Kr,e.isDefaultPrevented=Wr,e.nativeEvent=e};var tr,$t={configurable:!0,get:function(){return this.class}},Qt=E.vnode;E.vnode=function(e){var t=e.type,n=e.props,r=n;if(typeof t=="string"){for(var o in r={},n){var a=n[o];o==="value"&&"defaultValue"in n&&a==null||(o==="defaultValue"&&"value"in n&&n.value==null?o="value":o==="download"&&a===!0?a="":/ondoubleclick/i.test(o)?o="ondblclick":/^onchange(textarea|input)/i.test(o+t)&&!Vr(n.type)?o="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(o)?o=o.toLowerCase():Br.test(o)?o=o.replace(/[A-Z0-9]/,"-$&").toLowerCase():a===null&&(a=void 0),r[o]=a)}t=="select"&&r.multiple&&Array.isArray(r.value)&&(r.value=K(n.children).forEach(function(i){i.props.selected=r.value.indexOf(i.props.value)!=-1})),t=="select"&&r.defaultValue!=null&&(r.value=K(n.children).forEach(function(i){i.props.selected=r.multiple?r.defaultValue.indexOf(i.props.value)!=-1:r.defaultValue==i.props.value})),e.props=r}t&&n.class!=n.className&&($t.enumerable="className"in n,n.className!=null&&(r.class=n.className),Object.defineProperty(r,"className",$t)),e.$$typeof=Xn,Qt&&Qt(e)};var Yt=E.__r;E.__r=function(e){Yt&&Yt(e),tr=e.__c};var Jr={ReactCurrentDispatcher:{current:{readContext:function(e){return tr.__n[e.__c].props.value}}}};(typeof performance=="undefined"?"undefined":Oe(performance))=="object"&&typeof performance.now=="function"&&performance.now.bind(performance);function Gt(e){return!!e&&e.$$typeof===Xn}var f={useState:function(e){return oe=1,Ft(Qn,e)},useReducer:Ft,useEffect:function(e,t){var n=we(ce++,3);!E.__s&&Et(n.__H,t)&&(n.__=e,n.__H=t,L.__H.__h.push(n))},useLayoutEffect:Bt,useRef:function(e){return oe=5,Le(function(){return{current:e}},[])},useImperativeHandle:function(e,t,n){oe=6,Bt(function(){typeof e=="function"?e(t()):e&&(e.current=t())},n==null?n:n.concat(e))},useMemo:Le,useCallback:function(e,t){return oe=8,Le(function(){return e},t)},useContext:function(e){var t=L.context[e.__c],n=we(ce++,9);return n.__c=e,t?(n.__==null&&(n.__=!0,t.sub(L)),t.props.value):e.__},useDebugValue:function(e,t){E.useDebugValue&&E.useDebugValue(t?t(e):e)},version:"16.8.0",Children:Mr,render:er,hydrate:function(e,t,n){return $n(e,t),typeof n=="function"&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(Ee(null,e),!0)},createPortal:Zn,createElement:F,createContext:function(e,t){var n={__c:t="__cC"+Hn++,__:e,Consumer:function(r,o){return r.children(o)},Provider:function(r){var o,a;return this.getChildContext||(o=[],(a={})[t]=this,this.getChildContext=function(){return a},this.shouldComponentUpdate=function(i){this.props.value!==i.value&&o.some(st)},this.sub=function(i){o.push(i);var u=i.componentWillUnmount;i.componentWillUnmount=function(){o.splice(o.indexOf(i),1),u&&u.call(i)}}),r.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return F.bind(null,e)},cloneElement:function(e){return Gt(e)?Tr.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:Q,isValidElement:Gt,findDOMNode:function(e){return e&&(e.base||e.nodeType===1&&e)||null},Component:B,PureComponent:dt,memo:function(e,t){function n(o){var a=this.props.ref,i=a==o.ref;return!i&&a&&(a.call?a(null):a.current=null),t?!t(this.props,o)||!i:mt(this.props,o)}function r(o){return this.shouldComponentUpdate=n,F(e,o)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(n,r){var o=Yn({},n);return delete o.ref,e(o,(r=n.ref||r)&&(Oe(r)!="object"||"current"in r)?r:null)}return t.$$typeof=qr,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:Q,Suspense:Me,SuspenseList:ve,lazy:function(e){var t,n,r;function o(a){if(t||(t=e()).then(function(i){n=i.default||i},function(i){r=i}),r)throw r;if(!n)throw t;return F(n,a)}return o.displayName="Lazy",o.__f=!0,o},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Jr};function $r(){return f.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},f.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function nr(){return f.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},f.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}var Qr=["translations"];function ht(){return ht=Object.assign||function(e){for(var t=1;t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var Gr=f.forwardRef(function(e,t){var n=e.translations,r=n===void 0?{}:n,o=Yr(e,Qr),a=r.buttonText,i=a===void 0?"Search":a,u=r.buttonAriaLabel,s=u===void 0?"Search":u,l=Le(function(){return typeof navigator!="undefined"?/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"\u2318":"Ctrl":null},[]);return f.createElement("button",ht({type:"button",className:"DocSearch DocSearch-Button","aria-label":s},o,{ref:t}),f.createElement("span",{className:"DocSearch-Button-Container"},f.createElement(nr,null),f.createElement("span",{className:"DocSearch-Button-Placeholder"},i)),f.createElement("span",{className:"DocSearch-Button-Keys"},l!==null&&f.createElement(f.Fragment,null,f.createElement("span",{className:"DocSearch-Button-Key"},l==="Ctrl"?f.createElement($r,null):l),f.createElement("span",{className:"DocSearch-Button-Key"},"K"))))});function je(e){return e.reduce(function(t,n){return t.concat(n)},[])}var Zr=0;function vt(e){return e.collections.length===0?0:e.collections.reduce(function(t,n){return t+n.items.length},0)}var Xr=function(){},eo=[{segment:"autocomplete-core",version:"1.5.2"}];function He(e,t){var n=t;return{then:function(r,o){return He(e.then(Ce(r,n,e),Ce(o,n,e)),n)},catch:function(r){return He(e.catch(Ce(r,n,e)),n)},finally:function(r){return r&&n.onCancelList.push(r),He(e.finally(Ce(r&&function(){return n.onCancelList=[],r()},n,e)),n)},cancel:function(){n.isCanceled=!0;var r=n.onCancelList;n.onCancelList=[],r.forEach(function(o){o()})},isCanceled:function(){return n.isCanceled===!0}}}function Zt(e){return He(e,{isCanceled:!1,onCancelList:[]})}function Ce(e,t,n){return e?function(r){return t.isCanceled?r:e(r)}:n}function Xt(e,t,n,r){if(!n)return null;if(e<0&&(t===null||r!==null&&t===0))return n+e;var o=(t===null?-1:t)+e;return o<=-1||o>=n?r===null?null:0:o}function en(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function to(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function no(e,t){var n=[];return Promise.resolve(e(t)).then(function(r){return Promise.all(r.filter(function(o){return Boolean(o)}).map(function(o){if(o.sourceId,n.includes(o.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(o.sourceId)," is not unique."));n.push(o.sourceId);var a=function(i){for(var u=1;ue.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var sn,ot,Re,de=null,fn=(sn=-1,ot=-1,Re=void 0,function(e){var t=++sn;return Promise.resolve(e).then(function(n){return Re&&t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var Oo=["props","refresh","store"],So=["inputElement","formElement","panelElement"],Eo=["inputElement"],wo=["inputElement","maxLength"],jo=["item","source"];function mn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function T(e){for(var t=1;t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Io(e){var t=e.props,n=e.refresh,r=e.store,o=he(e,Oo);return{getEnvironmentProps:function(a){var i=a.inputElement,u=a.formElement,s=a.panelElement;return T({onTouchStart:function(l){!r.getState().isOpen&&r.pendingRequests.isEmpty()||l.target===i||[u,s].some(function(c){return d=c,m=l.target,d===m||d.contains(m);var d,m})===!1&&(r.dispatch("blur",null),t.debug||r.pendingRequests.cancelAll())},onTouchMove:function(l){r.getState().isOpen!==!1&&i===t.environment.document.activeElement&&l.target!==i&&i.blur()}},he(a,So))},getRootProps:function(a){return T({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-owns":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},a)},getFormProps:function(a){return a.inputElement,T({action:"",noValidate:!0,role:"search",onSubmit:function(i){var u;i.preventDefault(),t.onSubmit(T({event:i,refresh:n,state:r.getState()},o)),r.dispatch("submit",null),(u=a.inputElement)===null||u===void 0||u.blur()},onReset:function(i){var u;i.preventDefault(),t.onReset(T({event:i,refresh:n,state:r.getState()},o)),r.dispatch("reset",null),(u=a.inputElement)===null||u===void 0||u.focus()}},he(a,Eo))},getLabelProps:function(a){return T({htmlFor:"".concat(t.id,"-input"),id:"".concat(t.id,"-label")},a)},getInputProps:function(a){function i(p){(t.openOnFocus||Boolean(r.getState().query))&&re(T({event:p,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},o)),r.dispatch("focus",null)}var u="ontouchstart"in t.environment,s=a||{},l=(s.inputElement,s.maxLength),c=l===void 0?512:l,d=he(s,wo),m=ae(r.getState());return T({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&r.getState().activeItemId!==null?"".concat(t.id,"-item-").concat(r.getState().activeItemId):void 0,"aria-controls":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:r.getState().completion||r.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:m!=null&&m.itemUrl?"go":"search",spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:c,type:"search",onChange:function(p){re(T({event:p,props:t,query:p.currentTarget.value.slice(0,c),refresh:n,store:r},o))},onKeyDown:function(p){(function(v){var h=v.event,_=v.props,y=v.refresh,g=v.store,b=bo(v,yo);if(h.key==="ArrowUp"||h.key==="ArrowDown"){var O=function(){var R=_.environment.document.getElementById("".concat(_.id,"-item-").concat(g.getState().activeItemId));R&&(R.scrollIntoViewIfNeeded?R.scrollIntoViewIfNeeded(!1):R.scrollIntoView(!1))},S=function(){var R=ae(g.getState());if(g.getState().activeItemId!==null&&R){var Ge=R.item,Ze=R.itemInputValue,Pe=R.itemUrl,W=R.source;W.onActive(G({event:h,item:Ge,itemInputValue:Ze,itemUrl:Pe,refresh:y,source:W,state:g.getState()},b))}};h.preventDefault(),g.getState().isOpen===!1&&(_.openOnFocus||Boolean(g.getState().query))?re(G({event:h,props:_,query:g.getState().query,refresh:y,store:g},b)).then(function(){g.dispatch(h.key,{nextActiveItemId:_.defaultActiveItemId}),S(),setTimeout(O,0)}):(g.dispatch(h.key,{}),S(),O())}else if(h.key==="Escape")h.preventDefault(),g.dispatch(h.key,null),g.pendingRequests.cancelAll();else if(h.key==="Enter"){if(g.getState().activeItemId===null||g.getState().collections.every(function(R){return R.items.length===0}))return;h.preventDefault();var I=ae(g.getState()),D=I.item,A=I.itemInputValue,k=I.itemUrl,N=I.source;if(h.metaKey||h.ctrlKey)k!==void 0&&(N.onSelect(G({event:h,item:D,itemInputValue:A,itemUrl:k,refresh:y,source:N,state:g.getState()},b)),_.navigator.navigateNewTab({itemUrl:k,item:D,state:g.getState()}));else if(h.shiftKey)k!==void 0&&(N.onSelect(G({event:h,item:D,itemInputValue:A,itemUrl:k,refresh:y,source:N,state:g.getState()},b)),_.navigator.navigateNewWindow({itemUrl:k,item:D,state:g.getState()}));else if(!h.altKey){if(k!==void 0)return N.onSelect(G({event:h,item:D,itemInputValue:A,itemUrl:k,refresh:y,source:N,state:g.getState()},b)),void _.navigator.navigate({itemUrl:k,item:D,state:g.getState()});re(G({event:h,nextState:{isOpen:!1},props:_,query:A,refresh:y,store:g},b)).then(function(){N.onSelect(G({event:h,item:D,itemInputValue:A,itemUrl:k,refresh:y,source:N,state:g.getState()},b))})}}})(T({event:p,props:t,refresh:n,store:r},o))},onFocus:i,onBlur:function(){u||(r.dispatch("blur",null),t.debug||r.pendingRequests.cancelAll())},onClick:function(p){a.inputElement!==t.environment.document.activeElement||r.getState().isOpen||i(p)}},d)},getPanelProps:function(a){return T({onMouseDown:function(i){i.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},a)},getListProps:function(a){return T({role:"listbox","aria-labelledby":"".concat(t.id,"-label"),id:"".concat(t.id,"-list")},a)},getItemProps:function(a){var i=a.item,u=a.source,s=he(a,jo);return T({id:"".concat(t.id,"-item-").concat(i.__autocomplete_id),role:"option","aria-selected":r.getState().activeItemId===i.__autocomplete_id,onMouseMove:function(l){if(i.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",i.__autocomplete_id);var c=ae(r.getState());if(r.getState().activeItemId!==null&&c){var d=c.item,m=c.itemInputValue,p=c.itemUrl,v=c.source;v.onActive(T({event:l,item:d,itemInputValue:m,itemUrl:p,refresh:n,source:v,state:r.getState()},o))}}},onMouseDown:function(l){l.preventDefault()},onClick:function(l){var c=u.getItemInputValue({item:i,state:r.getState()}),d=u.getItemUrl({item:i,state:r.getState()});(d?Promise.resolve():re(T({event:l,nextState:{isOpen:!1},props:t,query:c,refresh:n,store:r},o))).then(function(){u.onSelect(T({event:l,item:i,itemInputValue:c,itemUrl:d,refresh:n,source:u,state:r.getState()},o))})}},s)}}}function dn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function ko(e){for(var t=1;t0},reshape:function(m){return m.sources}},u),{},{id:(l=u.id)!==null&&l!==void 0?l:"autocomplete-".concat(Zr++),plugins:d,initialState:te({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},u.initialState),onStateChange:function(m){var p;(p=u.onStateChange)===null||p===void 0||p.call(u,m),d.forEach(function(v){var h;return(h=v.onStateChange)===null||h===void 0?void 0:h.call(v,m)})},onSubmit:function(m){var p;(p=u.onSubmit)===null||p===void 0||p.call(u,m),d.forEach(function(v){var h;return(h=v.onSubmit)===null||h===void 0?void 0:h.call(v,m)})},onReset:function(m){var p;(p=u.onReset)===null||p===void 0||p.call(u,m),d.forEach(function(v){var h;return(h=v.onReset)===null||h===void 0?void 0:h.call(v,m)})},getSources:function(m){return Promise.all([].concat(co(d.map(function(p){return p.getSources})),[u.getSources]).filter(Boolean).map(function(p){return no(p,m)})).then(function(p){return je(p)}).then(function(p){return p.map(function(v){return te(te({},v),{},{onSelect:function(h){v.onSelect(h),s.forEach(function(_){var y;return(y=_.onSelect)===null||y===void 0?void 0:y.call(_,h)})},onActive:function(h){v.onActive(h),s.forEach(function(_){var y;return(y=_.onActive)===null||y===void 0?void 0:y.call(_,h)})}})})})},navigator:te({navigate:function(m){var p=m.itemUrl;c.location.assign(p)},navigateNewTab:function(m){var p=m.itemUrl,v=c.open(p,"_blank","noopener");v==null||v.focus()},navigateNewWindow:function(m){var p=m.itemUrl;c.open(p,"_blank","noopener")}},u.navigator)})}(e,t),r=ao(xo,n,function(u){var s=u.prevState,l=u.state;n.onStateChange(Z({prevState:s,state:l,refresh:i},o))}),o=function(u){var s=u.store;return{setActiveItemId:function(l){s.dispatch("setActiveItemId",l)},setQuery:function(l){s.dispatch("setQuery",l)},setCollections:function(l){var c=0,d=l.map(function(m){return xe(xe({},m),{},{items:je(m.items).map(function(p){return xe(xe({},p),{},{__autocomplete_id:c++})})})});s.dispatch("setCollections",d)},setIsOpen:function(l){s.dispatch("setIsOpen",l)},setStatus:function(l){s.dispatch("setStatus",l)},setContext:function(l){s.dispatch("setContext",l)}}}({store:r}),a=Io(Z({props:n,refresh:i,store:r},o));function i(){return re(Z({event:new Event("input"),nextState:{isOpen:r.getState().isOpen},props:n,query:r.getState().query,refresh:i,store:r},o))}return n.plugins.forEach(function(u){var s;return(s=u.subscribe)===null||s===void 0?void 0:s.call(u,Z(Z({},o),{},{refresh:i,onSelect:function(l){t.push({onSelect:l})},onActive:function(l){t.push({onActive:l})}}))}),function(u){var s,l=u.metadata,c=u.environment;if(!((s=c.navigator)===null||s===void 0)&&s.userAgent.includes("Algolia Crawler")){var d=c.document.createElement("meta"),m=c.document.querySelector("head");d.name="algolia:metadata",setTimeout(function(){d.content=JSON.stringify(l),m.appendChild(d)},0)}}({metadata:Co({plugins:n.plugins,options:e}),environment:n.environment}),Z(Z({refresh:i},a),o)}function Ro(e){var t=e.translations,n=(t===void 0?{}:t).searchByText,r=n===void 0?"Search by":n;return f.createElement("a",{href:"https://www.algolia.com/ref/docsearch/?utm_source=".concat(window.location.hostname,"&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch"),target:"_blank",rel:"noopener noreferrer"},f.createElement("span",{className:"DocSearch-Label"},r),f.createElement("svg",{width:"77",height:"19","aria-label":"Algolia",role:"img"},f.createElement("path",{d:"M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z",fill:"currentColor",fillRule:"evenodd"})))}function Te(e){return f.createElement("svg",{width:"15",height:"15","aria-label":e.ariaLabel,role:"img"},f.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.2"},e.children))}function To(e){var t=e.translations,n=t===void 0?{}:t,r=n.selectText,o=r===void 0?"to select":r,a=n.selectKeyAriaLabel,i=a===void 0?"Enter key":a,u=n.navigateText,s=u===void 0?"to navigate":u,l=n.navigateUpKeyAriaLabel,c=l===void 0?"Arrow up":l,d=n.navigateDownKeyAriaLabel,m=d===void 0?"Arrow down":d,p=n.closeText,v=p===void 0?"to close":p,h=n.closeKeyAriaLabel,_=h===void 0?"Escape key":h,y=n.searchByText,g=y===void 0?"Search by":y;return f.createElement(f.Fragment,null,f.createElement("div",{className:"DocSearch-Logo"},f.createElement(Ro,{translations:{searchByText:g}})),f.createElement("ul",{className:"DocSearch-Commands"},f.createElement("li",null,f.createElement("span",{className:"DocSearch-Commands-Key"},f.createElement(Te,{ariaLabel:i},f.createElement("path",{d:"M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"}))),f.createElement("span",{className:"DocSearch-Label"},o)),f.createElement("li",null,f.createElement("span",{className:"DocSearch-Commands-Key"},f.createElement(Te,{ariaLabel:m},f.createElement("path",{d:"M7.5 3.5v8M10.5 8.5l-3 3-3-3"}))),f.createElement("span",{className:"DocSearch-Commands-Key"},f.createElement(Te,{ariaLabel:c},f.createElement("path",{d:"M7.5 11.5v-8M10.5 6.5l-3-3-3 3"}))),f.createElement("span",{className:"DocSearch-Label"},s)),f.createElement("li",null,f.createElement("span",{className:"DocSearch-Commands-Key"},f.createElement(Te,{ariaLabel:_},f.createElement("path",{d:"M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"}))),f.createElement("span",{className:"DocSearch-Label"},v))))}function Lo(e){var t=e.hit,n=e.children;return f.createElement("a",{href:t.url},n)}function qo(){return f.createElement("svg",{viewBox:"0 0 38 38",stroke:"currentColor",strokeOpacity:".5"},f.createElement("g",{fill:"none",fillRule:"evenodd"},f.createElement("g",{transform:"translate(1 1)",strokeWidth:"2"},f.createElement("circle",{strokeOpacity:".3",cx:"18",cy:"18",r:"18"}),f.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},f.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})))))}function Mo(){return f.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},f.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},f.createElement("path",{d:"M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0"}),f.createElement("path",{d:"M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13"})))}function _t(){return f.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},f.createElement("path",{d:"M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Ho(){return f.createElement("svg",{className:"DocSearch-Hit-Select-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},f.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},f.createElement("path",{d:"M18 3v4c0 2-2 4-4 4H2"}),f.createElement("path",{d:"M8 17l-6-6 6-6"})))}var Uo=function(){return f.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},f.createElement("path",{d:"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))};function Fo(e){switch(e.type){case"lvl1":return f.createElement(Uo,null);case"content":return f.createElement(Vo,null);default:return f.createElement(Bo,null)}}function Bo(){return f.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},f.createElement("path",{d:"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Vo(){return f.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},f.createElement("path",{d:"M17 5H3h14zm0 5H3h14zm0 5H3h14z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function yn(){return f.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},f.createElement("path",{d:"M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function zo(){return f.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},f.createElement("path",{d:"M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"}))}function Ko(){return f.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},f.createElement("path",{d:"M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"}))}function Wo(e){var t=e.translations,n=t===void 0?{}:t,r=n.titleText,o=r===void 0?"Unable to fetch results":r,a=n.helpText,i=a===void 0?"You might want to check your network connection.":a;return f.createElement("div",{className:"DocSearch-ErrorScreen"},f.createElement("div",{className:"DocSearch-Screen-Icon"},f.createElement(zo,null)),f.createElement("p",{className:"DocSearch-Title"},o),f.createElement("p",{className:"DocSearch-Help"},i))}var Jo=["translations"];function $o(e){return function(t){if(Array.isArray(t))return at(t)}(e)||function(t){if(typeof Symbol!="undefined"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}(e)||function(t,n){if(!!t){if(typeof t=="string")return at(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return at(t,n)}}(e)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function at(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Yo(e){var t=e.translations,n=t===void 0?{}:t,r=Qo(e,Jo),o=n.noResultsText,a=o===void 0?"No results for":o,i=n.suggestedQueryText,u=i===void 0?"Try searching for":i,s=n.reportMissingResultsText,l=s===void 0?"Believe this query should return results?":s,c=n.reportMissingResultsLinkText,d=c===void 0?"Let us know.":c,m=r.state.context.searchSuggestions;return f.createElement("div",{className:"DocSearch-NoResults"},f.createElement("div",{className:"DocSearch-Screen-Icon"},f.createElement(Ko,null)),f.createElement("p",{className:"DocSearch-Title"},a,' "',f.createElement("strong",null,r.state.query),'"'),m&&m.length>0&&f.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},f.createElement("p",{className:"DocSearch-Help"},u,":"),f.createElement("ul",null,m.slice(0,3).reduce(function(p,v){return[].concat($o(p),[f.createElement("li",{key:v},f.createElement("button",{className:"DocSearch-Prefill",key:v,type:"button",onClick:function(){r.setQuery(v.toLowerCase()+" "),r.refresh(),r.inputRef.current.focus()}},v))])},[]))),r.getMissingResultsUrl&&f.createElement("p",{className:"DocSearch-Help"},"".concat(l," "),f.createElement("a",{href:r.getMissingResultsUrl({query:r.state.query}),target:"_blank",rel:"noopener noreferrer"},d)))}var Go=["hit","attribute","tagName"];function gn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function bn(e){for(var t=1;t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function On(e,t){return t.split(".").reduce(function(n,r){return n!=null&&n[r]?n[r]:null},e)}function ne(e){var t=e.hit,n=e.attribute,r=e.tagName;return F(r===void 0?"span":r,bn(bn({},Xo(e,Go)),{},{dangerouslySetInnerHTML:{__html:On(t,"_snippetResult.".concat(n,".value"))||On(t,n)}}))}function Sn(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol!="undefined"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var a,i,u=[],s=!0,l=!1;try{for(o=o.call(n);!(s=(a=o.next()).done)&&(u.push(a.value),!r||u.length!==r);s=!0);}catch(c){l=!0,i=c}finally{try{s||o.return==null||o.return()}finally{if(l)throw i}}return u}}(e,t)||function(n,r){if(!!n){if(typeof n=="string")return En(n,r);var o=Object.prototype.toString.call(n).slice(8,-1);if(o==="Object"&&n.constructor&&(o=n.constructor.name),o==="Map"||o==="Set")return Array.from(n);if(o==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return En(n,r)}}(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function En(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n|<\/mark>)/g,na=RegExp(ar.source);function ir(e){var t,n,r,o,a,i=e;if(!i.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var u=((i.__docsearch_parent?(t=i.__docsearch_parent)===null||t===void 0||(n=t._highlightResult)===null||n===void 0||(r=n.hierarchy)===null||r===void 0?void 0:r.lvl0:(o=e._highlightResult)===null||o===void 0||(a=o.hierarchy)===null||a===void 0?void 0:a.lvl0)||{}).value;return u&&na.test(u)?u.replace(ar,""):u}function gt(){return gt=Object.assign||function(e){for(var t=1;t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function ia(e){var t=e.translations,n=t===void 0?{}:t,r=aa(e,oa),o=n.recentSearchesTitle,a=o===void 0?"Recent":o,i=n.noRecentSearchesText,u=i===void 0?"No recent searches":i,s=n.saveRecentSearchButtonTitle,l=s===void 0?"Save this search":s,c=n.removeRecentSearchButtonTitle,d=c===void 0?"Remove this search from history":c,m=n.favoriteSearchesTitle,p=m===void 0?"Favorite":m,v=n.removeFavoriteSearchButtonTitle,h=v===void 0?"Remove this search from favorites":v;return r.state.status==="idle"&&r.hasCollections===!1?r.disableUserPersonalization?null:f.createElement("div",{className:"DocSearch-StartScreen"},f.createElement("p",{className:"DocSearch-Help"},u)):r.hasCollections===!1?null:f.createElement("div",{className:"DocSearch-Dropdown-Container"},f.createElement(yt,We({},r,{title:a,collection:r.state.collections[0],renderIcon:function(){return f.createElement("div",{className:"DocSearch-Hit-icon"},f.createElement(Mo,null))},renderAction:function(_){var y=_.item,g=_.runFavoriteTransition,b=_.runDeleteTransition;return f.createElement(f.Fragment,null,f.createElement("div",{className:"DocSearch-Hit-action"},f.createElement("button",{className:"DocSearch-Hit-action-button",title:l,type:"submit",onClick:function(O){O.preventDefault(),O.stopPropagation(),g(function(){r.favoriteSearches.add(y),r.recentSearches.remove(y),r.refresh()})}},f.createElement(yn,null))),f.createElement("div",{className:"DocSearch-Hit-action"},f.createElement("button",{className:"DocSearch-Hit-action-button",title:d,type:"submit",onClick:function(O){O.preventDefault(),O.stopPropagation(),b(function(){r.recentSearches.remove(y),r.refresh()})}},f.createElement(_t,null))))}})),f.createElement(yt,We({},r,{title:p,collection:r.state.collections[1],renderIcon:function(){return f.createElement("div",{className:"DocSearch-Hit-icon"},f.createElement(yn,null))},renderAction:function(_){var y=_.item,g=_.runDeleteTransition;return f.createElement("div",{className:"DocSearch-Hit-action"},f.createElement("button",{className:"DocSearch-Hit-action-button",title:h,type:"submit",onClick:function(b){b.preventDefault(),b.stopPropagation(),g(function(){r.favoriteSearches.remove(y),r.refresh()})}},f.createElement(_t,null)))}})))}var ca=["translations"];function Je(){return Je=Object.assign||function(e){for(var t=1;t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var la=f.memo(function(e){var t=e.translations,n=t===void 0?{}:t,r=ua(e,ca);if(r.state.status==="error")return f.createElement(Wo,{translations:n==null?void 0:n.errorScreen});var o=r.state.collections.some(function(a){return a.items.length>0});return r.state.query?o===!1?f.createElement(Yo,Je({},r,{translations:n==null?void 0:n.noResultsScreen})):f.createElement(ra,r):f.createElement(ia,Je({},r,{hasCollections:o,translations:n==null?void 0:n.startScreen}))},function(e,t){return t.state.status==="loading"||t.state.status==="stalled"}),sa=["translations"];function $e(){return $e=Object.assign||function(e){for(var t=1;t=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function pa(e){var t=e.translations,n=t===void 0?{}:t,r=fa(e,sa),o=n.resetButtonTitle,a=o===void 0?"Clear the query":o,i=n.resetButtonAriaLabel,u=i===void 0?"Clear the query":i,s=n.cancelButtonText,l=s===void 0?"Cancel":s,c=n.cancelButtonAriaLabel,d=c===void 0?"Cancel":c,m=r.getFormProps({inputElement:r.inputRef.current}).onReset;return f.useEffect(function(){r.autoFocus&&r.inputRef.current&&r.inputRef.current.focus()},[r.autoFocus,r.inputRef]),f.useEffect(function(){r.isFromSelection&&r.inputRef.current&&r.inputRef.current.select()},[r.isFromSelection,r.inputRef]),f.createElement(f.Fragment,null,f.createElement("form",{className:"DocSearch-Form",onSubmit:function(p){p.preventDefault()},onReset:m},f.createElement("label",$e({className:"DocSearch-MagnifierLabel"},r.getLabelProps()),f.createElement(nr,null)),f.createElement("div",{className:"DocSearch-LoadingIndicator"},f.createElement(qo,null)),f.createElement("input",$e({className:"DocSearch-Input",ref:r.inputRef},r.getInputProps({inputElement:r.inputRef.current,autoFocus:r.autoFocus,maxLength:64}))),f.createElement("button",{type:"reset",title:a,className:"DocSearch-Reset","aria-label":u,hidden:!r.state.query},f.createElement(_t,null))),f.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":d,onClick:r.onClose},l))}var ma=["_highlightResult","_snippetResult"];function da(e,t){if(e==null)return{};var n,r,o=function(i,u){if(i==null)return{};var s,l,c={},d=Object.keys(i);for(l=0;l=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function ha(e){return function(){var t="__TEST_KEY__";try{return localStorage.setItem(t,""),localStorage.removeItem(t),!0}catch{return!1}}()===!1?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}function Pn(e){var t=e.key,n=e.limit,r=n===void 0?5:n,o=ha(t),a=o.getItem().slice(0,r);return{add:function(i){var u=i,s=(u._highlightResult,u._snippetResult,da(u,ma)),l=a.findIndex(function(c){return c.objectID===s.objectID});l>-1&&a.splice(l,1),a.unshift(s),a=a.slice(0,r),o.setItem(a)},remove:function(i){a=a.filter(function(u){return u.objectID!==i.objectID}),o.setItem(a)},getAll:function(){return a}}}var va=["facetName","facetQuery"];function _a(e){var t,n="algoliasearch-client-js-".concat(e.key),r=function(){return t===void 0&&(t=e.localStorage||window.localStorage),t},o=function(){return JSON.parse(r().getItem(n)||"{}")};return{get:function(a,i){var u=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then(function(){var s=JSON.stringify(a),l=o()[s];return Promise.all([l||i(),l!==void 0])}).then(function(s){var l=Fe(s,2),c=l[0],d=l[1];return Promise.all([c,d||u.miss(c)])}).then(function(s){return Fe(s,1)[0]})},set:function(a,i){return Promise.resolve().then(function(){var u=o();return u[JSON.stringify(a)]=i,r().setItem(n,JSON.stringify(u)),i})},delete:function(a){return Promise.resolve().then(function(){var i=o();delete i[JSON.stringify(a)],r().setItem(n,JSON.stringify(i))})},clear:function(){return Promise.resolve().then(function(){r().removeItem(n)})}}}function _e(e){var t=Be(e.caches),n=t.shift();return n===void 0?{get:function(r,o){var a=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}};return o().then(function(i){return Promise.all([i,a.miss(i)])}).then(function(i){return Fe(i,1)[0]})},set:function(r,o){return Promise.resolve(o)},delete:function(r){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(r,o){var a=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(r,o,a).catch(function(){return _e({caches:t}).get(r,o,a)})},set:function(r,o){return n.set(r,o).catch(function(){return _e({caches:t}).set(r,o)})},delete:function(r){return n.delete(r).catch(function(){return _e({caches:t}).delete(r)})},clear:function(){return n.clear().catch(function(){return _e({caches:t}).clear()})}}}function it(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var o=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}},a=JSON.stringify(n);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);var i=r(),u=o&&o.miss||function(){return Promise.resolve()};return i.then(function(s){return u(s)}).then(function(){return i})},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(n){return delete t[JSON.stringify(n)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function ya(e){for(var t=e.length-1;t>0;t--){var n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}function cr(e,t){return t&&Object.keys(t).forEach(function(n){e[n]=t[n](e)}),e}function Qe(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r0?r:void 0,timeout:n.timeout||t,headers:n.headers||{},queryParameters:n.queryParameters||{},cacheable:n.cacheable}}var ie={Read:1,Write:2,Any:3},ur=1,ga=2,lr=3;function sr(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:ur;return P(P({},e),{},{status:t,lastUpdate:Date.now()})}function fr(e){return typeof e=="string"?{protocol:"https",url:e,accept:ie.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||ie.Any}}var kn="GET",Ye="POST";function ba(e,t){return Promise.all(t.map(function(n){return e.get(n,function(){return Promise.resolve(sr(n))})})).then(function(n){var r=n.filter(function(i){return function(u){return u.status===ur||Date.now()-u.lastUpdate>12e4}(i)}),o=n.filter(function(i){return function(u){return u.status===lr&&Date.now()-u.lastUpdate<=12e4}(i)}),a=[].concat(Be(r),Be(o));return{getTimeout:function(i,u){return(o.length===0&&i===0?1:o.length+3+i)*u},statelessHosts:a.length>0?a.map(function(i){return fr(i)}):t}})}function Cn(e,t,n,r){var o=[],a=function(m,p){if(!(m.method===kn||m.data===void 0&&p.data===void 0)){var v=Array.isArray(m.data)?m.data:P(P({},m.data),p.data);return JSON.stringify(v)}}(n,r),i=function(m,p){var v=P(P({},m.headers),p.headers),h={};return Object.keys(v).forEach(function(_){var y=v[_];h[_.toLowerCase()]=y}),h}(e,r),u=n.method,s=n.method!==kn?{}:P(P({},n.data),r.data),l=P(P(P({"x-algolia-agent":e.userAgent.value},e.queryParameters),s),r.queryParameters),c=0,d=function m(p,v){var h=p.pop();if(h===void 0)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Dn(o)};var _={data:a,headers:i,method:u,url:Sa(h,n.path,l),connectTimeout:v(c,e.timeouts.connect),responseTimeout:v(c,r.timeout)},y=function(b){var O={request:_,response:b,host:h,triesLeft:p.length};return o.push(O),O},g={onSucess:function(b){return function(O){try{return JSON.parse(O.content)}catch(S){throw function(I,D){return{name:"DeserializationError",message:I,response:D}}(S.message,O)}}(b)},onRetry:function(b){var O=y(b);return b.isTimedOut&&c++,Promise.all([e.logger.info("Retryable failure",mr(O)),e.hostsCache.set(h,sr(h,b.isTimedOut?lr:ga))]).then(function(){return m(p,v)})},onFail:function(b){throw y(b),function(O,S){var I=O.content,D=O.status,A=I;try{A=JSON.parse(I).message}catch{}return function(k,N,R){return{name:"ApiError",message:k,status:N,transporterStackTrace:R}}(A,D,S)}(b,Dn(o))}};return e.requester.send(_).then(function(b){return function(O,S){return function(I){var D=I.status;return I.isTimedOut||function(A){var k=A.isTimedOut,N=A.status;return!k&&~~N==0}(I)||~~(D/100)!=2&&~~(D/100)!=4}(O)?S.onRetry(O):~~(O.status/100)==2?S.onSucess(O):S.onFail(O)}(b,g)})};return ba(e.hostsCache,t).then(function(m){return d(Be(m.statelessHosts).reverse(),m.getTimeout)})}function Oa(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(n){var r="; ".concat(n.segment).concat(n.version!==void 0?" (".concat(n.version,")"):"");return t.value.indexOf(r)===-1&&(t.value="".concat(t.value).concat(r)),t}};return t}function Sa(e,t,n){var r=pr(n),o="".concat(e.protocol,"://").concat(e.url,"/").concat(t.charAt(0)==="/"?t.substr(1):t);return r.length&&(o+="?".concat(r)),o}function pr(e){return Object.keys(e).map(function(t){return Qe("%s=%s",t,(n=e[t],Object.prototype.toString.call(n)==="[object Object]"||Object.prototype.toString.call(n)==="[object Array]"?JSON.stringify(e[t]):e[t]));var n}).join("&")}function Dn(e){return e.map(function(t){return mr(t)})}function mr(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return P(P({},e),{},{request:P(P({},e.request),{},{headers:P(P({},e.request.headers),t)})})}var Ea=function(e){var t=e.appId,n=function(a,i,u){var s={"x-algolia-api-key":u,"x-algolia-application-id":i};return{headers:function(){return a===Ue.WithinHeaders?s:{}},queryParameters:function(){return a===Ue.WithinQueryParameters?s:{}}}}(e.authMode!==void 0?e.authMode:Ue.WithinHeaders,t,e.apiKey),r=function(a){var i=a.hostsCache,u=a.logger,s=a.requester,l=a.requestsCache,c=a.responsesCache,d=a.timeouts,m=a.userAgent,p=a.hosts,v=a.queryParameters,h={hostsCache:i,logger:u,requester:s,requestsCache:l,responsesCache:c,timeouts:d,userAgent:m,headers:a.headers,queryParameters:v,hosts:p.map(function(_){return fr(_)}),read:function(_,y){var g=In(y,h.timeouts.read),b=function(){return Cn(h,h.hosts.filter(function(S){return(S.accept&ie.Read)!=0}),_,g)};if((g.cacheable!==void 0?g.cacheable:_.cacheable)!==!0)return b();var O={request:_,mappedRequestOptions:g,transporter:{queryParameters:h.queryParameters,headers:h.headers}};return h.responsesCache.get(O,function(){return h.requestsCache.get(O,function(){return h.requestsCache.set(O,b()).then(function(S){return Promise.all([h.requestsCache.delete(O),S])},function(S){return Promise.all([h.requestsCache.delete(O),Promise.reject(S)])}).then(function(S){var I=Fe(S,2);return I[0],I[1]})})},{miss:function(S){return h.responsesCache.set(O,S)}})},write:function(_,y){return Cn(h,h.hosts.filter(function(g){return(g.accept&ie.Write)!=0}),_,In(y,h.timeouts.write))}};return h}(P(P({hosts:[{url:"".concat(t,"-dsn.algolia.net"),accept:ie.Read},{url:"".concat(t,".algolia.net"),accept:ie.Write}].concat(ya([{url:"".concat(t,"-1.algolianet.com")},{url:"".concat(t,"-2.algolianet.com")},{url:"".concat(t,"-3.algolianet.com")}]))},e),{},{headers:P(P(P({},n.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:P(P({},n.queryParameters()),e.queryParameters)})),o={transporter:r,appId:t,addAlgoliaAgent:function(a,i){r.userAgent.add({segment:a,version:i})},clearCache:function(){return Promise.all([r.requestsCache.clear(),r.responsesCache.clear()]).then(function(){})}};return cr(o,e.methods)},dr=function(e){return function(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r={transporter:e.transporter,appId:e.appId,indexName:t};return cr(r,n.methods)}},xn=function(e){return function(t,n){var r=t.map(function(o){return P(P({},o),{},{params:pr(o.params||{})})});return e.transporter.read({method:Ye,path:"1/indexes/*/queries",data:{requests:r},cacheable:!0},n)}},An=function(e){return function(t,n){return Promise.all(t.map(function(r){var o=r.params,a=o.facetName,i=o.facetQuery,u=xr(o,va);return dr(e)(r.indexName,{methods:{searchForFacetValues:hr}}).searchForFacetValues(a,i,P(P({},n),u))}))}},wa=function(e){return function(t,n,r){return e.transporter.read({method:Ye,path:Qe("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:n},cacheable:!0},r)}},ja=function(e){return function(t,n){return e.transporter.read({method:Ye,path:Qe("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},n)}},hr=function(e){return function(t,n,r){return e.transporter.read({method:Ye,path:Qe("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:n},cacheable:!0},r)}},Pa=1,Ia=2,ka=3;function vr(e,t,n){var r,o={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(a){return new Promise(function(i){var u=new XMLHttpRequest;u.open(a.method,a.url,!0),Object.keys(a.headers).forEach(function(d){return u.setRequestHeader(d,a.headers[d])});var s,l=function(d,m){return setTimeout(function(){u.abort(),i({status:0,content:m,isTimedOut:!0})},1e3*d)},c=l(a.connectTimeout,"Connection timeout");u.onreadystatechange=function(){u.readyState>u.OPENED&&s===void 0&&(clearTimeout(c),s=l(a.responseTimeout,"Socket timeout"))},u.onerror=function(){u.status===0&&(clearTimeout(c),clearTimeout(s),i({content:u.responseText||"Network request failed",status:u.status,isTimedOut:!1}))},u.onload=function(){clearTimeout(c),clearTimeout(s),i({content:u.responseText,status:u.status,isTimedOut:!1})},u.send(a.data)})}},logger:(r=ka,{debug:function(a,i){return Pa>=r&&console.debug(a,i),Promise.resolve()},info:function(a,i){return Ia>=r&&console.info(a,i),Promise.resolve()},error:function(a,i){return console.error(a,i),Promise.resolve()}}),responsesCache:it(),requestsCache:it({serializable:!1}),hostsCache:_e({caches:[_a({key:"".concat("4.8.5","-").concat(e)}),it()]}),userAgent:Oa("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Ue.WithinQueryParameters};return Ea(P(P(P({},o),n),{},{methods:{search:xn,searchForFacetValues:An,multipleQueries:xn,multipleSearchForFacetValues:An,initIndex:function(a){return function(i){return dr(a)(i,{methods:{search:ja,searchForFacetValues:hr,findAnswers:wa}})}}}}))}vr.version="4.8.5";var Ca=["footer","searchBox"];function be(){return be=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(c[s]=i[s]);return c}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Na(e){var t=e.appId,n=e.apiKey,r=e.indexName,o=e.placeholder,a=o===void 0?"Search docs":o,i=e.searchParameters,u=e.onClose,s=u===void 0?ta:u,l=e.transformItems,c=l===void 0?jn:l,d=e.hitComponent,m=d===void 0?Lo:d,p=e.resultsFooterComponent,v=p===void 0?function(){return null}:p,h=e.navigator,_=e.initialScrollY,y=_===void 0?0:_,g=e.transformSearchClient,b=g===void 0?jn:g,O=e.disableUserPersonalization,S=O!==void 0&&O,I=e.initialQuery,D=I===void 0?"":I,A=e.translations,k=A===void 0?{}:A,N=e.getMissingResultsUrl,R=k.footer,Ge=k.searchBox,Ze=Aa(k,Ca),Pe=xa(f.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),W=Pe[0],_r=Pe[1],wt=f.useRef(null),Xe=f.useRef(null),jt=f.useRef(null),Ie=f.useRef(null),ue=f.useRef(null),J=f.useRef(10),Pt=f.useRef(typeof window!="undefined"?window.getSelection().toString().slice(0,64):"").current,Y=f.useRef(D||Pt).current,It=function(j,C,q){return f.useMemo(function(){var M=vr(j,C);return M.addAlgoliaAgent("docsearch","3.0.0"),/docsearch.js \(.*\)/.test(M.transporter.userAgent.value)===!1&&M.addAlgoliaAgent("docsearch-react","3.0.0"),q(M)},[j,C,q])}(t,n,b),X=f.useRef(Pn({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(r),limit:10})).current,le=f.useRef(Pn({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(r),limit:X.getAll().length===0?7:4})).current,se=f.useCallback(function(j){if(!S){var C=j.type==="content"?j.__docsearch_parent:j;C&&X.getAll().findIndex(function(q){return q.objectID===C.objectID})===-1&&le.add(C)}},[X,le,S]),fe=f.useMemo(function(){return No({id:"docsearch",defaultActiveItemId:0,placeholder:a,openOnFocus:!0,initialState:{query:Y,context:{searchSuggestions:[]}},navigator:h,onStateChange:function(j){_r(j.state)},getSources:function(j){var C=j.query,q=j.state,M=j.setContext,$=j.setStatus;return C?It.search([{query:C,indexName:r,params:ct({attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(J.current),"hierarchy.lvl2:".concat(J.current),"hierarchy.lvl3:".concat(J.current),"hierarchy.lvl4:".concat(J.current),"hierarchy.lvl5:".concat(J.current),"hierarchy.lvl6:".concat(J.current),"content:".concat(J.current)],snippetEllipsisText:"\u2026",highlightPreTag:"",highlightPostTag:"",hitsPerPage:20},i)}]).catch(function(x){throw x.name==="RetryError"&&$("error"),x}).then(function(x){var H=x.results[0],U=H.hits,br=H.nbHits,et=wn(U,function(tt){return ir(tt)});return q.context.searchSuggestions.length0&&(kt(),ue.current&&ue.current.focus())},[Y,kt]),f.useEffect(function(){function j(){if(Xe.current){var C=.01*window.innerHeight;Xe.current.style.setProperty("--docsearch-vh","".concat(C,"px"))}}return j(),window.addEventListener("resize",j),function(){window.removeEventListener("resize",j)}},[]),f.createElement("div",be({ref:wt},gr({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container",W.status==="stalled"&&"DocSearch-Container--Stalled",W.status==="error"&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(j){j.target===j.currentTarget&&s()}}),f.createElement("div",{className:"DocSearch-Modal",ref:Xe},f.createElement("header",{className:"DocSearch-SearchBar",ref:jt},f.createElement(pa,be({},fe,{state:W,autoFocus:Y.length===0,inputRef:ue,isFromSelection:Boolean(Y)&&Y===Pt,translations:Ge,onClose:s}))),f.createElement("div",{className:"DocSearch-Dropdown",ref:Ie},f.createElement(la,be({},fe,{indexName:r,state:W,hitComponent:m,resultsFooterComponent:v,disableUserPersonalization:S,recentSearches:le,favoriteSearches:X,inputRef:ue,translations:Ze,getMissingResultsUrl:N,onItemClick:function(j){se(j),s()}}))),f.createElement("footer",{className:"DocSearch-Footer"},f.createElement(To,{translations:R}))))}function bt(){return bt=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n1&&arguments[1]!==void 0?arguments[1]:window;return typeof t=="string"?n.document.querySelector(t):t}(e.container,e.environment))}const La={class:"algolia-search-box",id:"docsearch"},Ma=Sr({__name:"AlgoliaSearchBox",props:{options:null,multilang:{type:Boolean}},setup(e){var d;const t=e,n=Cr(),r=Er(),o=wr();Ct(()=>t.options,m=>{u(m)}),jr(()=>{c(t.options)});function a(m){return m.button===1||m.altKey||m.ctrlKey||m.metaKey||m.shiftKey}function i(m){const{pathname:p,hash:v}=new URL(m);return p+v}function u(m){n&&n.vnode.el&&(n.vnode.el.innerHTML='',c(m))}const{lang:s}=Pr(),l=t.multilang?["lang:"+s.value]:[];(d=t.options.searchParameters)!=null&&d.facetFilters&&l.push(...t.options.searchParameters.facetFilters),Ct(s,(m,p)=>{const v=l.findIndex(h=>h==="lang:"+p);v>-1&&l.splice(v,1,"lang:"+m)});function c(m){Ta(Object.assign({},m,{container:"#docsearch",searchParameters:Object.assign({},m.searchParameters,{facetFilters:l}),navigator:{navigate:({itemUrl:p})=>{const{pathname:v}=new URL(window.location.origin+p);r.path===v?window.location.assign(window.location.origin+p):o.go(p)}},transformItems:p=>p.map(v=>Object.assign({},v,{url:i(v.url)})),hitComponent:({hit:p,children:v})=>{const h=p.url.startsWith("http")?i(p.url):p.url;return{type:"a",ref:void 0,constructor:void 0,key:void 0,props:{href:p.url,onClick:_=>{a(_)||r.path!==h&&(r.path!==h&&_.preventDefault(),o.go(h))},children:v},__v:null}}}))}return(m,p)=>(Ir(),kr("div",La))}});export{Ma as default}; diff --git a/assets/examples_index.md.807311bb.js b/assets/examples_index.md.807311bb.js new file mode 100644 index 00000000..28350998 --- /dev/null +++ b/assets/examples_index.md.807311bb.js @@ -0,0 +1 @@ +import{_ as e,c as r,o as a,a as t}from"./app.494b20fe.js";const g='{"title":"Examples","description":"","frontmatter":{},"headers":[{"level":2,"title":"Vue 3 charts","slug":"vue-3-charts"},{"level":2,"title":"Vue 2 charts (vue-chartjs v4)","slug":"vue-2-charts-vue-chartjs-v4"}],"relativePath":"examples/index.md","lastUpdated":1690983419000}',s={},l=t('

Examples

Vue 3 charts

Vue 2 charts (vue-chartjs v4)

',5),n=[l];function o(i,h,c,u,b,p){return a(),r("div",null,n)}var v=e(s,[["render",o]]);export{g as __pageData,v as default}; diff --git a/assets/examples_index.md.807311bb.lean.js b/assets/examples_index.md.807311bb.lean.js new file mode 100644 index 00000000..07ad03bb --- /dev/null +++ b/assets/examples_index.md.807311bb.lean.js @@ -0,0 +1 @@ +import{_ as e,c as r,o as a,a as t}from"./app.494b20fe.js";const g='{"title":"Examples","description":"","frontmatter":{},"headers":[{"level":2,"title":"Vue 3 charts","slug":"vue-3-charts"},{"level":2,"title":"Vue 2 charts (vue-chartjs v4)","slug":"vue-2-charts-vue-chartjs-v4"}],"relativePath":"examples/index.md","lastUpdated":1690983419000}',s={},l=t("",5),n=[l];function o(i,h,c,u,b,p){return a(),r("div",null,n)}var v=e(s,[["render",o]]);export{g as __pageData,v as default}; diff --git a/assets/guide_index.md.516b45f9.js b/assets/guide_index.md.516b45f9.js new file mode 100644 index 00000000..f41289ec --- /dev/null +++ b/assets/guide_index.md.516b45f9.js @@ -0,0 +1,205 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"Getting Started","description":"","frontmatter":{},"headers":[{"level":2,"title":"Introduction","slug":"introduction"},{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Integration","slug":"integration"},{"level":2,"title":"Creating your first Chart","slug":"creating-your-first-chart"},{"level":2,"title":"Updating Charts","slug":"updating-charts"},{"level":2,"title":"Access to Chart instance","slug":"access-to-chart-instance"},{"level":2,"title":"Examples","slug":"examples"},{"level":3,"title":"Chart with props","slug":"chart-with-props"},{"level":3,"title":"Chart with local data","slug":"chart-with-local-data"},{"level":3,"title":"Chart with API data","slug":"chart-with-api-data"},{"level":3,"title":"Chart with dynamic styles","slug":"chart-with-dynamic-styles"},{"level":3,"title":"Custom / New Charts","slug":"custom-new-charts"},{"level":2,"title":"Resources","slug":"resources"}],"relativePath":"guide/index.md","lastUpdated":1690983419000}',p={},e=t(`

Getting Started

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

Supports Chart.js v4.

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.

Need an API to fetch data?

Please consider Cube, an open-source API for data apps.

Installation

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

pnpm add vue-chartjs chart.js
+# or
+yarn add vue-chartjs chart.js
+# or
+npm i vue-chartjs chart.js
+

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.

The idea behind vue-chartjs is to provide easy-to-use components, with maximal flexibility and extensibility.

Creating your first Chart

First, you need to import the base chart.

import { Bar } from 'vue-chartjs'
+

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

Just create your own component.

BarChart.vue

<template>
+  <Bar
+    id="my-chart-id"
+    :options="chartOptions"
+    :data="chartData"
+  />
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March' ],
+        datasets: [ { data: [40, 20, 12] } ]
+      },
+      chartOptions: {
+        responsive: true
+      }
+    }
+  }
+}
+</script>
+

Use it in your vue app:

App.vue

<template>
+  <BarChart />
+</template>
+
+<script>
+import BarChart from 'path/to/component/BarChart'
+
+export default {
+  name: 'App',
+  components: { BarChart }
+}
+</script>
+

Updating Charts

Since v4 charts have data change watcher and options change watcher by default. Wrapper will update or re-render the chart if new data or new options is passed. Mixins have been removed.

<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
+
+<script>
+// DataPage.vue
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+      chartData() { return /* mutable chart data */ },
+      chartOptions() { return /* mutable chart options */ }
+    }
+}
+</script>
+

Access to Chart instance

You can get access to chart instance via template refs.

<template>
+  <BarChart ref="bar" />
+</template>
+

In Vue3 projects:

const chartInstance = this.$refs.bar.chart
+

Examples

Chart with props

Your goal should be to create reusable chart components. For this purpose, you should utilize Vue.js props to pass in chart options and chart data. This way, the parent component itself does not hold an opinion about fetching data and is only for presentation.

<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  props: {
+    chartData: {
+        type: Object,
+        required: true
+      },
+    chartOptions: {
+      type: Object,
+      default: () => {}
+    }
+  }
+}
+</script>
+

Chart with local data

You can handle your chart data directly in your parent component.

<template>
+  <Bar :data="chartData" />
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20, 12]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+

Chart with API data

A common pattern is to use an API to retrieve 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 asynchronous API call. The problem with this approach is that Chart.js tries to render your chart and access the chart data synchronously, so your chart mounts before the API 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.

<template>
+  <div class="container">
+    <Bar v-if="loaded" :data="chartData" />
+  </div>
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  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 a styles object which gets 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>
+    <Bar :style="myStyles"/>
+  </div>
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+    myStyles () {
+      return {
+        height: \`\${/* mutable height */}px\`,
+        position: 'relative'
+      }
+    }
+  }
+}
+</script>
+

Custom / New Charts

Sometimes you need to extend the default Chart.js charts. There are a lot of examples on how to extend and modify the default charts. Or, you can create your 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 \`createTypedChart()\` method to create the vue component.
+import { createTypedChart } from 'vue-chartjs'
+// 3. Import needed controller from Chart.js
+import { LineController } from 'chart.js'
+
+// 3. Extend one of the default charts
+// http://www.chartjs.org/docs/latest/developers/charts.html
+class LineWithLineController extends LineController { /* custom magic here */}
+
+// 4. Generate the vue-chartjs component
+// The first argument is the chart-id, the second the chart type, third is the custom controller
+const CustomLine = createTypedChart('line', LineWithLineController)
+
+// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
+
+export default {
+  components: { CustomLine }
+}
+

Resources

Here are some resources, such as tutorials, on how to use vue-chartjs:

`,54),o=[e];function c(l,r,u,i,k,d){return s(),a("div",null,o)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/guide_index.md.516b45f9.lean.js b/assets/guide_index.md.516b45f9.lean.js new file mode 100644 index 00000000..6f376e17 --- /dev/null +++ b/assets/guide_index.md.516b45f9.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"Getting Started","description":"","frontmatter":{},"headers":[{"level":2,"title":"Introduction","slug":"introduction"},{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Integration","slug":"integration"},{"level":2,"title":"Creating your first Chart","slug":"creating-your-first-chart"},{"level":2,"title":"Updating Charts","slug":"updating-charts"},{"level":2,"title":"Access to Chart instance","slug":"access-to-chart-instance"},{"level":2,"title":"Examples","slug":"examples"},{"level":3,"title":"Chart with props","slug":"chart-with-props"},{"level":3,"title":"Chart with local data","slug":"chart-with-local-data"},{"level":3,"title":"Chart with API data","slug":"chart-with-api-data"},{"level":3,"title":"Chart with dynamic styles","slug":"chart-with-dynamic-styles"},{"level":3,"title":"Custom / New Charts","slug":"custom-new-charts"},{"level":2,"title":"Resources","slug":"resources"}],"relativePath":"guide/index.md","lastUpdated":1690983419000}',p={},e=t("",54),o=[e];function c(l,r,u,i,k,d){return s(),a("div",null,o)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/index.md.05808d1c.js b/assets/index.md.05808d1c.js new file mode 100644 index 00000000..0950618e --- /dev/null +++ b/assets/index.md.05808d1c.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const u='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"Get Started \u2192","actionLink":"/guide/","features":[{"title":"Easy","details":"Easy for both beginners and pros \u{1F64C}"},{"title":"Extendable","details":"Simple to use, easy to extend \u{1F4AA}"},{"title":"Powerful","details":"With the full power of chart.js \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"index.md","lastUpdated":1690983419000}',r={};function s(o,i,n,c,d,l){return a(),t("div")}var h=e(r,[["render",s]]);export{u as __pageData,h as default}; diff --git a/assets/index.md.05808d1c.lean.js b/assets/index.md.05808d1c.lean.js new file mode 100644 index 00000000..0950618e --- /dev/null +++ b/assets/index.md.05808d1c.lean.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const u='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"Get Started \u2192","actionLink":"/guide/","features":[{"title":"Easy","details":"Easy for both beginners and pros \u{1F64C}"},{"title":"Extendable","details":"Simple to use, easy to extend \u{1F4AA}"},{"title":"Powerful","details":"With the full power of chart.js \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"index.md","lastUpdated":1690983419000}',r={};function s(o,i,n,c,d,l){return a(),t("div")}var h=e(r,[["render",s]]);export{u as __pageData,h as default}; diff --git a/assets/ja_api_index.md.079878ad.js b/assets/ja_api_index.md.079878ad.js new file mode 100644 index 00000000..c7e7cfcf --- /dev/null +++ b/assets/ja_api_index.md.079878ad.js @@ -0,0 +1,41 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u30B3\u30FC\u30C7\u30A3\u30F3\u30B0 \u30EC\u30D5\u30A1\u30EC\u30F3\u30B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"Events","slug":"events"},{"level":2,"title":"Global Methods","slug":"global-methods"},{"level":3,"title":"generateChart","slug":"generatechart"},{"level":2,"title":"Instance Methods","slug":"instance-methods"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"\u30D7\u30E9\u30B0\u30A4\u30F3\u306E\u8FFD\u52A0","slug":"\u30D7\u30E9\u30B0\u30A4\u30F3\u306E\u8FFD\u52A0"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"Chart.js \u30AA\u30D6\u30B8\u30A7\u30AF\u30C8","slug":"chart-js-\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8"},{"level":2,"title":"Canvas","slug":"canvas"}],"relativePath":"ja/api/index.md","lastUpdated":1690983419000}',e={},p=t(`

\u30B3\u30FC\u30C7\u30A3\u30F3\u30B0 \u30EC\u30D5\u30A1\u30EC\u30F3\u30B9

Props

vue-chartjs\u306B\u3088\u3063\u3066\u63D0\u4F9B\u3055\u308C\u308B\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306B\u306F\u3044\u304F\u3064\u304B\u306E\u57FA\u672C\u7684\u306A\u30D7\u30ED\u30D1\u30C6\u30A3\u304C\u5B9A\u7FA9\u3055\u308C\u3066\u3044\u307E\u3059\u3002 \u62E1\u5F35\u3057\u3066\u3044\u308B\u306E\u3067\u3001\u305D\u308C\u3089\u306F \u898B\u3048\u306A\u3044 \u3067\u3059\u304C\u3001\u305D\u308C\u3089\u306E\u5024\u306F\u4E0A\u66F8\u304D\u3059\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\uFF1A

Prop\u540D\u8AAC\u660E
width\u30C1\u30E3\u30FC\u30C8\u5E45
height\u30C1\u30E3\u30FC\u30C8\u9AD8\u3055
chart-idcanvas\u8981\u7D20\u306Eid
css-classes\u56F2\u3093\u3067\u3044\u308B div \u306E css \u30AF\u30E9\u30B9 (\u6587\u5B57\u5217)
styles\u56F2\u3093\u3067\u3044\u308B div \u306E css \u30AF\u30E9\u30B9 (\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8)
pluginschartjs \u30D7\u30E9\u30B0\u30A4\u30F3 (\u914D\u5217)

Events

reactData\u307E\u305F\u306F reactProp\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u4F7F\u7528\u3055\u308C\u3066\u3044\u308B\u5834\u5408\u3001\u4EE5\u4E0B\u306E\u30A4\u30D9\u30F3\u30C8\u304C\u767A\u884C\u3055\u308C\u307E\u3059\u3002

Event\u540D\u8AAC\u660E
chart:render\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u5B8C\u5168\u306B\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0\u3057\u305F\u3068\u304D
chart:destroy\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u30C1\u30E3\u30FC\u30C8\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u30A4\u30F3\u30B9\u30BF\u30F3\u30B9\u3092\u524A\u9664\u3057\u305F\u3068\u304D
chart:update\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u518D\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0\u306E\u4EE3\u308F\u308A\u306B\u66F4\u65B0\u3092\u3057\u305F\u3068\u304D
labels:updatelabels\u304C\u30BB\u30C3\u30C8\u3055\u308C\u305F\u3068\u304D
xlabels:updatexlabels\u304C\u30BB\u30C3\u30C8\u3055\u308C\u305F\u3068\u304D
ylabels:updateylabels\u304C\u30BB\u30C3\u30C8\u3055\u308C\u305F\u3068\u304D

Global Methods

\u30B0\u30ED\u30FC\u30D0\u30EB\u30E1\u30BD\u30C3\u30C9\u306F\u30A4\u30F3\u30DD\u30FC\u30C8\u3057\u3066\u4F7F\u7528\u3057\u307E\u3059\u3002

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

\u30A4\u30F3\u30B9\u30BF\u30F3\u30B9\u30E1\u30BD\u30C3\u30C9\u306F\u72EC\u81EA\u306E\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u5185\u3067\u4F7F\u7528\u3059\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002

generateLegend()

HTML\u306E\u51E1\u4F8B\u3092\u4F5C\u6210\u3059\u308B\u30D8\u30EB\u30D1\u30FC\u95A2\u6570

  • Type: Function
  • Arguments: none
  • Usage:










\xA0




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()
+  }
+}
+
+

\u30D7\u30E9\u30B0\u30A4\u30F3\u306E\u8FFD\u52A0

Chart.js\u3067\u306F\u3001\u30B0\u30ED\u30FC\u30D0\u30EB\u30D7\u30E9\u30B0\u30A4\u30F3\u3068\u30A4\u30F3\u30E9\u30A4\u30F3\u30D7\u30E9\u30B0\u30A4\u30F3\u3092\u5B9A\u7FA9\u3067\u304D\u307E\u3059\u3002 \u30B0\u30ED\u30FC\u30D0\u30EB\u30D7\u30E9\u30B0\u30A4\u30F3\u306F\u3001Chart.js docs\u3067\u8AAC\u660E\u3055\u308C\u3066\u3044\u308B\u3088\u3046\u306Bvue-chartjs\u3067\u3082\u554F\u984C\u306A\u304F\u52D5\u4F5C\u3057\u307E\u3059\u3002

\u30A4\u30F3\u30E9\u30A4\u30F3\u30D7\u30E9\u30B0\u30A4\u30F3\u3092\u8FFD\u52A0\u3057\u305F\u3044\u5834\u5408\u306B\u5099\u3048\u3066\u3001vue-chartjs\u306FaddPlugin()\u3068\u547C\u3070\u308C\u308B\u30D8\u30EB\u30D1\u30FC\u30E1\u30BD\u30C3\u30C9\u3092\u516C\u958B\u3057\u307E\u3059\u3002

renderChart()\u30E1\u30BD\u30C3\u30C9\u306E\u524D\u306B addPlugin()\u3092\u547C\u3073\u51FA\u3059\u3079\u304D\u3067\u3059\u3002

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

renderChart()

Chart.js \u306E\u30A4\u30F3\u30B9\u30BF\u30F3\u30B9\u3092\u4F5C\u6210\u3057\u3066\u63CF\u753B\u3057\u307E\u3059\u3002

  • 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 \u30AA\u30D6\u30B8\u30A7\u30AF\u30C8

\u72EC\u81EA\u306E\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u5185\u304B\u3089Chart.js\u306E\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u306B\u306F this.$data._chart \u3067\u30A2\u30AF\u30BB\u30B9\u3067\u304D\u307E\u3059\u3002

Canvas

Canvas\u8981\u7D20\u306B\u306F this.$refs.canvas \u3067\u30A2\u30AF\u30BB\u30B9\u3067\u304D\u307E\u3059\u3002

`,32),o=[p];function c(r,l,d,i,u,h){return s(),a("div",null,o)}var b=n(e,[["render",c]]);export{g as __pageData,b as default}; diff --git a/assets/ja_api_index.md.079878ad.lean.js b/assets/ja_api_index.md.079878ad.lean.js new file mode 100644 index 00000000..41c9446d --- /dev/null +++ b/assets/ja_api_index.md.079878ad.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u30B3\u30FC\u30C7\u30A3\u30F3\u30B0 \u30EC\u30D5\u30A1\u30EC\u30F3\u30B9","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"Events","slug":"events"},{"level":2,"title":"Global Methods","slug":"global-methods"},{"level":3,"title":"generateChart","slug":"generatechart"},{"level":2,"title":"Instance Methods","slug":"instance-methods"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"\u30D7\u30E9\u30B0\u30A4\u30F3\u306E\u8FFD\u52A0","slug":"\u30D7\u30E9\u30B0\u30A4\u30F3\u306E\u8FFD\u52A0"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"Chart.js \u30AA\u30D6\u30B8\u30A7\u30AF\u30C8","slug":"chart-js-\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8"},{"level":2,"title":"Canvas","slug":"canvas"}],"relativePath":"ja/api/index.md","lastUpdated":1690983419000}',e={},p=t("",32),o=[p];function c(r,l,d,i,u,h){return s(),a("div",null,o)}var b=n(e,[["render",c]]);export{g as __pageData,b as default}; diff --git a/assets/ja_guide_index.md.8194d779.js b/assets/ja_guide_index.md.8194d779.js new file mode 100644 index 00000000..888c0b54 --- /dev/null +++ b/assets/ja_guide_index.md.8194d779.js @@ -0,0 +1,259 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u6700\u521D\u306B","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u521D\u3081\u306B","slug":"\u521D\u3081\u306B"},{"level":2,"title":"\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB","slug":"\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"\u30D6\u30E9\u30A6\u30B6","slug":"\u30D6\u30E9\u30A6\u30B6"},{"level":2,"title":"\u7D71\u5408","slug":"\u7D71\u5408"},{"level":2,"title":"\u6700\u521D\u306E\u30C1\u30E3\u30FC\u30C8\u306E\u4F5C\u6210","slug":"\u6700\u521D\u306E\u30C1\u30E3\u30FC\u30C8\u306E\u4F5C\u6210"},{"level":3,"title":"Vue \u30B7\u30F3\u30B0\u30EB\u30D5\u30A1\u30A4\u30EB\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8","slug":"vue-\u30B7\u30F3\u30B0\u30EB\u30D5\u30A1\u30A4\u30EB\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8"},{"level":2,"title":"\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u306E\u66F4\u65B0","slug":"\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u306E\u66F4\u65B0"},{"level":3,"title":"\u4F8B","slug":"\u4F8B"},{"level":3,"title":"\u30A4\u30D9\u30F3\u30C8","slug":"\u30A4\u30D9\u30F3\u30C8"},{"level":3,"title":"\u30C8\u30E9\u30D6\u30EB\u30B7\u30E5\u30FC\u30C6\u30A3\u30F3\u30B0","slug":"\u30C8\u30E9\u30D6\u30EB\u30B7\u30E5\u30FC\u30C6\u30A3\u30F3\u30B0"},{"level":2,"title":"\u4F8B","slug":"\u4F8B-1"},{"level":3,"title":"props\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8","slug":"props\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"\u30ED\u30FC\u30AB\u30EB\u30C7\u30FC\u30BF\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8","slug":"\u30ED\u30FC\u30AB\u30EB\u30C7\u30FC\u30BF\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"API\u304B\u3089\u53D6\u5F97\u3057\u305F\u30C7\u30FC\u30BF\u3092\u7528\u3044\u305F\u30C1\u30E3\u30FC\u30C8","slug":"api\u304B\u3089\u53D6\u5F97\u3057\u305F\u30C7\u30FC\u30BF\u3092\u7528\u3044\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"\u52D5\u7684\u30B9\u30BF\u30A4\u30EB\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8","slug":"\u52D5\u7684\u30B9\u30BF\u30A4\u30EB\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"Custom / New Charts","slug":"custom-new-charts"},{"level":2,"title":"\u30EA\u30BD\u30FC\u30B9","slug":"\u30EA\u30BD\u30FC\u30B9"}],"relativePath":"ja/guide/index.md","lastUpdated":1690983419000}',p={},o=t(`

\u6700\u521D\u306B

vue-chartjs \u306F Chart.js \u3092vue\u3067\u4F7F\u7528\u3059\u308B\u305F\u3081\u306E\u30E9\u30C3\u30D1\u30FC\u3067\u3059\u3002 \u518D\u5229\u7528\u53EF\u80FD\u306A\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u7C21\u5358\u306B\u4F5C\u6210\u3067\u304D\u307E\u3059\u3002

\u521D\u3081\u306B

vue-chartjs \u3042\u307E\u308A\u624B\u9593\u3092\u304B\u3051\u305A\u306Bvue\u306E\u4E2D\u3067chart.js\u3092\u4F7F\u3046\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 \u30B7\u30F3\u30D7\u30EB\u306A\u30C1\u30E3\u30FC\u30C8\u3092\u3067\u304D\u308B\u3060\u3051\u65E9\u304F\u8D77\u52D5\u3057\u3066\u5B9F\u884C\u3057\u305F\u3044\u3068\u3044\u3046\u4EBA\u306B\u6700\u9069\u3067\u3059\u3002

chart.js\u306E\u57FA\u672C\u30ED\u30B8\u30C3\u30AF\u3092\u62BD\u8C61\u5316\u3057\u3066\u3044\u307E\u3059\u304C\u3001\u516C\u958B\u3055\u308C\u305Fchart.js\u306E\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u3092\u4F7F\u7528\u3057\u3066\u67D4\u8EDF\u306B\u30AB\u30B9\u30BF\u30DE\u30A4\u30BA\u3067\u304D\u307E\u3059\u3002

\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB

NPM

npm\u3092\u4F7F\u3063\u3066 vue-chartjs\u3092\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB\u3059\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 \u305F\u3060\u3057\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3078\u306E\u4F9D\u5B58\u95A2\u4FC2\u3068\u3057\u3066 chart.js\u3092\u8FFD\u52A0\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002 \u306A\u305C\u306A\u3089 Chart.js\u306FpeerDependency\u3060\u304B\u3089\u3067\u3059\u3002 \u3053\u306E\u305F\u3081\u3001Chart.js\u306E\u30D0\u30FC\u30B8\u30E7\u30F3\u3092\u5B8C\u5168\u306B\u5236\u5FA1\u3067\u304D\u307E\u3059\u3002

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

TIP

Vue.js\u306E Version 1.x\u3092\u4F7F\u7528\u3057\u3066\u3044\u308B\u5834\u5408\u306Flegacy\u30BF\u30B0\u3092\u4F7F\u7528\u3057\u3066\u304F\u3060\u3055\u3044\u3002\u3057\u304B\u3057\u3001vue\u306E\u30D0\u30FC\u30B8\u30E7\u30F31\u306F\u3082\u3046\u30E1\u30F3\u30C6\u30CA\u30F3\u30B9\u3055\u308C\u307E\u305B\u3093\u3002

yarn add vue-chartjs@legacy

\u30D6\u30E9\u30A6\u30B6

\u30D6\u30E9\u30A6\u30B6\u304B\u3089\u76F4\u63A5 vue-chartjs \u3092\u4F7F\u7528\u3059\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 \u5148\u306BChart.js\u30B9\u30AF\u30EA\u30D7\u30C8\u3092\u8FFD\u52A0\u3057\u3066\u304B\u3089vue-chartjs\u30B9\u30AF\u30EA\u30D7\u30C8\u3092\u8FFD\u52A0\u3057\u3066\u304F\u3060\u3055\u3044

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

\u7D71\u5408

Chart.js\u3067\u5229\u7528\u53EF\u80FD\u306A\u3059\u3079\u3066\u306E\u30C1\u30E3\u30FC\u30C8\u30BF\u30A4\u30D7\u306F\u540D\u524D\u4ED8\u304D\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3068\u3057\u3066\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8\u3055\u308C\u3001\u305D\u306E\u307E\u307E\u30A4\u30F3\u30DD\u30FC\u30C8\u3059\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 \u3053\u308C\u3089\u306E\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306F\u901A\u5E38\u306EVue\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3067\u3059\u304C\u3001\u305D\u308C\u3092\u62E1\u5F35\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002

vue-chartjs\u306E\u80CC\u5F8C\u306B\u3042\u308B\u8003\u3048\u65B9\u306F\u3001\u6700\u5927\u9650\u306E\u67D4\u8EDF\u6027\u3068\u62E1\u5F35\u6027\u3092\u6301\u3061\u3001\u4F7F\u3044\u3084\u3059\u3044\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u63D0\u4F9B\u3059\u308B\u3053\u3068\u3067\u3059\u3002 \u3053\u308C\u3092\u5B9F\u73FE\u3059\u308B\u306B\u306F\u3001\u72EC\u81EA\u306E Chart Component \u3092\u4F5C\u6210\u3057\u3001\u305D\u308C\u3092vue-chartjs\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3057\u3066\u63D0\u4F9B\u3059\u308B\u3088\u3046\u306B\u62E1\u5F35\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002

\u62E1\u5F35\u3059\u308B\u3053\u3068\u3067\u3001\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306E\u30E1\u30BD\u30C3\u30C9\u3068\u30ED\u30B8\u30C3\u30AF\u306F\u3001\u72EC\u81EA\u306E\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306B\u30DE\u30FC\u30B8\u3055\u308C\u307E\u3059\u3002

\u6700\u521D\u306E\u30C1\u30E3\u30FC\u30C8\u306E\u4F5C\u6210

BaseChart\u3092\u30A4\u30F3\u30DD\u30FC\u30C8\u3057\u3066extend\u3057\u307E\u3059\u3002\u3053\u306E\u65B9\u6CD5\u3067\u7570\u306A\u308B\u30C7\u30FC\u30BF\u306E\u30C1\u30E3\u30FC\u30C8\u3092\u8868\u793A\u3059\u308B\u3068\u304D\u306B\u67D4\u8EDF\u6027\u304C\u5927\u5E45\u306B\u5411\u4E0A\u3057\u307E\u3059\u3002 \u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u30AB\u30D7\u30BB\u30EB\u5316\u3057\u3001\u30D7\u30ED\u30D1\u30C6\u30A3\u3092\u4F7F\u7528\u3057\u3066\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u5185\u306E\u30C7\u30FC\u30BF\u306B\u6E21\u3057\u305F\u308A\u3001\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u5185\u306B\u76F4\u63A5\u30C7\u30FC\u30BF\u3092\u8A18\u8FF0\u3059\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002\u305F\u3060\u3057\u76F4\u63A5\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u5185\u306B\u30C7\u30FC\u30BF\u3092\u8A18\u8FF0\u3057\u305F\u5834\u5408\u306F\u518D\u5229\u7528\u304C\u3067\u304D\u307E\u305B\u3093\u3002

\u30D1\u30C3\u30B1\u30FC\u30B8\u5168\u4F53\u307E\u305F\u306F\u5404\u30E2\u30B8\u30E5\u30FC\u30EB\u3092\u500B\u5225\u306B\u30A4\u30F3\u30DD\u30FC\u30C8\u3067\u304D\u307E\u3059\u3002 \u30A4\u30F3\u30DD\u30FC\u30C8\u3057\u305F\u3082\u306E\u3092 extends\uFF1A\u304B mixins\uFF1A[]\u3092\u4F7F\u3063\u3066\u6307\u5B9A\u3057\u307E\u3059\u3002 \u307E\u305F mounted()\u30D5\u30C3\u30AF\u3067\u3001 this.renderChart()\u3092\u547C\u3073\u51FA\u3057\u307E\u3059\u3002 \u3053\u308C\u3067\u30C1\u30E3\u30FC\u30C8\u30A4\u30F3\u30B9\u30BF\u30F3\u30B9\u304C\u4F5C\u6210\u3055\u308C\u307E\u3059\u3002

\xA0


\xA0

\xA0



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

TIP

extends: Bar \u307E\u305F\u306F mixins: [Bar] \u3069\u3061\u3089\u306E\u8A18\u8FF0\u65B9\u6CD5\u3067\u3082\u4F7F\u7528\u3067\u304D\u307E\u3059\u3002

\u30E1\u30BD\u30C3\u30C9this.renderChart\uFF08\uFF09\u306F\u3001Bar\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306B\u3088\u3063\u3066\u63D0\u4F9B\u3055\u308C\u30012\u3064\u306E\u30D1\u30E9\u30E1\u30FC\u30BF\u3092\u53D7\u3051\u4ED8\u3051\u3066\u3044\u307E\u3059\u3002 \u3069\u3061\u3089\u3082Object\u3067\u3059\u3002 \u6700\u521D\u306E\u3082\u306E\u306F\u8868\u793A\u3059\u308B\u30C7\u30FC\u30BF\u3067\u3001\u4E8C\u756A\u76EE\u306E\u3082\u306E\u306F\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u683C\u7D0D\u3059\u308B\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u3067\u3059\u3002

\u30C1\u30E3\u30FC\u30C8\u6BCE\u306B\u5FC5\u8981\u306A\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u69CB\u9020\u306F\u516C\u5F0F Chart.js docs\u3092\u30C1\u30A7\u30C3\u30AF\u3057\u3066\u304F\u3060\u3055\u3044\u3002

Vue \u30B7\u30F3\u30B0\u30EB\u30D5\u30A1\u30A4\u30EB\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8

\u672C\u30C9\u30AD\u30E5\u30E1\u30F3\u30C8\u306E\u307B\u3068\u3093\u3069\u306E\u4F8B\u306Fjavascript\u30D5\u30A1\u30A4\u30EB\u3092\u57FA\u306B\u8A18\u8FF0\u3055\u308C\u3066\u3044\u3066\u3001 .vue\u30D5\u30A1\u30A4\u30EB\u306E\u4F8B\u306F\u3042\u308A\u307E\u305B\u3093\u3002 \u3053\u308C\u306F\u3042\u306A\u305F\u304C\u3001\u305F\u3044\u3066\u3044\u5FC5\u8981\u306A\u306E\u306F <script>\u30D6\u30ED\u30C3\u30AF\u3060\u3051\u3060\u304B\u3089\u3067\u3059\u3002 \u3082\u3061\u308D\u3093 .vue\u30D5\u30A1\u30A4\u30EB\u3092\u4F7F\u3046\u3053\u3068\u3082\u3067\u304D\u307E\u3059\u3002

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 \u30BF\u30B0\u306F\u30DE\u30FC\u30B8\u3067\u304D\u307E\u305B\u3093

.vue\u30D5\u30A1\u30A4\u30EB\u306B<template>\u30BF\u30B0\u3092\u542B\u3081\u306A\u3044\u3067\u304F\u3060\u3055\u3044\u3002 Vue\u306F\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u30DE\u30FC\u30B8\u3059\u308B\u3053\u3068\u306F\u3067\u304D\u307E\u305B\u3093\u3002.vue\u30D5\u30A1\u30A4\u30EB\u306B\u7A7A\u306E <template>\u30BF\u30B0\u3092\u8FFD\u52A0\u3059\u308B\u3068\u3001Vue\u306F\u62E1\u5F35\u3055\u308C\u305F\u3082\u306E\u304B\u3089\u3067\u306F\u306A\u304F.vue\u306E\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u304B\u3089\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u53D6\u5F97\u3057\u307E\u3059\u3002\u305D\u306E\u7D50\u679C\u3001\u7A7A\u306E\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3068\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3059\u3002

\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u306E\u66F4\u65B0

Chart.js \u81EA\u8EAB\u3067\u306F\u30C7\u30FC\u30BF\u30BB\u30C3\u30C8\u3092\u5909\u66F4\u3057\u305F\u5834\u5408\u306B\u3001\u30E9\u30A4\u30D6\u30A2\u30C3\u30D7\u30C7\u30FC\u30C8\u306E\u6A5F\u80FD\u3092\u63D0\u4F9B\u3057\u3066\u3044\u307E\u305B\u3093\u3002 \u3057\u304B\u3057vue-chartjs\u306F\u3053\u308C\u3092\u5B9F\u73FE\u3059\u308B\u305F\u3081\u306B2\u3064\u306E mixin \u3092\u63D0\u4F9B\u3057\u307E\u3059\u3002

  • reactiveProp
  • reactiveData

\u4E21\u65B9\u306E\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u306F\u5B9F\u969B\u306B\u306F\u540C\u3058\u7D50\u679C\u3092\u9054\u6210\u3057\u307E\u3059\u3002 \u307B\u3068\u3093\u3069\u306E\u5834\u5408\u306F\u3001reactiveProp\u3092\u4F7F\u3044\u307E\u3059\u3002 \u3053\u306E\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u306F\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306E\u30ED\u30B8\u30C3\u30AF\u3092\u62E1\u5F35\u3057\u3001\u81EA\u52D5\u7684\u306B chartData\u3068\u3044\u3046\u540D\u524D\u306E\u30D7\u30ED\u30D1\u30C6\u30A3\u3092\u4F5C\u6210\u3057\u3001\u3053\u306E\u30D7\u30ED\u30D1\u30C6\u30A3\u306Bvue watch\u3092\u8FFD\u52A0\u3057\u307E\u3059\u3002 \u30C7\u30FC\u30BF\u304C\u5909\u66F4\u3055\u308C\u308B\u3068\u3001\u30C7\u30FC\u30BF\u30BB\u30C3\u30C8\u5185\u306E\u30C7\u30FC\u30BF\u3060\u3051\u304C\u5909\u66F4\u3055\u308C\u3066\u3044\u308C\u3070 update()\u3092\u3001\u65B0\u3057\u3044\u30C7\u30FC\u30BF\u30BB\u30C3\u30C8\u304C\u8FFD\u52A0\u3055\u308C\u3066\u3044\u308C\u3070 renderChart()\u3092\u547C\u3073\u51FA\u3057\u307E\u3059\u3002

ractiveData\u306F\u30D7\u30ED\u30D1\u30C6\u30A3\u3067\u306F\u306A\u3044\u30ED\u30FC\u30AB\u30EB\u306EchartData\u5909\u6570\u3092\u4F5C\u6210\u3057\u3001Watcher\u3092\u8FFD\u52A0\u3057\u307E\u3059\u3002 \u3053\u308C\u306F\u5358\u4E00\u76EE\u7684\u306E\u30C1\u30E3\u30FC\u30C8\u304C\u5FC5\u8981\u3067\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u5185\u3067API\u547C\u3073\u51FA\u3057\u3092\u884C\u3046\u5834\u5408\u306B\u306E\u307F\u5F79\u306B\u7ACB\u3061\u307E\u3059\u3002

\u4F8B

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

\u5236\u9650\u4E8B\u9805

\u6CE8\u610F\u4E8B\u9805\u5909\u66F4\u691C\u51FA\u306E\u6CE8\u610F\u4E8B\u9805vm.$watch

\u30A4\u30D9\u30F3\u30C8

\u30C7\u30FC\u30BF\u304C\u5909\u66F4\u3055\u308C\u308B\u3068\u3001\u30EA\u30A2\u30AF\u30C6\u30A3\u30D6\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u306F\u30A4\u30D9\u30F3\u30C8\u3092\u767A\u884C\u3057\u307E\u3059\u3002 \u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306E v\uFF1Aon\u3067\u305D\u308C\u3089\u3092\u53D7\u3051\u53D6\u308B\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 \u4EE5\u4E0B\u306E\u30A4\u30D9\u30F3\u30C8\u304C\u3042\u308A\u307E\u3059\u3002

  • chart:render - \u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u5B8C\u5168\u306B\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0\u3057\u305F\u3068\u304D
  • chart:destroy - \u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u30C1\u30E3\u30FC\u30C8\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u30A4\u30F3\u30B9\u30BF\u30F3\u30B9\u3092\u524A\u9664\u3057\u305F\u3068\u304D
  • chart:update - \u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u518D\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0\u306E\u4EE3\u308F\u308A\u306B\u66F4\u65B0\u3092\u3057\u305F\u3068\u304D
  • labels:update - labels\u304C\u30BB\u30C3\u30C8\u3055\u308C\u305F\u3068\u304D
  • xlabels:update - xLabels\u304C\u30BB\u30C3\u30C8\u3055\u308C\u305F\u3068\u304D
  • ylabels:update - yLabels\u304C\u30BB\u30C3\u30C8\u3055\u308C\u305F\u3068\u304D

\u30C8\u30E9\u30D6\u30EB\u30B7\u30E5\u30FC\u30C6\u30A3\u30F3\u30B0

\u73FE\u72B6\u3067\u306E\u30EA\u30A2\u30AF\u30C6\u30A3\u30D6\u30B7\u30B9\u30C6\u30E0\u306F\u9811\u5F37\u3067\u306F\u3042\u308A\u307E\u305B\u3093\u3002 \u30C7\u30FC\u30BF\u3092\u6E21\u3059\u305F\u3081\u306E\u30E6\u30FC\u30B9\u30B1\u30FC\u30B9\u3084\u65B9\u6CD5\u304C\u591A\u6570\u3042\u308B\u305F\u3081\u3001\u305D\u308C\u306B\u306F\u3044\u304F\u3064\u304B\u306E\u554F\u984C\u304C\u767A\u751F\u3059\u308B\u3053\u3068\u304C\u3042\u308A\u307E\u3059\u3002

\u30AA\u30D7\u30B7\u30E7\u30F3

options\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u306F\u4ECA\u306E\u3068\u3053\u308D\u30EA\u30A2\u30AF\u30C6\u30A3\u30D6\u3067\u306F\u3042\u308A\u307E\u305B\u3093\u3002 \u305D\u306E\u305F\u3081\u3001\u30C1\u30E3\u30FC\u30C8\u306E\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u52D5\u7684\u306B\u5909\u66F4\u3057\u3066\u3082\u3001\u305D\u308C\u3089\u306F\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u306B\u3088\u3063\u3066\u8A8D\u8B58\u3055\u308C\u307E\u305B\u3093\u3002

\u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u3092\u4F7F\u7528\u3057\u3066\u3044\u308B\u5834\u5408\u306F\u3001options\u3068\u3044\u3046\u30D7\u30ED\u30D1\u30C6\u30A3\u3068\u3057\u3066\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u6E21\u3059\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002 mixin\u304Cchart.js\u306Eupdate()\u30E1\u30BD\u30C3\u30C9\u3092\u547C\u3073\u51FA\u3059\u304B\u3001\u65B0\u3057\u3044\u30C1\u30E3\u30FC\u30C8\u3092\u7834\u68C4\u3057\u3066\u63CF\u753B\u3059\u308B\u969B\u306B\u3001\u3053\u308C\u306F\u91CD\u8981\u3067\u3059\u3002 \u30DF\u30C3\u30AF\u30B9\u30A4\u30F3\u304C\u65B0\u3057\u3044\u30C1\u30E3\u30FC\u30C8\u3092\u63CF\u753B\u3059\u308B\u3068\u304D\u3001this.renderChart(this.chartData\u3001this.options)\u3092\u547C\u3073\u51FA\u3057\u307E\u3059\u3002

\u3057\u304B\u3057\u3001\u30AA\u30D7\u30B7\u30E7\u30F3\u3092 mounted()\u30D5\u30C3\u30AF\u3067\u76F4\u63A5\u6E21\u3059\u3068\u3001\u305D\u308C\u3089\u306F\u5931\u308F\u308C\u307E\u3059\u3002

\u9593\u9055\u3063\u305F\u65B9\u6CD5







\xA0



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

\u6B63\u3057\u3044\u65B9\u6CD5







\xA0



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

\u72EC\u81EA\u306E\u30A6\u30A9\u30C3\u30C1\u30E3\u30FC

\uFF08\u65B0\u3057\u3044\u30C7\u30FC\u30BF\u3092\u30D7\u30C3\u30B7\u30E5\u3059\u308B\u306E\u3067\u306F\u306A\u304F\uFF09\u30C7\u30FC\u30BF\u3092\u305F\u304F\u3055\u3093\u5909\u66F4\u3059\u308B\u306E\u3067\u3042\u308C\u3070\u3001\u72EC\u81EA\u306E\u30A6\u30A9\u30C3\u30C1\u30E3\u30FC\u3092\u5B9F\u88C5\u3059\u308B\u306E\u304C\u4E00\u756A\u826F\u3044\u3084\u308A\u65B9\u3067\u3059\u3002 \u5FC5\u8981\u306B\u5FDC\u3058\u3066\u3001\u81EA\u5206\u3067 this.$data._chart.update()\u307E\u305F\u306F this.renderChart()\u3092\u547C\u3073\u51FA\u3059\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002

\u30B7\u30F3\u30D7\u30EB\u306Awatcher\u306E\u5B9F\u88C5\u4F8B:

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

\u4F8B

props\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8

\u76EE\u6A19\u306F\u518D\u5229\u7528\u53EF\u80FD\u306A\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u4F5C\u6210\u3059\u308B\u3053\u3068\u3067\u3059\u3002 \u3053\u306E\u76EE\u7684\u306E\u305F\u3081\u306B\u306F\u3001\u30AA\u30D7\u30B7\u30E7\u30F3\u3068\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u3092Vue.js\u306E props \u3068\u3057\u3066\u6E21\u3059\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002 \u3053\u306E\u3088\u3046\u306B\u3059\u308B\u3053\u3068\u3067\u3001\u30C1\u30E3\u30FC\u30C8\u81EA\u4F53\u306F\u30C7\u30FC\u30BF\u306E\u53D6\u5F97\u306B\u3064\u3044\u3066\u306F\u6C17\u306B\u305B\u305A\u3001\u8868\u793A\u306E\u307F\u306B\u6CE8\u529B\u3067\u304D\u307E\u3059\u3002

\u307E\u305A\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u4F5C\u6210\u3057\u307E\u3059\u3002

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

\u305D\u306E\u5F8C\u3001\u4F5C\u6210\u3057\u305F\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u89AA\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306B\u8FFD\u52A0\u3067\u304D\u307E\u3059\u3002

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

\u30ED\u30FC\u30AB\u30EB\u30C7\u30FC\u30BF\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8

\u72EC\u81EA\u306E\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3067\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u3092\u76F4\u63A5\u6271\u3046\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 \u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u5185\u306E\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u3092 renderChart()\u30E1\u30BD\u30C3\u30C9\u306B\u6E21\u3059\u3060\u3051\u3067\u3059\u3002

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

API\u304B\u3089\u53D6\u5F97\u3057\u305F\u30C7\u30FC\u30BF\u3092\u7528\u3044\u305F\u30C1\u30E3\u30FC\u30C8

\u4E00\u822C\u7684\u306B\u306F\u30C7\u30FC\u30BF\u3092\u53D6\u5F97\u3059\u308B\u305F\u3081\u306BAPI\u3092\u4F7F\u7528\u3059\u308B\u306E\u304C\u30D1\u30BF\u30FC\u30F3\u3067\u3057\u3087\u3046\u3002\u3057\u304B\u3057\u7559\u610F\u3059\u3079\u304D\u3053\u3068\u304C\u3044\u304F\u3064\u304B\u3042\u308A\u307E\u3059\u3002 \u6700\u3082\u4E00\u822C\u7684\u306A\u554F\u984C\u306F\u3001\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u76F4\u63A5\u30DE\u30A6\u30F3\u30C8\u3057\u3001\u975E\u540C\u671FAPI\u547C\u3073\u51FA\u3057\u304B\u3089\u30C7\u30FC\u30BF\u3092\u6E21\u3059\u3053\u3068\u3067\u3059\u3002 \u3053\u306E\u30A2\u30D7\u30ED\u30FC\u30C1\u3067\u306E\u554F\u984C\u70B9\u306F\u3001chart.js\u304C\u30C1\u30E3\u30FC\u30C8\u3092\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0\u3057\u3066\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u306B\u30A2\u30AF\u30BB\u30B9\u3057\u3088\u3046\u3068\u3057\u307E\u3059\u304C\u3001API\u547C\u3073\u51FA\u3057\u304C\u975E\u540C\u671F\u3060\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u3002 \u3053\u306E\u6642\u3001\u30C7\u30FC\u30BF\u304C\u5230\u7740\u3059\u308B\u524D\u306B\u3042\u306A\u305F\u306F\u30C1\u30E3\u30FC\u30C8\u3092\u8868\u793A\u3057\u3088\u3046\u3068\u3057\u3066\u3057\u307E\u3044\u307E\u3059\u3002

\u3053\u308C\u3092\u9632\u3050\u306B\u306F\u3001\u5358\u7D14\u306A v-if\u304C\u6700\u5584\u306E\u89E3\u6C7A\u7B56\u3067\u3059\u3002

\u30C7\u30FC\u30BF\u30D7\u30ED\u30D1\u30C6\u30A3\u3068\u30AA\u30D7\u30B7\u30E7\u30F3\u30D7\u30ED\u30D1\u30C6\u30A3\u3092\u4F7F\u7528\u3057\u3066\u30C1\u30E3\u30FC\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u4F5C\u6210\u3059\u308B\u3068\u3001\u30B3\u30F3\u30C6\u30CA\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u304B\u3089\u30C7\u30FC\u30BF\u3068\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u6E21\u3059\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002

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

\u305D\u308C\u304B\u3089\u3001\u3042\u306A\u305F\u306EAPI\u30B3\u30FC\u30EB\u307E\u305F\u306FVuex\u63A5\u7D9A\u3092\u51E6\u7406\u3059\u308B\u30B3\u30F3\u30C6\u30CA\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3092\u4F5C\u6210\u3057\u307E\u3059\u3002

ChartContainer.vue




\xA0




























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

\u52D5\u7684\u30B9\u30BF\u30A4\u30EB\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8

\u3042\u306A\u305F\u306F responsive\uFF1Atrue\u3092\u30BB\u30C3\u30C8\u3057\u3066\u5916\u5074\u306Ediv\u306B\u30A4\u30F3\u30E9\u30A4\u30F3\u30B9\u30BF\u30A4\u30EB\u3068\u3057\u3066\u9069\u7528\u3055\u308C\u308Bstyles\u30AA\u30D6\u30B8\u30A7\u30AF\u30C8\u3092\u6E21\u3059\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002 \u3053\u308C\u306B\u3088\u308A\u3001\u5916\u5074\u306E\u30B3\u30F3\u30C6\u30CA\u306E\u9AD8\u3055\u3068\u5E45\u3092\u52D5\u7684\u306B\u5909\u66F4\u3067\u304D\u307E\u3059\u3002 \u3053\u308C\u306Fchart.js\u306E\u30C7\u30D5\u30A9\u30EB\u30C8\u306E\u52D5\u4F5C\u3067\u306F\u3042\u308A\u307E\u305B\u3093\u3002 \u3053\u308C\u306B\u306F\u8A08\u7B97\u30D7\u30ED\u30D1\u30C6\u30A3\u3092\u4F7F\u7528\u3059\u308B\u306E\u304C\u6700\u5584\u3067\u3059\u3002

WARNING

position: relative\u3092\u30BB\u30C3\u30C8\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002

<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

\u5834\u5408\u306B\u3088\u3063\u3066\u306F\u3001\u30C7\u30D5\u30A9\u30EB\u30C8\u306EChart.js\u306B\u7528\u610F\u3055\u308C\u3066\u3044\u308B\u30C1\u30E3\u30FC\u30C8\u3092\u62E1\u5F35\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002 \u30C7\u30D5\u30A9\u30EB\u30C8\u30C1\u30E3\u30FC\u30C8\u3092\u62E1\u5F35\u304A\u3088\u3073\u5909\u66F4\u3059\u308B\u65B9\u6CD5\u3001\u3042\u308B\u3044\u306F\u72EC\u81EA\u306E\u30C1\u30E3\u30FC\u30C8\u30BF\u30A4\u30D7\u3092\u4F5C\u6210\u3059\u308B\u65B9\u6CD5\u306F\u3001\u305F\u304F\u3055\u3093\u306E\u4F8B\u304C\u3042\u308A\u307E\u3059\u3002

vue-chartjs\u3067\u3082\u3001\u3053\u308C\u3068\u307B\u307C\u540C\u3058\u65B9\u6CD5\u3067\u884C\u3046\u3053\u3068\u304C\u3067\u304D\u307E\u3059\u3002

// 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 () {
+    // ....
+  }
+}
+

\u30EA\u30BD\u30FC\u30B9

vue-chartjs\u306E\u4F7F\u3044\u65B9\u306B\u95A2\u3059\u308B\u30C1\u30E5\u30FC\u30C8\u30EA\u30A2\u30EB\u306E\u3088\u3046\u306A\u3044\u304F\u3064\u304B\u306E\u30EA\u30BD\u30FC\u30B9\u304C\u3042\u308A\u307E\u3059\u3002

`,85),e=[o];function c(l,r,u,i,k,d){return s(),a("div",null,e)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/ja_guide_index.md.8194d779.lean.js b/assets/ja_guide_index.md.8194d779.lean.js new file mode 100644 index 00000000..fcd16e4a --- /dev/null +++ b/assets/ja_guide_index.md.8194d779.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u6700\u521D\u306B","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u521D\u3081\u306B","slug":"\u521D\u3081\u306B"},{"level":2,"title":"\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB","slug":"\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"\u30D6\u30E9\u30A6\u30B6","slug":"\u30D6\u30E9\u30A6\u30B6"},{"level":2,"title":"\u7D71\u5408","slug":"\u7D71\u5408"},{"level":2,"title":"\u6700\u521D\u306E\u30C1\u30E3\u30FC\u30C8\u306E\u4F5C\u6210","slug":"\u6700\u521D\u306E\u30C1\u30E3\u30FC\u30C8\u306E\u4F5C\u6210"},{"level":3,"title":"Vue \u30B7\u30F3\u30B0\u30EB\u30D5\u30A1\u30A4\u30EB\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8","slug":"vue-\u30B7\u30F3\u30B0\u30EB\u30D5\u30A1\u30A4\u30EB\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8"},{"level":2,"title":"\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u306E\u66F4\u65B0","slug":"\u30C1\u30E3\u30FC\u30C8\u30C7\u30FC\u30BF\u306E\u66F4\u65B0"},{"level":3,"title":"\u4F8B","slug":"\u4F8B"},{"level":3,"title":"\u30A4\u30D9\u30F3\u30C8","slug":"\u30A4\u30D9\u30F3\u30C8"},{"level":3,"title":"\u30C8\u30E9\u30D6\u30EB\u30B7\u30E5\u30FC\u30C6\u30A3\u30F3\u30B0","slug":"\u30C8\u30E9\u30D6\u30EB\u30B7\u30E5\u30FC\u30C6\u30A3\u30F3\u30B0"},{"level":2,"title":"\u4F8B","slug":"\u4F8B-1"},{"level":3,"title":"props\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8","slug":"props\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"\u30ED\u30FC\u30AB\u30EB\u30C7\u30FC\u30BF\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8","slug":"\u30ED\u30FC\u30AB\u30EB\u30C7\u30FC\u30BF\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"API\u304B\u3089\u53D6\u5F97\u3057\u305F\u30C7\u30FC\u30BF\u3092\u7528\u3044\u305F\u30C1\u30E3\u30FC\u30C8","slug":"api\u304B\u3089\u53D6\u5F97\u3057\u305F\u30C7\u30FC\u30BF\u3092\u7528\u3044\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"\u52D5\u7684\u30B9\u30BF\u30A4\u30EB\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8","slug":"\u52D5\u7684\u30B9\u30BF\u30A4\u30EB\u3092\u4F7F\u7528\u3057\u305F\u30C1\u30E3\u30FC\u30C8"},{"level":3,"title":"Custom / New Charts","slug":"custom-new-charts"},{"level":2,"title":"\u30EA\u30BD\u30FC\u30B9","slug":"\u30EA\u30BD\u30FC\u30B9"}],"relativePath":"ja/guide/index.md","lastUpdated":1690983419000}',p={},o=t("",85),e=[o];function c(l,r,u,i,k,d){return s(),a("div",null,e)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/ja_index.md.76baad4c.js b/assets/ja_index.md.76baad4c.js new file mode 100644 index 00000000..c5a92086 --- /dev/null +++ b/assets/ja_index.md.76baad4c.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const u='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"\u521D\u3081\u306B \u2192","actionLink":"/ja/guide/","features":[{"title":"\u7C21\u5358","details":"\u521D\u5FC3\u8005\u306B\u3082\u30D7\u30ED\u306B\u3082\u7C21\u5358\u306B\u59CB\u3081\u3089\u308C\u308B \u{1F64C}"},{"title":"\u62E1\u5F35\u6027","details":"\u30B7\u30F3\u30D7\u30EB\u306B\u4F7F\u3048\u3066\u3001\u62E1\u5F35\u3082\u7C21\u5358 \u{1F4AA}"},{"title":"\u5F37\u529B","details":"chart.js\u306E\u30D5\u30EB\u30D1\u30EF\u30FC\u3092\u6301\u3063\u3066\u3044\u308B \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"ja/index.md","lastUpdated":1690983419000}',r={};function s(i,o,c,n,d,p){return a(),t("div")}var m=e(r,[["render",s]]);export{u as __pageData,m as default}; diff --git a/assets/ja_index.md.76baad4c.lean.js b/assets/ja_index.md.76baad4c.lean.js new file mode 100644 index 00000000..c5a92086 --- /dev/null +++ b/assets/ja_index.md.76baad4c.lean.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const u='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"\u521D\u3081\u306B \u2192","actionLink":"/ja/guide/","features":[{"title":"\u7C21\u5358","details":"\u521D\u5FC3\u8005\u306B\u3082\u30D7\u30ED\u306B\u3082\u7C21\u5358\u306B\u59CB\u3081\u3089\u308C\u308B \u{1F64C}"},{"title":"\u62E1\u5F35\u6027","details":"\u30B7\u30F3\u30D7\u30EB\u306B\u4F7F\u3048\u3066\u3001\u62E1\u5F35\u3082\u7C21\u5358 \u{1F4AA}"},{"title":"\u5F37\u529B","details":"chart.js\u306E\u30D5\u30EB\u30D1\u30EF\u30FC\u3092\u6301\u3063\u3066\u3044\u308B \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"ja/index.md","lastUpdated":1690983419000}',r={};function s(i,o,c,n,d,p){return a(),t("div")}var m=e(r,[["render",s]]);export{u as __pageData,m as default}; diff --git a/assets/migration-guides_index.md.c5c02963.js b/assets/migration-guides_index.md.c5c02963.js new file mode 100644 index 00000000..84181435 --- /dev/null +++ b/assets/migration-guides_index.md.c5c02963.js @@ -0,0 +1,118 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"Migration from v4 to v5","description":"","frontmatter":{},"headers":[{"level":2,"title":"Migration from v4 to v5","slug":"migration-from-v4-to-v5"},{"level":3,"title":"ESM","slug":"esm"},{"level":3,"title":"API changes","slug":"api-changes"},{"level":2,"title":"Migration from v3 to v4","slug":"migration-from-v3-to-v4"},{"level":3,"title":"Tree-shaking","slug":"tree-shaking"},{"level":3,"title":"Changing the creation of Charts","slug":"changing-the-creation-of-charts"},{"level":3,"title":"New reactivity system","slug":"new-reactivity-system"},{"level":2,"title":"Migration from vue-chart-3","slug":"migration-from-vue-chart-3"},{"level":3,"title":"Uninstall vue-chart-3","slug":"uninstall-vue-chart-3"},{"level":3,"title":"Install vue-chartjs","slug":"install-vue-chartjs"},{"level":3,"title":"Change component import path","slug":"change-component-import-path"},{"level":3,"title":"Rename components","slug":"rename-components"},{"level":3,"title":"Rename props","slug":"rename-props"}],"relativePath":"migration-guides/index.md","lastUpdated":1690983419000}',p={},e=t(`

Migration from v4 to v5

With v5, this library introduces a number of breaking changes

ESM

v5.0

Chart.js v4 and vue-chartjs v5 are ESM-only packages. To use them in your project, it also should be ESM:

// package.json
+{
+  "type": "module"
+}
+

If you are experiencing this problem with Jest, you should follow this doc to enable ESM support. Or, we can recommend you migrate to Vitest. Vitest has ESM support out of the box and has almost the same API as Jest. Here is our example of migration.

v5.1

Chart.js v4.1 and vue-chartjs v5.1 have restored the CommonJS support.

API changes

  • chartData props were renamed to data
  • chartOptions props were renamed to options
  • unknown props will fall through to the canvas element.
  • generateChart were refactored and renamed to createTypedChart
  • Vue.js < 2.7 is no longer supported. If you want to use vue-chartjs with Vue < 2.7 you have to lock your version to 4.x.

Migration from v3 to v4

With v4, this library introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.

v4 is fully compatible with Chart.js v3.

Tree-shaking

v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

For a list of all the available items to import, see Chart.js docs.

v3:

import { Bar } from 'vue-chartjs'
+

v4 \u2014 lazy way:

import 'chart.js/auto';
+import { Bar } from 'vue-chartjs'
+

v4 \u2014 tree-shakable way:

import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+

Using the "lazy way" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.

Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.

import { Pie } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
+

Changing the creation of Charts

In v3, you needed to import the component, and then either use extends or mixins and add it.

v3:

// BarChart.js
+import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['January', 'February', 'March'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12]
+        }
+      ]
+    })
+  }
+}
+
<template>
+  <BarChart />
+</template>
+
+<script>
+import BarChart from 'path/to/component/BarChart'
+
+export default {
+  name: 'DataPage',
+  components: { BarChart }
+}
+</script>
+

In v4, you need to import the component, pass props to it, and use Chart component as a standard Vue component.

<template>
+  <Bar :chart-data="chartData" />
+</template>
+
+<script>
+// DataPage.vue
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20, 12]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+

New reactivity system

v3 does not update or re-render the chart if new data is passed. You needed to use reactiveProp and reactiveData mixins for that.

v3:

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

v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed. Mixins have been removed.

v4:

<template>
+  <Bar :chart-data="chartData" />
+</template>
+
+<script>
+// DataPage.vue
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+      chartData() { return /* mutable chart data */ }
+    }
+}
+</script>
+

Migration from vue-chart-3

Uninstall vue-chart-3 

pnpm rm vue-chart-3
+# or
+yarn remove vue-chart-3
+# or
+npm uninstall vue-chart-3
+

Install vue-chartjs 

pnpm add vue-chartjs
+# or
+yarn add vue-chartjs
+# or
+npm i vue-chartjs
+

Change component import path

For Vue 2.7 and Vue 3 projects:

import { /* component */ } from 'vue-chartjs'
+

For Vue 2 (<2.7) projects:

import { /* component */ } from 'vue-chartjs/legacy'
+

Rename components

  • BarChart to Bar
  • DoughnutChart to Doughnut
  • LineChart to Line
  • PieChart to Pie
  • PolarAreaChart to PolarArea
  • RadarChart to Radar
  • BubbleChart to Bubble
  • ScatterChart to Scatter

Rename props

  • options to chartOptions
`,54),o=[e];function c(r,l,i,u,k,d){return s(),a("div",null,o)}var m=n(p,[["render",c]]);export{g as __pageData,m as default}; diff --git a/assets/migration-guides_index.md.c5c02963.lean.js b/assets/migration-guides_index.md.c5c02963.lean.js new file mode 100644 index 00000000..738ab724 --- /dev/null +++ b/assets/migration-guides_index.md.c5c02963.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"Migration from v4 to v5","description":"","frontmatter":{},"headers":[{"level":2,"title":"Migration from v4 to v5","slug":"migration-from-v4-to-v5"},{"level":3,"title":"ESM","slug":"esm"},{"level":3,"title":"API changes","slug":"api-changes"},{"level":2,"title":"Migration from v3 to v4","slug":"migration-from-v3-to-v4"},{"level":3,"title":"Tree-shaking","slug":"tree-shaking"},{"level":3,"title":"Changing the creation of Charts","slug":"changing-the-creation-of-charts"},{"level":3,"title":"New reactivity system","slug":"new-reactivity-system"},{"level":2,"title":"Migration from vue-chart-3","slug":"migration-from-vue-chart-3"},{"level":3,"title":"Uninstall vue-chart-3","slug":"uninstall-vue-chart-3"},{"level":3,"title":"Install vue-chartjs","slug":"install-vue-chartjs"},{"level":3,"title":"Change component import path","slug":"change-component-import-path"},{"level":3,"title":"Rename components","slug":"rename-components"},{"level":3,"title":"Rename props","slug":"rename-props"}],"relativePath":"migration-guides/index.md","lastUpdated":1690983419000}',p={},e=t("",54),o=[e];function c(r,l,i,u,k,d){return s(),a("div",null,o)}var m=n(p,[["render",c]]);export{g as __pageData,m as default}; diff --git a/assets/pt-br_api_index.md.e70924fe.js b/assets/pt-br_api_index.md.e70924fe.js new file mode 100644 index 00000000..5df6b91f --- /dev/null +++ b/assets/pt-br_api_index.md.e70924fe.js @@ -0,0 +1,41 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"Refer\xEAncia de codifica\xE7\xE3o","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"Eventos","slug":"eventos"},{"level":2,"title":"M\xE9todos Globais","slug":"metodos-globais"},{"level":3,"title":"generateChart","slug":"generatechart"},{"level":2,"title":"M\xE9todos de inst\xE2ncia","slug":"metodos-de-instancia"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"addPlugin","slug":"addplugin"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"Objeto Chart.js","slug":"objeto-chart-js"},{"level":2,"title":"Canvas","slug":"canvas"}],"relativePath":"pt-br/api/index.md","lastUpdated":1690983419000}',e={},o=t(`

Refer\xEAncia de codifica\xE7\xE3o

Props

Existem alguns props b\xE1sicas definidas nos componentes fornecidos pelo vue-chartjs. Porque voc\xEA os estende, eles s\xE3o invis\xEDveis, mas voc\xEA pode substitu\xED-los:

PropDescri\xE7\xE3o
widthlargura do gr\xE1fico
heightaltura do gr\xE1fico
chart-idId da tela
css-classesString com classes css para a div circundante
stylesObjeto com estilos css para o div cont\xEAiner circundante
pluginsArray com plugins chartjs

Eventos

Se o mixin reactiveData ou reactiveProp estiver anexado, os seguintes eventos ser\xE3o emitidos:

EventoDescri\xE7\xE3o
chart:renderse o mixin executar um renderizador completo
chart:destroyse o mixin excluir a inst\xE2ncia do objeto de gr\xE1fico
chart:updatese o mixin executar uma atualiza\xE7\xE3o em vez de uma nova renderiza\xE7\xE3o
labels:updatese novos labals foram definidos
xlabels:updatese novos xLabels foram definidos
ylabels:updatese novos yLabels foram definidos

M\xE9todos Globais

Os m\xE9todos globais precisam ser importados.

generateChart

  • Tipo: Function
  • Argumentos: chart-id, chart-type
  • Uso:
import { generateChart } from "vue-chartjs";
+// O primeiro argumento \xE9 o ID do gr\xE1fico, depois o tipo de gr\xE1fico.
+const CustomLine = generateChart("custom-line", "LineWithLine");
+

M\xE9todos de inst\xE2ncia

Os m\xE9todos de inst\xE2ncia podem ser usados \u200B\u200Bdentro do componente do gr\xE1fico.

generateLegend()

Fun\xE7\xE3o auxiliar para gerar uma legenda HTML.

  • Tipo: Function
  • Argumentos: none
  • Uso:










\xA0




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

No Chart.js, voc\xEA pode definir plugins globais e embutidos. Os plug-ins globais est\xE3o funcionando sem problemas com o vue-chartjs como descrito no Chart.js docs.

Se voc\xEA deseja adicionar plug-ins embutidos, vue-chartjs exp\xF5e um m\xE9todo auxiliar chamado addPlugin() Voc\xEA deve chamar addPlugin() antes do m\xE9todo renderChart().

  • Tipo: Function
  • Argumentos: Array de Plugins
  • Uso:
mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ...
+    }
+  })
+}
+

renderChart()

Cria uma inst\xE2ncia Chart.js e renderiza o gr\xE1fico.

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

Objeto Chart.js

Voc\xEA pode acessar o objeto Chart.js dentro do componente do gr\xE1fico com this.$data._chart

Canvas

Voc\xEA pode acessar canvas com this.$refs.canvas

`,31),p=[o];function c(r,i,d,l,u,k){return s(),a("div",null,p)}var m=n(e,[["render",c]]);export{g as __pageData,m as default}; diff --git a/assets/pt-br_api_index.md.e70924fe.lean.js b/assets/pt-br_api_index.md.e70924fe.lean.js new file mode 100644 index 00000000..4feb626e --- /dev/null +++ b/assets/pt-br_api_index.md.e70924fe.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"Refer\xEAncia de codifica\xE7\xE3o","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"Eventos","slug":"eventos"},{"level":2,"title":"M\xE9todos Globais","slug":"metodos-globais"},{"level":3,"title":"generateChart","slug":"generatechart"},{"level":2,"title":"M\xE9todos de inst\xE2ncia","slug":"metodos-de-instancia"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"addPlugin","slug":"addplugin"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"Objeto Chart.js","slug":"objeto-chart-js"},{"level":2,"title":"Canvas","slug":"canvas"}],"relativePath":"pt-br/api/index.md","lastUpdated":1690983419000}',e={},o=t("",31),p=[o];function c(r,i,d,l,u,k){return s(),a("div",null,p)}var m=n(e,[["render",c]]);export{g as __pageData,m as default}; diff --git a/assets/pt-br_guide_index.md.2bb553a6.js b/assets/pt-br_guide_index.md.2bb553a6.js new file mode 100644 index 00000000..abbf874c --- /dev/null +++ b/assets/pt-br_guide_index.md.2bb553a6.js @@ -0,0 +1,259 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const h='{"title":"Come\xE7ando","description":"","frontmatter":{},"headers":[{"level":2,"title":"Introdu\xE7\xE3o","slug":"introducao"},{"level":2,"title":"Instala\xE7\xE3o","slug":"instalacao"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"Navegador","slug":"navegador"},{"level":2,"title":"Integra\xE7\xE3o","slug":"integracao"},{"level":2,"title":"Criando seu primeiro Gr\xE1fico","slug":"criando-seu-primeiro-grafico"},{"level":3,"title":"Componentes de arquivo \xFAnico do Vue","slug":"componentes-de-arquivo-unico-do-vue"},{"level":2,"title":"Atualizando Gr\xE1ficos","slug":"atualizando-graficos"},{"level":3,"title":"Exemplo","slug":"exemplo"},{"level":3,"title":"Eventos","slug":"eventos"},{"level":3,"title":"Solu\xE7\xE3o de problemas","slug":"solucao-de-problemas"},{"level":2,"title":"Exemplos","slug":"exemplos"},{"level":3,"title":"Gr\xE1fico com props","slug":"grafico-com-props"},{"level":3,"title":"Gr\xE1fico com dados locais","slug":"grafico-com-dados-locais"},{"level":3,"title":"Gr\xE1fico com dados da API","slug":"grafico-com-dados-da-api"},{"level":3,"title":"Gr\xE1fico com estilos din\xE2micos","slug":"grafico-com-estilos-dinamicos"},{"level":3,"title":"Personalizados / Novos Gr\xE1ficos","slug":"personalizados-novos-graficos"},{"level":2,"title":"Recursos","slug":"recursos"}],"relativePath":"pt-br/guide/index.md","lastUpdated":1690983419000}',o={},p=t(`

Come\xE7ando

vue-chartjs \xE9 um pacote para Chart.js no Vue. Com ele voc\xEA pode criar facilmente componentes de \u200Bgr\xE1ficos reutiliz\xE1veis.

Introdu\xE7\xE3o

vue-chartjs permite voc\xEA usar Chart.js sem muito aborrecimento dentro do Vue. \xC9 perfeito para pessoas que precisam de gr\xE1ficos simples em funcionamento o mais r\xE1pido poss\xEDvel.

Abstrai a l\xF3gica b\xE1sica, mas exp\xF5e o objeto Chart.js para oferecer a m\xE1xima flexibilidade.

Instala\xE7\xE3o

NPM

Voc\xEA pode instalar o vue-chartjs atrav\xE9s do npm ou yarn. No entanto, voc\xEA tamb\xE9m precisa adicionar o chart.js como uma depend\xEAncia ao seu projeto, porque o Chart.js \xE9 um parDeDepend\xEAncia. Dessa forma, voc\xEA tem total controle sobre o versionamento do Chart.js.

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

Dica

Se voc\xEA estiver utilizando vue 1.x por favor use a tag legacy. No entanto, a vers\xE3o 1 do Vue n\xE3o \xE9 mais mantida.

yarn add vue-chartjs@legacy

Voc\xEA tamb\xE9m pode usar vue-chartjs diretamente no navegador via CDN. Primeiro, adicione o script do Chart.js, e depois adicione o script vue-chartjs.

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

Integra\xE7\xE3o

Todo tipo de gr\xE1fico dispon\xEDvel em Chart.js \xE9 exportado como um componente nomeado e pode ser importado como tal. Esses componentes s\xE3o componentes normais do Vue, no entanto, voc\xEA precisa estend\xEA-lo com extend.

A ideia por tr\xE1s do vue-chartjs \xE9 fornecer componentes f\xE1ceis de usar, com m\xE1xima flexibilidade e extensibilidade. Para alcan\xE7ar isto, voc\xEA precisa criar o seu pr\xF3prio Componente de gr\xE1fico e estend\xEA-lo com os componentes vue-chartjs fornecidos.

Dessa forma, os m\xE9todos e a l\xF3gica nos componentes do gr\xE1fico s\xE3o mesclados no seu pr\xF3prio componente de gr\xE1fico.

Criando seu primeiro Gr\xE1fico

primeiro, voc\xEA precisa importar o gr\xE1fico base e estend\xEA-lo. Isso oferece mais flexibilidade ao trabalhar com dados diferentes. Voc\xEA pode encapsular seus componentes e usar objetos para passar dados, ou voc\xEA pode inseri-los diretamente dentro do componente. No entanto, seu componente n\xE3o \xE9 reutiliz\xE1vel dessa maneira.

Voc\xEA pode importar o pacote inteiro ou cada m\xF3dulo individualmente. Ent\xE3o, voc\xEA precisa usar extends: ou mixins:[]. Depois, no gancho mounted(), chame this.renderChart(). Isso criar\xE1 sua inst\xE2ncia do gr\xE1fico.

\xA0


\xA0

\xA0



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

Dica

Voc\xEA pode usar extends: Bar ou mixins: [Bar]

O m\xE9todo this.renderChart() \xE9 fornecido pelo componente Bar e aceita dois par\xE2metros: ambos s\xE3o objetos. O primeiro s\xE3o os dados do gr\xE1fico, e o segundo \xE9 um objeto de op\xE7\xF5es.

Confira o oficial Chart.js docs para ver a estrutura do objeto que voc\xEA precisa fornecer.

Componentes de arquivo \xFAnico do Vue

A maioria dos exemplos nos documentos \xE9 baseada em arquivos JavaScript e n\xE3o em arquivos .vue. Isso ocorre porque, principalmente, voc\xEA precisar\xE1 apenas do bloco <script>. No entanto, voc\xEA tamb\xE9m pode usar componentes single-file .vue.

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

A tag template n\xE3o pode ser mesclada

N\xE3o inclua a tag <template> em seus componentes single-file .vue. Vue pode n\xE3o mesclar templates. Se voc\xEA adicionar uma tag <template> vazia, o Vue pegar\xE1 o modelo do seu componente e n\xE3o do estendido, o que resultar\xE1 em um template vazio e erros inesperados.

Atualizando Gr\xE1ficos

Chart.js n\xE3o fornece uma atualiza\xE7\xE3o ao vivo se voc\xEA alterar os conjuntos de dados. No entanto, vue-chartjs fornece dois mixins para atingir esse objetivo:

  • reactiveProp
  • reactiveData

Ambos os mixins alcan\xE7am o mesmo resultado. Na maioria das vezes voc\xEA usar\xE1 reactiveProp. Ele estende a l\xF3gica do seu componente de gr\xE1fico e cria automaticamente um objeto chamado chartData e adiciona um vue watch neste objeto. Na muta\xE7\xE3o de dados, ele chamar\xE1 update() se os dados dentro dos conjuntos de dados foram alterados, ou renderChart() se novos conjuntos de dados foram adicionados.

reactiveData simplesmente cria uma vari\xE1vel local chartData (o que n\xE3o \xE9 um objeto!) e adiciona um observador. Isso \xE9 \xFAtil apenas se voc\xEA precisar de gr\xE1ficos de finalidade \xFAnica ou precisar de uma chamada de API dentro do componente do gr\xE1fico.

Exemplo

LineChart.js

import { Line, mixins } from "vue-chartjs";
+const { reactiveProp } = mixins;
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ["options"],
+  mounted() {
+    // this.chartData \xE9 criado no mixin.
+    // Se voc\xEA deseja passar op\xE7\xF5es, crie um objeto de op\xE7\xF5es locais
+    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>
+

Limita\xE7\xF5es

CaveatsChange-Detection-Caveatsvm.$watch

Eventos

Esses mixins reativos emitem eventos se os dados forem alterados. Voc\xEA pode ouvi-los com v:on no componente do gr\xE1fico. Os seguintes eventos est\xE3o dispon\xEDveis:

  • chart:render - se o mixin executar um renderizador completo
  • chart:destroy - se o mixin excluir a inst\xE2ncia do objeto de gr\xE1fico
  • chart:update - se o mixin executar uma atualiza\xE7\xE3o em vez de uma nova renderiza\xE7\xE3o
  • labels:update - se novos labels foram definidos
  • xlabels:update se novos xLabels foram definidos
  • ylabels:update - se novos yLabels foram definidos

Solu\xE7\xE3o de problemas

O sistema de reatividade em seu estado atual n\xE3o \xE9 robusto. Voc\xEA ter\xE1 v\xE1rios problemas com isso, porque existem muitos casos de uso e maneiras de passar seus dados.

Op\xE7\xF5es

O objeto options n\xE3o est\xE1 atualmente implementado reativamente. Portanto, se voc\xEA alterar dinamicamente as op\xE7\xF5es do gr\xE1fico, eles n\xE3o ser\xE3o reconhecidos pelo mixin. Se necess\xE1rio, voc\xEA pode criar um observador para destruir e renderizar novamente quando as op\xE7\xF5es do gr\xE1fico forem atualizadas.

Se voc\xEA estiver usando o mixin, precisar\xE1 passar suas op\xE7\xF5es como um objeto chamado options. Isso \xE9 importante porque o mixin chamar\xE1 o m\xE9todo update () do Chart.js ou destruir\xE1 e renderizar\xE1 um novo gr\xE1fico. Se o mixin renderizar um novo gr\xE1fico, ele chamar\xE1 this.renderChart(this.chartData, this.options).

Mas, se voc\xEA passar suas op\xE7\xF5es diretamente no seu gancho mounted(), elas ser\xE3o destru\xEDdas.

Maneira errada







\xA0



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

Maneira Certo







\xA0



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

Pr\xF3prio observador

Se voc\xEA transformar seus dados, muta\xE7\xE3o (em vez de enviar novos dados), \xE9 o melhor m\xE9todo, se voc\xEA implementar seu pr\xF3prio observador. Voc\xEA pode chamar this.$data._chart.update() ou this.renderChart() de forma independente, dependendo de suas necessidades.

Um observador simples seria:

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

Exemplos

Gr\xE1fico com props

Seu objetivo deve ser criar componentes reutiliz\xE1veis \u200B\u200Bdo gr\xE1fico. Para esse fim, voc\xEA deve utilizar as props do Vue.js para passar suas op\xE7\xF5es e seus dados do gr\xE1fico. Dessa forma, o pr\xF3prio gr\xE1fico n\xE3o possui uma opini\xE3o sobre a busca de dados e \xE9 apenas para apresenta\xE7\xE3o.

Primeiro, crie seu componente:

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);
+  }
+};
+

Depois disso, voc\xEA pode adicionar o componente do gr\xE1fico a um componente pai:

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

Gr\xE1fico com dados locais

Voc\xEA pode manipular os dados do gr\xE1fico diretamente em seu pr\xF3prio componente do gr\xE1fico. Voc\xEA s\xF3 precisa pass\xE1-lo para o m\xE9todo renderChart():

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

Gr\xE1fico com dados da API

Um padr\xE3o comum \xE9 usar uma API para recuperar seus dados. No entanto, existem algumas coisas para ter em mente. O problema mais comum \xE9 que voc\xEA monta o componente do gr\xE1fico diretamente e transmite dados de uma chamada de API ass\xEDncrona. O problema dessa abordagem \xE9 que o Chart.js tenta renderizar seu gr\xE1fico e acessar os dados do gr\xE1fico de forma sincronizada, para que o gr\xE1fico seja montado antes que os dados da API cheguem.

Para evitar isso, um simples v-if \xE9 a melhor solu\xE7\xE3o.

Crie seu componente de gr\xE1fico com um objeto de dados e op\xE7\xF5es, para que possamos transmitir nossos dados e op\xE7\xF5es de um componente de cont\xEAiner.

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);
+  }
+};
+

Em seguida, crie um componente de cont\xEAiner, que lida com a chamada da API ou a conex\xE3o vuex.

ChartContainer.vue



\xA0


























<template>
+  <div class="container">
+    <line-chart v-if="loaded" :chartdata="chartdata" :options="options" />
+  </div>
+</template>
+
+<script>
+  import LineChart from "./Chart.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>
+

Gr\xE1fico com estilos din\xE2micos

Voc\xEA pode definir responsive: true e passar um objeto de estilos que \xE9 aplicado como estilos embutidos para o exterior <div>. Dessa forma, voc\xEA pode alterar a altura e a largura do cont\xEAiner externo dinamicamente, o que n\xE3o \xE9 o comportamento padr\xE3o do Chart.js. \xC9 melhor usar propriedades computadas para isso.

Aviso

Voc\xEA precisa definir 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>
+

Personalizados / Novos Gr\xE1ficos

\xC0s vezes, voc\xEA precisa estender os gr\xE1ficos Chart.js padr\xE3o. Existem muitos exemplos sobre como estender e modificar os gr\xE1ficos padr\xE3o. Ou voc\xEA pode criar seu pr\xF3prio tipo de gr\xE1fico.

No vue-chartjs, voc\xEA pode fazer isso da mesma maneira:

// 1. Importar Chart.js para que voc\xEA possa usar o objeto Chart global
+import Chart from "chart.js";
+// 2. Importar o metodo \`generateChart()\` para criar o componente vue.
+import { generateChart } from "vue-chartjs";
+
+// 3. Estenda um dos gr\xE1ficos padr\xE3o
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({
+  /* personalize sua magica aqui */
+});
+
+// 4. Gere o componente vue-chartjs
+// O primeiro argumento \xE9 o ID do gr\xE1fico, depois o tipo de gr\xE1fico.
+const CustomLine = generateChart("custom-line", "LineWithLine");
+
+// 5. Estender o component CustomLine assim como voc\xEA faz com os gr\xE1ficos vue-chartjs padr\xE3o.
+
+export default {
+  extends: CustomLine,
+  mounted() {
+    // ....
+  }
+};
+

Recursos

Aqui est\xE3o alguns recursos, como tutoriais, sobre como usar vue-chartjs:

`,86),e=[p];function c(r,l,u,i,k,d){return s(),a("div",null,e)}var g=n(o,[["render",c]]);export{h as __pageData,g as default}; diff --git a/assets/pt-br_guide_index.md.2bb553a6.lean.js b/assets/pt-br_guide_index.md.2bb553a6.lean.js new file mode 100644 index 00000000..e1192e6f --- /dev/null +++ b/assets/pt-br_guide_index.md.2bb553a6.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const h='{"title":"Come\xE7ando","description":"","frontmatter":{},"headers":[{"level":2,"title":"Introdu\xE7\xE3o","slug":"introducao"},{"level":2,"title":"Instala\xE7\xE3o","slug":"instalacao"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"Navegador","slug":"navegador"},{"level":2,"title":"Integra\xE7\xE3o","slug":"integracao"},{"level":2,"title":"Criando seu primeiro Gr\xE1fico","slug":"criando-seu-primeiro-grafico"},{"level":3,"title":"Componentes de arquivo \xFAnico do Vue","slug":"componentes-de-arquivo-unico-do-vue"},{"level":2,"title":"Atualizando Gr\xE1ficos","slug":"atualizando-graficos"},{"level":3,"title":"Exemplo","slug":"exemplo"},{"level":3,"title":"Eventos","slug":"eventos"},{"level":3,"title":"Solu\xE7\xE3o de problemas","slug":"solucao-de-problemas"},{"level":2,"title":"Exemplos","slug":"exemplos"},{"level":3,"title":"Gr\xE1fico com props","slug":"grafico-com-props"},{"level":3,"title":"Gr\xE1fico com dados locais","slug":"grafico-com-dados-locais"},{"level":3,"title":"Gr\xE1fico com dados da API","slug":"grafico-com-dados-da-api"},{"level":3,"title":"Gr\xE1fico com estilos din\xE2micos","slug":"grafico-com-estilos-dinamicos"},{"level":3,"title":"Personalizados / Novos Gr\xE1ficos","slug":"personalizados-novos-graficos"},{"level":2,"title":"Recursos","slug":"recursos"}],"relativePath":"pt-br/guide/index.md","lastUpdated":1690983419000}',o={},p=t("",86),e=[p];function c(r,l,u,i,k,d){return s(),a("div",null,e)}var g=n(o,[["render",c]]);export{h as __pageData,g as default}; diff --git a/assets/pt-br_index.md.9ecbdeb8.js b/assets/pt-br_index.md.9ecbdeb8.js new file mode 100644 index 00000000..8d47c66f --- /dev/null +++ b/assets/pt-br_index.md.9ecbdeb8.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const m='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"Come\xE7ar \u2192","actionLink":"/pt-br/guide/","features":[{"title":"F\xE1cil","details":"F\xE1cil para ambos, iniciantes e profissionais \u{1F64C}"},{"title":"Extens\xEDvel","details":"Simples de usar, f\xE1cil de estender \u{1F4AA}"},{"title":"Poderoso","details":"Com todo o poder do chart.js \u{1F4AF}"}],"footer":"MIT Licenciado | Copyright \xA9 2018-presente Jakub Juszczak"},"headers":[],"relativePath":"pt-br/index.md","lastUpdated":1690983419000}',r={};function s(o,i,c,n,d,p){return a(),t("div")}var u=e(r,[["render",s]]);export{m as __pageData,u as default}; diff --git a/assets/pt-br_index.md.9ecbdeb8.lean.js b/assets/pt-br_index.md.9ecbdeb8.lean.js new file mode 100644 index 00000000..8d47c66f --- /dev/null +++ b/assets/pt-br_index.md.9ecbdeb8.lean.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const m='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"Come\xE7ar \u2192","actionLink":"/pt-br/guide/","features":[{"title":"F\xE1cil","details":"F\xE1cil para ambos, iniciantes e profissionais \u{1F64C}"},{"title":"Extens\xEDvel","details":"Simples de usar, f\xE1cil de estender \u{1F4AA}"},{"title":"Poderoso","details":"Com todo o poder do chart.js \u{1F4AF}"}],"footer":"MIT Licenciado | Copyright \xA9 2018-presente Jakub Juszczak"},"headers":[],"relativePath":"pt-br/index.md","lastUpdated":1690983419000}',r={};function s(o,i,c,n,d,p){return a(),t("div")}var u=e(r,[["render",s]]);export{m as __pageData,u as default}; diff --git a/assets/ru_api_index.md.57e22624.js b/assets/ru_api_index.md.57e22624.js new file mode 100644 index 00000000..155f1c31 --- /dev/null +++ b/assets/ru_api_index.md.57e22624.js @@ -0,0 +1,41 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u0421\u043F\u0440\u0430\u0432\u043E\u0447\u043D\u0438\u043A","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u0430","slug":"\u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430"},{"level":2,"title":"\u0421\u043E\u0431\u044B\u0442\u0438\u044F","slug":"\u0441\u043E\u0431\u044B\u0442\u0438\u044F"},{"level":2,"title":"\u0413\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u0442\u043E\u0434\u044B","slug":"\u0433n\u043E\u0431\u0430n\u044C\u043D\u044B\u0435-\u043C\u0435\u0442\u043E\u0434\u044B"},{"level":3,"title":"generateChart()","slug":"generatechart"},{"level":2,"title":"\u041C\u0435\u0442\u043E\u0434\u044B \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u0430","slug":"\u043C\u0435\u0442\u043E\u0434\u044B-\u044D\u043A\u0437\u0435\u043C\u043Fn\u044F\u0440\u0430"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"addPlugin()","slug":"addplugin"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"\u041E\u0431\u044A\u0435\u043A\u0442 Chart.js","slug":"\u043E\u0431\u044A\u0435\u043A\u0442-chart-js"},{"level":2,"title":"Canvas-\u044D\u043B\u0435\u043C\u0435\u043D\u0442","slug":"canvas-\u044Dn\u0435\u043C\u0435\u043D\u0442"}],"relativePath":"ru/api/index.md","lastUpdated":1690983419000}',e={},p=t(`

\u0421\u043F\u0440\u0430\u0432\u043E\u0447\u043D\u0438\u043A

\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u0430

\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0442 \u0431\u0430\u0437\u043E\u0432\u044B\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430, \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0451\u043D\u043D\u044B\u0435 \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430\u0445, \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u043D\u044B\u0445 vue-chartjs. \u0422\u0430\u043A \u043A\u0430\u043A \u0432\u044B extend\u0438\u0442\u0435 \u0438\u0445, \u043E\u043D\u0438 \u043D\u0435\u0432\u0438\u0434\u0438\u043C\u044B, \u043D\u043E \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u0438\u0445:

\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u043E\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435
width\u0448\u0438\u0440\u0438\u043D\u0430 \u0433\u0440\u0430\u0444\u0438\u043A\u0430
height\u0432\u044B\u0441\u043E\u0442\u0430 \u0433\u0440\u0430\u0444\u0438\u043A\u0430
chart-idid canvas-\u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430
css-classesString \u0441 \u043A\u043B\u0430\u0441\u0441\u0430\u043C\u0438 CSS \u0434\u043B\u044F \u0440\u043E\u0434\u0438\u0442\u0435\u043B\u044C\u0441\u043A\u043E\u0433\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 div
stylesObject \u0441\u043E \u0441\u0442\u0438\u043B\u044F\u043C\u0438 CSS \u0434\u043B\u044F \u0440\u043E\u0434\u0438\u0442\u0435\u043B\u044C\u0441\u043A\u043E\u0433\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 div
pluginsArray \u0441 \u043F\u043B\u0430\u0433\u0438\u043D\u0430\u043C\u0438 chartjs

\u0421\u043E\u0431\u044B\u0442\u0438\u044F

\u0415\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D reactiveData \u0438\u043B\u0438 reactiveProp \u043F\u0440\u0438\u0432\u044F\u0437\u0430\u043D, \u0431\u0443\u0434\u0443\u0442 \u0432\u044B\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 \u0441\u043E\u0431\u044B\u0442\u0438\u044F:

\u0421\u043E\u0431\u044B\u0442\u0438\u0435\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435
chart:render\u0435\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D \u043E\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043B\u044F\u0435\u0442 \u043F\u043E\u043B\u043D\u0443\u044E \u043F\u0435\u0440\u0435\u0440\u0438\u0441\u043E\u0432\u043A\u0443 \u0433\u0440\u0430\u0444\u0438\u043A\u0430
chart:destroy\u0435\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D \u0443\u0434\u0430\u043B\u044F\u0435\u0442 \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u0433\u0440\u0430\u0444\u0438\u043A\u0430
chart:update\u0435\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D \u043E\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043B\u044F\u0435\u0442 \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u0430 \u0432\u043C\u0435\u0441\u0442\u043E \u043F\u043E\u043B\u043D\u043E\u0439 \u043F\u0435\u0440\u0435\u0440\u0438\u0441\u043E\u0432\u043A\u0438
labels:update\u0435\u0441\u043B\u0438 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u044B \u043D\u043E\u0432\u044B\u0435 \u043C\u0435\u0442\u043A\u0438
xlabels:update\u0435\u0441\u043B\u0438 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u044B \u043D\u043E\u0432\u044B\u0435 \u043C\u0435\u0442\u043A\u0438 \u043F\u043E \u043E\u0441\u0438 x
ylabels:update\u0435\u0441\u043B\u0438 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u044B \u043D\u043E\u0432\u044B\u0435 \u043C\u0435\u0442\u043A\u0438 \u043F\u043E \u043E\u0441\u0438 y

\u0413\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u0442\u043E\u0434\u044B

\u0413\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u0442\u043E\u0434\u044B, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0434\u043E\u043B\u0436\u043D\u044B \u0431\u044B\u0442\u044C \u0438\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u044B

generateChart()

  • \u0422\u0438\u043F: Function
  • \u0410\u0440\u0433\u0443\u043C\u0435\u043D\u0442\u044B:: chart-id, chart-type
  • \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435:
import { generateChart } from 'vue-chartjs'
+// First argument is the chart-id, second the chart type.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+

\u041C\u0435\u0442\u043E\u0434\u044B \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u0430

\u041C\u0435\u0442\u043E\u0434\u044B \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u0430 \u043C\u043E\u0433\u0443\u0442 \u0431\u044B\u0442\u044C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u044B \u0432\u043D\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430

generateLegend()

\u0412\u0441\u043F\u043E\u043C\u043E\u0433\u0430\u0442\u0435\u043B\u044C\u043D\u0430\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u0434\u043B\u044F \u0433\u0435\u043D\u0435\u0440\u0430\u0446\u0438\u0438 HTML-\u043B\u0435\u0433\u0435\u043D\u0434\u044B

  • \u0422\u0438\u043F: Function
  • \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435:










\xA0




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()

\u0412 Chart.js \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0438 \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0435 \u043F\u043B\u0430\u0433\u0438\u043D\u044B. \u0413\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u043F\u043B\u0430\u0433\u0438\u043D\u044B \u0431\u0435\u0437 \u043F\u0440\u043E\u0431\u043B\u0435\u043C \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0441 vue-chartjs \u043A\u0430\u043A \u043E\u043F\u0438\u0441\u0430\u043D\u043E \u0432 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u0438 \u043A Chart.js.

\u0415\u0441\u043B\u0438 \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0435 \u043F\u043B\u0430\u0433\u0438\u043D\u044B, vue-chartjs \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0432\u0441\u043F\u043E\u043C\u043E\u0433\u0430\u0442\u0435\u043B\u044C\u043D\u044B\u0439 \u043C\u0435\u0442\u043E\u0434 addPlugin() \u0412\u0430\u043C \u043D\u0430\u0434\u043E \u0432\u044B\u0437\u0432\u0430\u0442\u044C addPlugin() \u043F\u0435\u0440\u0435\u0434 \u0432\u044B\u0437\u043E\u0432\u043E\u043C \u043C\u0435\u0442\u043E\u0434\u0430 renderChart().

  • \u0422\u0438\u043F: Function
  • \u0410\u0440\u0433\u0443\u043C\u0435\u043D\u0442\u044B:: Array \u043F\u043B\u0430\u0433\u0438\u043D\u043E\u0432
  • \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435:
mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+

renderChart()

\u0421\u043E\u0437\u0434\u0430\u0451\u0442 \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 Chart.js \u0438 \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u044B\u0432\u0430\u0435\u0442 \u0433\u0440\u0430\u0444\u0438\u043A.

  • \u0422\u0438\u043F: Function
  • \u0410\u0440\u0433\u0443\u043C\u0435\u043D\u0442\u044B:: Chart Data, Chart Options
  • \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435:
mounted () {
+  this.renderChart({
+    labels: ['\u042F\u043D\u0432\u0430\u0440\u044C', '\u0424\u0435\u0432\u0440\u0430\u043B\u044C'],
+    datasets: [
+      {
+        label: '\u041A\u0430\u043A\u0438\u0435-\u0442\u043E \u0434\u0430\u043D\u043D\u044B\u0435',
+        backgroundColor: '#f87979',
+        data: [40, 20]
+      }
+    ]},
+    {
+      responsive: true
+    }
+  )
+}
+

\u041E\u0431\u044A\u0435\u043A\u0442 Chart.js

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u043E\u0441\u0442\u0443\u043F \u043A \u043E\u0431\u044A\u0435\u043A\u0442\u0443 Chart.js \u0438\u0437 \u0432\u0430\u0448\u0435\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u043F\u043E\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043E\u043C this.$data._chart

Canvas-\u044D\u043B\u0435\u043C\u0435\u043D\u0442

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u043E\u0441\u0442\u0443\u043F \u043A canvas-\u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0443 \u043F\u043E\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043E\u043C this.$refs.canvas

`,31),o=[p];function c(r,l,d,i,u,k){return s(),a("div",null,o)}var y=n(e,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/ru_api_index.md.57e22624.lean.js b/assets/ru_api_index.md.57e22624.lean.js new file mode 100644 index 00000000..72ee461a --- /dev/null +++ b/assets/ru_api_index.md.57e22624.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u0421\u043F\u0440\u0430\u0432\u043E\u0447\u043D\u0438\u043A","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u0430","slug":"\u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430"},{"level":2,"title":"\u0421\u043E\u0431\u044B\u0442\u0438\u044F","slug":"\u0441\u043E\u0431\u044B\u0442\u0438\u044F"},{"level":2,"title":"\u0413\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u0442\u043E\u0434\u044B","slug":"\u0433n\u043E\u0431\u0430n\u044C\u043D\u044B\u0435-\u043C\u0435\u0442\u043E\u0434\u044B"},{"level":3,"title":"generateChart()","slug":"generatechart"},{"level":2,"title":"\u041C\u0435\u0442\u043E\u0434\u044B \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u0430","slug":"\u043C\u0435\u0442\u043E\u0434\u044B-\u044D\u043A\u0437\u0435\u043C\u043Fn\u044F\u0440\u0430"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"addPlugin()","slug":"addplugin"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"\u041E\u0431\u044A\u0435\u043A\u0442 Chart.js","slug":"\u043E\u0431\u044A\u0435\u043A\u0442-chart-js"},{"level":2,"title":"Canvas-\u044D\u043B\u0435\u043C\u0435\u043D\u0442","slug":"canvas-\u044Dn\u0435\u043C\u0435\u043D\u0442"}],"relativePath":"ru/api/index.md","lastUpdated":1690983419000}',e={},p=t("",31),o=[p];function c(r,l,d,i,u,k){return s(),a("div",null,o)}var y=n(e,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/ru_guide_index.md.2d993276.js b/assets/ru_guide_index.md.2d993276.js new file mode 100644 index 00000000..5f08f8f6 --- /dev/null +++ b/assets/ru_guide_index.md.2d993276.js @@ -0,0 +1,273 @@ +import{_ as n,c as s,o as a,a as t}from"./app.494b20fe.js";const g='{"title":"\u0414\u043B\u044F \u043D\u0430\u0447\u0438\u043D\u0430\u044E\u0449\u0438\u0445","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u0412\u0441\u0442\u0443\u043F\u043B\u0435\u043D\u0438\u0435","slug":"\u0432\u0441\u0442\u0443\u043Fn\u0435\u043D\u0438\u0435"},{"level":2,"title":"\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430","slug":"\u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"YARN","slug":"yarn"},{"level":3,"title":"\u0411\u0440\u0430\u0443\u0437\u0435\u0440","slug":"\u0431\u0440\u0430\u0443\u0437\u0435\u0440"},{"level":2,"title":"\u0418\u043D\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044F","slug":"\u0438\u043D\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044F"},{"level":2,"title":"\u0421\u043E\u0437\u0434\u0430\u043D\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043E \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430","slug":"\u0441\u043E\u0437\u0434\u0430\u043D\u0438\u0435-\u0432\u0430\u0448\u0435\u0433\u043E-\u043F\u0435\u0440\u0432\u043E\u0433\u043E-\u0433\u0440\u0430\u0444\u0438\u043A\u0430"},{"level":2,"title":"\u041E\u0434\u043D\u043E\u0444\u0430\u0439\u043B\u043E\u0432\u044B\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B Vue","slug":"\u043E\u0434\u043D\u043E\u0444\u0430\u0439n\u043E\u0432\u044B\u0435-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B-vue"},{"level":2,"title":"\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432","slug":"\u043E\u0431\u043D\u043E\u0432n\u0435\u043D\u0438\u0435-\u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432"},{"level":3,"title":"\u041F\u0440\u0438\u043C\u0435\u0440","slug":"\u043F\u0440\u0438\u043C\u0435\u0440"},{"level":3,"title":"\u0421\u043E\u0431\u044B\u0442\u0438\u044F","slug":"\u0441\u043E\u0431\u044B\u0442\u0438\u044F"},{"level":3,"title":"\u041E\u0442\u043B\u043E\u0432 \u043E\u0448\u0438\u0431\u043E\u043A","slug":"\u043E\u0442n\u043E\u0432-\u043E\u0448\u0438\u0431\u043E\u043A"},{"level":2,"title":"\u041F\u0440\u0438\u043C\u0435\u0440\u044B","slug":"\u043F\u0440\u0438\u043C\u0435\u0440\u044B"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A\u0438 \u0441\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u043C\u0438","slug":"\u0433\u0440\u0430\u0444\u0438\u043A\u0438-\u0441\u043E-\u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u043C\u0438"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u043B\u043E\u043A\u0430\u043B\u044C\u043D\u044B\u043C\u0438 \u0434\u0430\u043D\u043D\u044B\u043C\u0438","slug":"\u0433\u0440\u0430\u0444\u0438\u043A-\u0441-n\u043E\u043A\u0430n\u044C\u043D\u044B\u043C\u0438-\u0434\u0430\u043D\u043D\u044B\u043C\u0438"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u0441 API","slug":"\u0433\u0440\u0430\u0444\u0438\u043A-\u0441-\u0434\u0430\u043D\u043D\u044B\u043C\u0438-\u0441-api"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438\u043C\u0438 \u0441\u0442\u0438\u043B\u044F\u043C\u0438","slug":"\u0433\u0440\u0430\u0444\u0438\u043A-\u0441-\u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438\u043C\u0438-\u0441\u0442\u0438n\u044F\u043C\u0438"},{"level":3,"title":"\u041D\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0435 / \u043D\u043E\u0432\u044B\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u0438","slug":"\u043D\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0435-\u043D\u043E\u0432\u044B\u0435-\u0433\u0440\u0430\u0444\u0438\u043A\u0438"},{"level":2,"title":"\u0420\u0435\u0441\u0443\u0440\u0441\u044B","slug":"\u0440\u0435\u0441\u0443\u0440\u0441\u044B"}],"relativePath":"ru/guide/index.md","lastUpdated":1690983419000}',p={},o=t(`

\u0414\u043B\u044F \u043D\u0430\u0447\u0438\u043D\u0430\u044E\u0449\u0438\u0445

vue-chartjs - \u044D\u0442\u043E \u043E\u0431\u0451\u0440\u0442\u043A\u0430 \u0434\u043B\u044F Chart.js \u043D\u0430 Vue. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043B\u0435\u043A\u043E \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u043F\u0435\u0440\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B-\u0433\u0440\u0430\u0444\u0438\u043A\u0438.

\u0412\u0441\u0442\u0443\u043F\u043B\u0435\u043D\u0438\u0435

vue-chartjs \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u0435\u0442 \u0432\u0430\u043C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C Chart.js \u0431\u0435\u0437 \u0438\u0437\u043B\u0438\u0448\u043D\u0435\u0433\u043E \u0448\u0430\u043C\u0430\u043D\u0441\u0442\u0432\u0430 \u0441 Vue. \u0418\u0434\u0435\u0430\u043B\u044C\u043D\u043E \u0434\u043B\u044F \u043B\u044E\u0434\u0435\u0439, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0445\u043E\u0442\u044F\u0442 \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0449\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u0438 \u043A\u0430\u043A \u043C\u043E\u0436\u043D\u043E \u0431\u044B\u0441\u0442\u0440\u0435\u0435.

\u0411\u0438\u0437\u043D\u0435\u0441-\u043B\u043E\u0433\u0438\u043A\u0430 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u0435\u0442\u0441\u044F, \u0437\u0430\u0442\u043E \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0434\u043E\u0441\u0442\u0443\u043F \u043A \u043E\u0431\u044A\u0435\u043A\u0442\u0430\u043C Chart.js \u0434\u043B\u044F \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E\u0439 \u0433\u0438\u0431\u043A\u043E\u0441\u0442\u0438.

\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430

NPM

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C vue-chartjs \u043F\u043E\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043E\u043C npm. \u041E\u0434\u043D\u0430\u043A\u043E, \u0432\u0430\u043C \u0442\u0430\u043A\u0436\u0435 \u043D\u0443\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C chart.js \u043A\u0430\u043A \u0437\u0430\u0432\u0438\u0441\u0438\u043C\u043E\u0441\u0442\u044C \u0434\u043B\u044F \u0432\u0430\u0448\u0435\u0433\u043E \u043F\u0440\u043E\u0435\u043A\u0442\u0430. \u041F\u043E\u0442\u043E\u043C\u0443, \u0447\u0442\u043E Chart.js - \u044D\u0442\u043E peerDependency. \u0422\u0430\u043A\u0438\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C \u0432\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u0435 \u043F\u043E\u043B\u043D\u044B\u0439 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044C \u043D\u0430\u0434 \u0432\u0435\u0440\u0441\u0438\u043E\u043D\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435\u043C Chart.js.

\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430 \u043F\u043E\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043E\u043C npm: npm install vue-chartjs chart.js --save

TIP

\u0415\u0441\u043B\u0438 \u0432\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0435 vue 1.x \u043F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0442\u0435\u0433 legacy. \u041E\u0434\u043D\u0430\u043A\u043E, \u043F\u043E\u043C\u043D\u0438\u0442\u0435, \u0447\u0442\u043E Vue \u0432\u0435\u0440\u0441\u0438\u0438 1 \u0431\u043E\u043B\u044C\u0448\u0435 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F.

yarn add vue-chartjs@legacy

YARN

\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430 \u043F\u043E\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043E\u043C yarn: yarn add vue-chartjs chart.js

\u0411\u0440\u0430\u0443\u0437\u0435\u0440

\u0412\u044B \u0442\u0430\u043A\u0436\u0435 \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C vue-chartjs \u043F\u0440\u044F\u043C\u043E \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0441\u043D\u0430\u0447\u0430\u043B\u0430 \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0441\u043A\u0440\u0438\u043F\u0442 Vue, \u0435\u0441\u043B\u0438 \u043E\u043D \u0435\u0449\u0451 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D, \u043F\u043E\u0442\u043E\u043C - \u0441\u043A\u0440\u0438\u043F\u0442 Chart.js, \u0430 \u043F\u043E\u0441\u043B\u0435 \u043D\u0435\u0433\u043E - \u043C\u0438\u043D\u0438\u043C\u0438\u0437\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u0443\u044E \u0432\u0435\u0440\u0441\u0438\u044E \u0441\u043A\u0440\u0438\u043F\u0442\u0430 vue-chartjs.

<script src="https://unpkg.com/vue"></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>
+

\u0414\u0430\u043B\u044C\u0448\u0435 \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0441\u0432\u043E\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442:

Vue.component('line-chart', {
+  extends: VueChartJs.Line,
+  mounted () {
+    this.renderChart({
+      labels: ['\u042F\u043D\u0432\u0430\u0440\u044C', '\u0424\u0435\u0432\u0440\u0430\u043B\u044C', '\u041C\u0430\u0440\u0442', '\u0410\u043F\u0440\u0435\u043B\u044C', '\u041C\u0430\u0439', '\u0418\u044E\u043D\u044C', '\u0418\u044E\u043B\u044C', '\u0410\u0432\u0433\u0443\u0441\u0442', '\u0421\u0435\u043D\u0442\u044F\u0431\u0440\u044C', '\u041E\u043A\u0442\u044F\u0431\u0440\u044C', '\u041D\u043E\u044F\u0431\u0440\u044C', '\u0414\u0435\u043A\u0430\u0431\u0440\u044C'],
+      datasets: [
+        {
+          label: '\u041A\u043E\u043C\u043C\u0438\u0442\u044B \u043D\u0430 GitHub',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})
+

\u041F\u0440\u0438\u043C\u0435\u0440 \u043D\u0430 \u0421odepen.

\u0418\u043D\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044F

\u041A\u0430\u0436\u0434\u044B\u0439 \u0442\u0438\u043F \u0433\u0440\u0430\u0444\u0438\u043A\u0430, \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0439 \u0432 Chart.js, \u044D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044F \u043A\u0430\u043A \u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u0438\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D \u043A\u0430\u043A \u0442\u0430\u043A\u043E\u0432\u043E\u0439. \u042D\u0442\u0438 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B - \u043D\u043E\u0440\u043C\u0430\u043B\u044C\u043D\u044B\u0435 Vue-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B, \u043E\u0434\u043D\u0430\u043A\u043E \u0432\u0430\u043C \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0440\u0430\u0441\u0448\u0438\u0440\u044F\u0442\u044C \u0438\u0445.

\u0418\u0434\u0435\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0437\u0430 vue-chart.js, \u0441\u043E\u0441\u0442\u043E\u0438\u0442 \u0432 \u0442\u043E\u043C, \u0447\u0442\u043E\u0431\u044B \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043F\u0440\u043E\u0441\u0442\u044B\u0435 \u0432 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B, \u0441 \u043C\u0430\u043A\u0441\u0438\u043C\u0443\u043C\u043E\u043C \u0433\u0438\u0431\u043A\u043E\u0441\u0442\u0438 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044F\u0435\u043C\u043E\u0441\u0442\u0438. \u0414\u043B\u044F \u0434\u043E\u0441\u0442\u0438\u0436\u0435\u043D\u0438\u044F \u044D\u0442\u043E\u0433\u043E, \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0432\u0430\u0448 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0439 \u0433\u0440\u0430\u0444\u0438\u043A-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044C \u0435\u0433\u043E \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u043D\u044B\u043C\u0438 vue-chart.js \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430\u043C\u0438.

\u0422\u0430\u043A\u0438\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C, \u043C\u0435\u0442\u043E\u0434\u044B \u0438 \u043B\u043E\u0433\u0438\u043A\u0430 \u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0432\u043A\u043B\u044E\u0447\u0430\u0435\u0442\u0441\u044F \u0432 \u0432\u0430\u0448 \u0433\u0440\u0430\u0444\u0438\u043A-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442.

\u0421\u043E\u0437\u0434\u0430\u043D\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043E \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430

\u0412\u0430\u043C \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0438\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0431\u0430\u0437\u043E\u0432\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442, \u0430 \u0437\u0430\u0442\u0435\u043C \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044C \u0435\u0433\u043E. \u042D\u0442\u043E \u0434\u0430\u0451\u0442 \u0431\u043E\u043B\u044C\u0448\u0435 \u0433\u0438\u0431\u043A\u043E\u0441\u0442\u0438 \u043F\u0440\u0438 \u0440\u0430\u0431\u043E\u0442\u0435 \u0441 \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u043C\u0438 \u0434\u0430\u043D\u043D\u044B\u043C\u0438. \u041E\u0434\u043D\u0430\u043A\u043E, \u0432\u0430\u0448 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u0435\u0440\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D \u0442\u0430\u043A\u0438\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C.

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0432\u0435\u0441\u044C \u043F\u0430\u043A\u0435\u0442 \u0438\u043B\u0438 \u043A\u0430\u0436\u0434\u044B\u0439 \u043C\u043E\u0434\u0443\u043B\u044C \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E. \u041F\u043E\u0442\u043E\u043C \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C extends: \u0438\u043B\u0438 mixins:[]. \u0414\u0430\u043B\u0435\u0435, \u0432 \u0445\u0443\u043A\u0435 mounted(), \u0432\u044B\u0437\u043E\u0432\u0438\u0442\u0435 this.renderChart(). \u042D\u0442\u043E \u0441\u043E\u0437\u0434\u0430\u0441\u0442 \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u0432\u0430\u0448\u0435\u0433\u043E \u043E\u0431\u044A\u0435\u043A\u0442\u0430.

\xA0


\xA0

\xA0



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

TIP

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0438\u043B\u0438 extends: Bar \u0438\u043B\u0438 mixins: [Bar]

\u041C\u0435\u0442\u043E\u0434 this.renderChart() \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u043C Bar \u0438 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442 \u0434\u0432\u0430 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430. \u041E\u0431 \u044F\u0432\u043B\u044F\u044E\u0442\u0441\u044F objects. \u041F\u0435\u0440\u0432\u044B\u0439 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u0434\u0430\u043D\u043D\u044B\u0445 \u0432\u0430\u0448\u0435\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430, \u0430 \u0432\u0442\u043E\u0440\u043E\u0439 - \u043A\u0430\u043A \u043E\u0431\u044A\u0435\u043A\u0442 \u043E\u043F\u0446\u0438\u0439.

\u0421\u043E \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u043E\u0439 \u044D\u0442\u0438\u0445 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432 \u043C\u043E\u0436\u0435\u0442\u0435 \u043E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F \u0432 \u043E\u0444\u0438\u0446\u0438\u0430\u043B\u044C\u043D\u043E\u0439 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u0438 Chart.js

\u041E\u0434\u043D\u043E\u0444\u0430\u0439\u043B\u043E\u0432\u044B\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B Vue

\u0411\u043E\u043B\u044C\u0448\u0438\u043D\u0441\u0442\u0432\u043E \u043F\u0440\u0438\u043C\u0435\u0440\u043E\u0432 \u0432 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u0438 \u0431\u0430\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044F \u043D\u0430 javascript-\u0444\u0430\u0439\u043B\u0430\u0445, \u0430 \u043D\u0435 \u043D\u0430 .vue \u0444\u0430\u0439\u043B\u0430\u0445. \u041F\u0440\u0438\u0447\u0438\u043D\u043E\u0439 \u044D\u0442\u043E\u043C\u0443 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0442\u043E, \u0447\u0442\u043E \u0432 \u0431\u043E\u043B\u044C\u0448\u0438\u043D\u0441\u0442\u0432\u0435 \u0441\u043B\u0443\u0447\u0430\u0435\u0432 \u0432\u0430\u043C \u043F\u043E\u043D\u0430\u0434\u043E\u0431\u0438\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u0431\u043B\u043E\u043A <script>. \u041E\u0434\u043D\u0430\u043A\u043E, \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0438 .vue \u0444\u0430\u0439\u043B\u044B.

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-\u0442\u0435\u0433\u0438 \u043D\u0435 \u043E\u0431\u044A\u0435\u0434\u0438\u043D\u044F\u044E\u0442\u0441\u044F

\u041D\u0435 \u0432\u043A\u043B\u044E\u0447\u0430\u0439\u0442\u0435 \u0442\u0435\u0433 <template></template> \u0432 \u0432\u0430\u0448\u0438 .vue \u0444\u0430\u0439\u043B\u044B \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432. Vue \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u043E\u0431\u044A\u0435\u0434\u0438\u043D\u044F\u0442\u044C \u0448\u0430\u0431\u043B\u043E\u043D\u044B. \u0418 \u0448\u0430\u0431\u043B\u043E\u043D \u0432\u043A\u043B\u044E\u0447\u0430\u0435\u0442\u0441\u044F \u0432 \u043C\u0438\u043A\u0441\u0438\u043D. \u0415\u0441\u043B\u0438 \u0432\u044B \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u0435 \u043F\u0443\u0441\u0442\u043E\u0439 \u0442\u0435\u0433 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u0432 \u0432\u0430\u0448\u0435\u043C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435, \u043E\u043D \u043F\u0435\u0440\u0435\u0437\u0430\u043F\u0438\u0448\u0435\u0442 \u0442\u043E\u0442, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0438\u0437 \u0431\u0430\u0437\u043E\u0432\u043E\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430, \u0438 \u0432\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u0435 \u043F\u0443\u0441\u0442\u043E\u0439 \u044D\u043A\u0440\u0430\u043D.

\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432

Chart.js \u043D\u0435 \u043E\u0431\u043D\u043E\u0432\u043B\u044F\u0435\u0442 \u0438 \u043D\u0435 \u043F\u0435\u0440\u0435\u0440\u0438\u0441\u043E\u0432\u044B\u0432\u0430\u0435\u0442 \u0433\u0440\u0430\u0444\u0438\u043A \u0435\u0441\u043B\u0438 \u043D\u043E\u0432\u044B\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 \u0431\u044B\u043B\u0438 \u043F\u0435\u0440\u0435\u0434\u0430\u043D\u044B. \u041E\u0434\u043D\u0430\u043A\u043E, \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0440\u043E\u0441\u0442\u043E \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u044D\u0442\u043E \u0441\u0430\u043C\u0438 \u0438\u043B\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043E\u0434\u0438\u043D \u0438\u0437 \u0434\u0432\u0443\u0445 \u0443\u0436\u0435 \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0445 \u043C\u0438\u043A\u0441\u0438\u043D\u043E\u0432:

  • reactiveProp
  • reactiveData

\u041E\u0431\u0430 \u0432\u043A\u043B\u044E\u0447\u0435\u043D\u044B \u0432 \u043C\u043E\u0434\u0443\u043B\u044C mixins \u0438 \u043E\u0431\u0430 \u043F\u0440\u0435\u0441\u043B\u0435\u0434\u0443\u044E\u0442 \u043E\u0434\u043D\u0443 \u0446\u0435\u043B\u044C. \u0412 \u0431\u043E\u043B\u044C\u0448\u0438\u043D\u0441\u0442\u0432\u0435 \u0441\u043B\u0443\u0447\u0430\u0435\u0432 \u0432\u044B \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C reactiveProp. \u042D\u0442\u043E\u0442 \u043C\u0438\u043A\u0441\u0438\u043D \u0440\u0430\u0441\u0448\u0438\u0440\u044F\u0435\u0442 \u043B\u043E\u0433\u0438\u043A\u0443 \u0432\u0430\u0448\u0435\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u0438 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438 \u0441\u043E\u0437\u0434\u0430\u0451\u0442 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 chartData \u0438 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438 \u0434\u043E\u0431\u0430\u0432\u043B\u044F\u0435\u0442 vue watch \u043D\u0430 \u044D\u0442\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E. \u041F\u0440\u0438 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u0438 \u0434\u0430\u043D\u043D\u044B\u0445, \u043E\u043D \u0438\u043B\u0438 \u0432\u044B\u0437\u043E\u0432\u0435\u0442 update(), \u0435\u0441\u043B\u0438 \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0438\u0441\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u0430\u043D\u043D\u044B\u0435 \u0432\u043D\u0443\u0442\u0440\u0438 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0445 datasets, \u0438\u043B\u0438 renderChart(), \u0435\u0441\u043B\u0438 \u0431\u044B\u043B\u0438 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B \u043D\u043E\u0432\u044B\u0435 \u043D\u0430\u0431\u043E\u0440\u044B \u0434\u0430\u043D\u043D\u044B\u0445.

reactiveData \u043F\u0440\u043E\u0441\u0442\u043E \u0441\u043E\u0437\u0434\u0430\u0451\u0442 \u043B\u043E\u043A\u0430\u043B\u044C\u043D\u0443\u044E \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u0443\u044E chartData (\u043A\u043E\u0442\u043E\u0440\u0430\u044F \u043D\u0435 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E\u043C!) \u0438 \u0434\u043E\u0431\u0430\u0432\u043B\u044F\u0435\u0442 watcher. \u042D\u0442\u043E \u043F\u043E\u043B\u0435\u0437\u043D\u043E \u0442\u043E\u043B\u044C\u043A\u043E \u0432 \u0442\u043E\u043C \u0441\u043B\u0443\u0447\u0430\u0435, \u0435\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u044B \u043E\u0434\u043D\u043E\u0446\u0435\u043B\u0435\u0432\u044B\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u0438 \u0438 \u0432\u044B \u0441\u043E\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0435 API-\u0432\u044B\u0437\u043E\u0432\u044B \u0432\u043D\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0438\u0445 \u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432.

\u041F\u0440\u0438\u043C\u0435\u0440

LineChart.js

import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData \u0441\u043E\u0437\u0434\u0430\u0451\u0442\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 \u043C\u0438\u043A\u0441\u0438\u043D\u0430.
+    // \u0415\u0441\u043B\u0438 \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u043E\u043F\u0446\u0438\u0438, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435 \u043B\u043E\u043A\u0430\u043B\u044C\u043D\u044B\u0439 \u043E\u0431\u044A\u0435\u043A\u0442 options
+    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>
+

\u041E\u0433\u0440\u0430\u043D\u0438\u0447\u0435\u043D\u0438\u044F Vue \u043F\u043E \u043C\u0443\u0442\u0430\u0446\u0438\u0438 \u043C\u0430\u0441\u0441\u0438\u0432\u043E\u0432 \u0438 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432

CaveatsChange-Detection-Caveatsvm.$watch

\u0421\u043E\u0431\u044B\u0442\u0438\u044F

\u0420\u0435\u0430\u043A\u0442\u0438\u0432\u043D\u044B\u0435 \u043C\u0438\u043A\u0441\u0438\u043D\u044B \u0432\u044B\u0437\u044B\u0432\u0430\u044E\u0442 \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u043F\u0440\u0438 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u0438 \u0434\u0430\u043D\u043D\u044B\u0445. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0440\u043E\u0441\u043B\u0443\u0448\u0438\u0432\u0430\u0442\u044C \u0438\u0445 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 v:on \u043D\u0430 \u0433\u0440\u0430\u0444\u0438\u043A\u0435-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435. \u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 \u0441\u043E\u0431\u044B\u0442\u0438\u044F:

  • chart:render - \u0435\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D \u0432\u044B\u043F\u043E\u043B\u043D\u044F\u0435\u0442 \u043F\u043E\u043B\u043D\u0443\u044E \u043F\u0435\u0440\u0435\u0440\u0438\u0441\u043E\u0432\u043A\u0443 \u0433\u0440\u0430\u0444\u0438\u043A\u0430
  • chart:destroy - \u0435\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D \u0443\u0434\u0430\u043B\u044F\u0435\u0442 \u043E\u0431\u044A\u0435\u043A\u0442 \u0433\u0440\u0430\u0444\u0438\u043A\u0430
  • chart:update - \u0435\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D \u0441\u043E\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043F\u043E\u043B\u043D\u043E\u0439 \u043F\u0435\u0440\u0435\u0440\u0438\u0441\u043E\u0432\u043A\u0438
  • labels:update - \u0435\u0441\u043B\u0438 \u0431\u044B\u043B\u0438 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u044B \u043D\u043E\u0432\u044B\u0435 \u043C\u0435\u0442\u043A\u0438
  • xlabels:update - \u0435\u0441\u043B\u0438 \u043D\u043E\u0432\u044B\u0435 \u043C\u0435\u0442\u043A\u0438 \u0431\u044B\u043B\u0438 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u044B \u043F\u043E \u043E\u0441\u0438 x
  • ylabels:update - \u0435\u0441\u043B\u0438 \u043D\u043E\u0432\u044B\u0435 \u043C\u0435\u0442\u043A\u0438 \u0431\u044B\u043B\u0438 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u044B \u043F\u043E \u043E\u0441\u0438 y

\u041E\u0442\u043B\u043E\u0432 \u043E\u0448\u0438\u0431\u043E\u043A

\u0421\u0438\u0441\u0442\u0435\u043C\u0430 \u0440\u0435\u0430\u043A\u0442\u0438\u0432\u043D\u043E\u0441\u0442\u0438 \u0432 \u0435\u0451 \u0442\u0435\u043A\u0443\u0449\u0435\u043C \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0438 \u043D\u0435\u0437\u0440\u0435\u043B\u0430\u044F. \u0412\u044B \u0441\u0442\u043E\u043B\u043A\u043D\u0451\u0442\u0435\u0441\u044C \u0441 \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u043C\u0438 \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u0430\u043C\u0438 \u0441 \u043D\u0435\u0439, \u0442\u0430\u043A \u043A\u0430\u043A \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043C\u043D\u043E\u0436\u0435\u0441\u0442\u0432\u043E \u043F\u0443\u0442\u0435\u0439 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0438 \u043F\u0443\u0442\u0435\u0439 \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432\u0430\u0448\u0438\u0445 \u0434\u0430\u043D\u043D\u044B\u0445.

\u041E\u043F\u0446\u0438\u0438

\u041E\u0431\u044A\u0435\u043A\u0442 options \u043D\u0430 \u0434\u0430\u043D\u043D\u044B\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u043D\u0435 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0440\u0435\u0430\u043A\u0442\u0438\u0432\u043D\u044B\u043C. \u0415\u0441\u043B\u0438 \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u043E\u043F\u0446\u0438\u0438 \u0433\u0440\u0430\u0444\u0438\u043A\u0430, \u044D\u0442\u043E \u043D\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043F\u043E\u0437\u043D\u043E \u043C\u0438\u043A\u0441\u0438\u043D\u043E\u043C.

\u0415\u0441\u043B\u0438 \u0432\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0435 \u043C\u0438\u043A\u0441\u0438\u043D, \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u043E\u043F\u0446\u0438\u0438 \u043A\u0430\u043A \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E options. \u042D\u0442\u043E \u0432\u0430\u0436\u043D\u043E, \u0442\u0430\u043A \u043A\u0430\u043A \u043C\u0438\u043A\u0441\u0438\u043D \u0432\u044B\u0437\u043E\u0432\u0435\u0442 \u043C\u0435\u0442\u043E\u0434 update() \u0438\u0437 chart.js \u0438\u043B\u0438 \u0443\u043D\u0438\u0447\u0442\u043E\u0436\u0438\u0442 \u0441\u0442\u0430\u0440\u044B\u0439 \u0438 \u043E\u0442\u0440\u0438\u0441\u0443\u0435\u0442 \u043D\u043E\u0432\u044B\u0439 \u0433\u0440\u0430\u0444\u0438\u043A. \u0415\u0441\u043B\u0438 \u043C\u0438\u043A\u0441\u0438\u043D \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u044B\u0432\u0430\u0435\u0442 \u043D\u043E\u0432\u044B\u0439 \u0433\u0440\u0430\u0444\u0438\u043A, \u043E\u043D \u0432\u044B\u0437\u044B\u0432\u0430\u0435\u0442 this.renderChart(this.chartData, this.options).

\u041D\u043E \u0435\u0441\u043B\u0438 \u0432\u044B \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0435 \u043E\u043F\u0446\u0438\u0438 \u043D\u0430\u043F\u0440\u044F\u043C\u0443\u044E \u0432 \u0432\u0430\u0448\u0435\u043C \u0445\u0443\u043A\u0435 mounted(), \u043E\u043D\u0438 \u0442\u0435\u0440\u044F\u044E\u0442\u0441\u044F.

\u041D\u0435\u043F\u0440\u0430\u0432\u0438\u043B\u044C\u043D\u043E







\xA0



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

\u041F\u0440\u0430\u0432\u0438\u043B\u044C\u043D\u043E







\xA0



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

\u0421\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0439 watcher

\u0415\u0441\u043B\u0438 \u0432\u044B \u0447\u0430\u0441\u0442\u043E \u043F\u0440\u0435\u043E\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0435 \u0438\u043B\u0438 \u0438\u0437\u043C\u0435\u043D\u044F\u0435\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 (\u0432\u043C\u0435\u0441\u0442\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043D\u043E\u0432\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445), \u0432\u0430\u043C \u043B\u0443\u0447\u0448\u0435 \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0441\u0432\u043E\u0439 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0439 watcher. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0441\u0430\u043C\u043E\u0441\u0442\u043E\u044F\u0442\u0435\u043B\u044C\u043D\u043E \u0432\u044B\u0437\u0432\u0430\u0442\u044C this.$data._chart.update() \u0438\u043B\u0438 this.renderChart(), \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043C\u043E\u0441\u0442\u0438 \u043E\u0442 \u0432\u0430\u0448\u0438\u0445 \u043F\u043E\u0442\u0440\u0435\u0431\u043D\u043E\u0441\u0442\u0435\u0439.

\u041F\u0440\u043E\u0441\u0442\u043E\u0439 watcher \u0432\u044B\u0433\u043B\u044F\u0434\u0438\u0442 \u0442\u0430\u043A:

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

\u041F\u0440\u0438\u043C\u0435\u0440\u044B

\u0413\u0440\u0430\u0444\u0438\u043A\u0438 \u0441\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u043C\u0438

\u0412\u0430\u0448\u0435\u0439 \u0446\u0435\u043B\u044C\u044E \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u0435 \u043F\u0435\u0440\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0445 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432-\u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432. \u0414\u043B\u044F \u044D\u0442\u043E\u0439 \u0446\u0435\u043B\u0438, \u0432\u0430\u043C \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 Vue.js \u0434\u043B\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043E\u043F\u0446\u0438\u0439 \u0438 \u0434\u0430\u043D\u043D\u044B\u0445 \u0434\u043B\u044F \u0433\u0440\u0430\u0444\u0438\u043A\u0430. \u0422\u0430\u043A\u0438\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C, \u0433\u0440\u0430\u0444\u0438\u043A \u0441\u0430\u043C \u043F\u043E \u0441\u0435\u0431\u0435 \u043D\u0435 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F \u0441\u0442\u044F\u0433\u0438\u0432\u0430\u043D\u0438\u0435\u043C \u0434\u0430\u043D\u043D\u044B\u0445, \u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0438\u0445 \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435\u043C.

\u0412 \u043F\u0435\u0440\u0432\u0443\u044E \u043E\u0447\u0435\u0440\u0435\u0434\u044C, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u0432\u043E\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442:

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

\u041F\u043E\u0441\u043B\u0435 \u044D\u0442\u043E\u0433\u043E \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0441\u0432\u043E\u0439 \u0433\u0440\u0430\u0444\u0438\u043A-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0432 \u0440\u043E\u0434\u0438\u0442\u0435\u043B\u044C\u0441\u043A\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442:

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

\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u043B\u043E\u043A\u0430\u043B\u044C\u043D\u044B\u043C\u0438 \u0434\u0430\u043D\u043D\u044B\u043C\u0438

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435 \u043D\u0430\u043F\u0440\u044F\u043C\u0443\u044E \u0432 \u0432\u0430\u0448 \u0433\u0440\u0430\u0444\u0438\u043A-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u043F\u0440\u043E\u0441\u0442\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u0435\u0433\u043E \u0432 \u043C\u0435\u0442\u043E\u0434 renderChart():

import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  data: () => ({
+    chartdata: {
+      labels: ['\u042F\u043D\u0432\u0430\u0440\u044C', '\u0424\u0435\u0432\u0440\u0430\u043B\u044C'],
+      datasets: [
+        {
+          label: '\u0414\u0430\u043D\u043D\u044B\u0435 1',
+          backgroundColor: '#f87979',
+          data: [40, 20]
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  }),
+
+  mounted () {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+

\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u0441 API

\u041F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u043E\u0439 \u043C\u043E\u0434\u0435\u043B\u044C\u044E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0437\u0430\u043F\u0440\u043E\u0441 \u0434\u0430\u043D\u043D\u044B\u0445 \u0441 API. \u041E\u0434\u043D\u0430\u043A\u043E, \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043A\u043E\u0435-\u0447\u0442\u043E \u0437\u0430\u043F\u043E\u043C\u043D\u0438\u0442\u044C. \u0421\u0430\u043C\u043E\u0439 \u0447\u0430\u0441\u0442\u043E\u0439 \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u043E\u0439 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0442\u043E, \u0447\u0442\u043E \u0432\u044B \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0435 \u0433\u0440\u0430\u0444\u0438\u043A-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u043D\u0430\u043F\u0440\u044F\u043C\u0443\u044E \u0438 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0435 \u0435\u043C\u0443 \u0434\u0430\u043D\u043D\u044B\u0435 \u0438\u0437 \u0430\u0441\u0438\u043D\u0445\u0440\u043E\u043D\u043D\u043E\u0433\u043E API-\u0432\u044B\u0437\u043E\u0432\u0430. \u041F\u0440\u043E\u0431\u043B\u0435\u043C\u0430 \u0441 \u044D\u0442\u0438\u043C \u043F\u043E\u0434\u0445\u043E\u0434\u043E\u043C \u0441\u043E\u0441\u0442\u043E\u0438\u0442 \u0432 \u0442\u043E\u043C, \u0447\u0442\u043E \u0433\u0440\u0430\u0444\u0438\u043A \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u044B\u0432\u0430\u0435\u0442\u0441\u044F \u0440\u0430\u043D\u0435\u0435, \u0447\u0435\u043C \u043F\u0440\u0438\u0445\u043E\u0434\u044F\u0442 \u0434\u0430\u043D\u043D\u044B\u0435 \u0438\u0437 \u0430\u0441\u0438\u043D\u0445\u0440\u043E\u043D\u043D\u043E\u0433\u043E API-\u0432\u044B\u0437\u043E\u0432\u0430.

\u041B\u0443\u0447\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u0434\u043B\u044F \u043F\u0440\u0435\u0434\u0443\u043F\u0440\u0435\u0436\u0434\u0435\u043D\u0438\u044F \u0442\u0430\u043A\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 - \u044D\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435 v-if.

\u0421\u043E\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0430\u0448 \u0433\u0440\u0430\u0444\u0438\u043A-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0441\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u043C\u0438 \u0434\u0430\u043D\u043D\u044B\u0445 \u0438 \u043E\u043F\u0446\u0438\u0439, \u0447\u0442\u043E\u0431\u044B \u0432\u044B \u043C\u043E\u0433\u043B\u0438 \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442-\u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440:

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

\u0414\u0430\u043B\u0435\u0435 \u0441\u043E\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442-\u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F API-\u0432\u044B\u0437\u043E\u0432\u0430\u043C\u0438 \u0438\u043B\u0438 vuex-\u0441\u043E\u0435\u0434\u0438\u043D\u0435\u043D\u0438\u0435\u043C:

ChartContainer.vue




\xA0




























<template>
+  <div class="container">
+    <line-chart
+      v-if="loaded"
+      :chartdata="chartdata"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+import LineChart from './Chart.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>
+

\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438\u043C\u0438 \u0441\u0442\u0438\u043B\u044F\u043C\u0438

\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C responsive: true \u0438 \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u043E\u0431\u044A\u0435\u043A\u0442 \u0441\u0442\u0438\u043B\u0435\u0439, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0431\u0443\u0434\u0435\u0442 \u043F\u0440\u0438\u043C\u0435\u043D\u0451\u043D \u043A\u0430\u043A \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0439 \u0441\u0442\u0438\u043B\u044C \u0434\u043B\u044F \u0432\u043D\u0435\u0448\u043D\u0435\u0433\u043E \u0431\u043B\u043E\u043A\u0430 div. \u0422\u0430\u043A\u0438\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438 \u0438\u0437\u043C\u0435\u043D\u044F\u0442\u044C \u0432\u044B\u0441\u043E\u0442\u0443 \u0438 \u0448\u0438\u0440\u0438\u043D\u0443 \u0432\u043D\u0435\u0448\u043D\u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430, \u0447\u0442\u043E \u043D\u0435 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0434\u043B\u044F chart.js. \u041B\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0432\u044B\u0447\u0438\u0441\u043B\u044F\u0435\u043C\u044B\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B.

WARNING

\u0412\u0430\u043C \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C 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>
+

\u041D\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0435 / \u043D\u043E\u0432\u044B\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u0438

\u0418\u043D\u043E\u0433\u0434\u0430 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044C \u043E\u0431\u044B\u0447\u043D\u044B\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u0438 Chart.js. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043C\u043D\u043E\u0436\u0435\u0441\u0442\u0432\u043E \u043F\u0440\u0438\u043C\u0435\u0440\u043E\u0432, \u043A\u0430\u043A \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044C \u0438\u043B\u0438 \u043C\u043E\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0433\u0440\u0430\u0444\u0438\u043A\u0438 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E, \u0438\u043B\u0438 \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0439 \u0442\u0438\u043F \u0433\u0440\u0430\u0444\u0438\u043A\u0430.

\u0412 vue-chartjs, \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u044D\u0442\u043E \u043F\u0440\u0430\u043A\u0442\u0438\u0447\u0435\u0441\u043A\u0438 \u0442\u0430\u043A\u0438\u043C \u0436\u0435 \u043F\u0443\u0442\u0451\u043C:

// 1. \u0418\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 Chart.js, \u0447\u0442\u043E\u0431\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0439 \u043E\u0431\u044A\u0435\u043A\u0442 Chart
+import Chart from 'chart.js'
+// 2. \u0418\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043C\u0435\u0442\u043E\u0434 \`generateChart()\` \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 vue
+import { generateChart } from 'vue-chartjs'
+
+// 3. \u0420\u0430\u0441\u0448\u0438\u0440\u044C\u0442\u0435 \u043E\u0434\u0438\u043D \u0438\u0437 \u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* \u0432\u0430\u0448\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043D\u0438\u044F */})
+
+// 4. \u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u0443\u0439\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 vue-chartjs
+// \u041F\u0435\u0440\u0432\u044B\u0439 \u0430\u0440\u0433\u0443\u043C\u0435\u043D\u0442 - \u044D\u0442\u043E chart-id, \u0432\u0442\u043E\u0440\u043E\u0439 - \u0442\u0438\u043F\u0430 \u0433\u0440\u0430\u0444\u0438\u043A\u0430
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+
+// 5. \u0420\u0430\u0441\u0448\u0438\u0440\u044C\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 CustomLine \u0442\u0430\u043A \u0436\u0435, \u043A\u0430\u043A \u0432\u044B \u044D\u0442\u043E \u0434\u0435\u043B\u0430\u0435\u0442\u0435 \u0441 \u043E\u0431\u044B\u0447\u043D\u044B\u043C\u0438 \u0433\u0440\u0430\u0444\u0438\u043A\u0430\u043C\u0438 vue-chartjs
+
+export default {
+  extends: CustomLine,
+  mounted () {
+    // ....
+  }
+}
+

\u0420\u0435\u0441\u0443\u0440\u0441\u044B

\u0412\u0430\u0441 \u043C\u043E\u0433\u0443\u0442 \u0442\u0430\u043A\u0436\u0435 \u0437\u0430\u0438\u043D\u0442\u0435\u0440\u0435\u0441\u043E\u0432\u0430\u0442\u044C \u0440\u0443\u043A\u043E\u0432\u043E\u0434\u0441\u0442\u0432\u0430 \u043F\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044E vue-chartjs \u043D\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445:

`,90),e=[o];function c(l,r,u,i,k,d){return a(),s("div",null,e)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/ru_guide_index.md.2d993276.lean.js b/assets/ru_guide_index.md.2d993276.lean.js new file mode 100644 index 00000000..b874480d --- /dev/null +++ b/assets/ru_guide_index.md.2d993276.lean.js @@ -0,0 +1 @@ +import{_ as n,c as s,o as a,a as t}from"./app.494b20fe.js";const g='{"title":"\u0414\u043B\u044F \u043D\u0430\u0447\u0438\u043D\u0430\u044E\u0449\u0438\u0445","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u0412\u0441\u0442\u0443\u043F\u043B\u0435\u043D\u0438\u0435","slug":"\u0432\u0441\u0442\u0443\u043Fn\u0435\u043D\u0438\u0435"},{"level":2,"title":"\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430","slug":"\u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"YARN","slug":"yarn"},{"level":3,"title":"\u0411\u0440\u0430\u0443\u0437\u0435\u0440","slug":"\u0431\u0440\u0430\u0443\u0437\u0435\u0440"},{"level":2,"title":"\u0418\u043D\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044F","slug":"\u0438\u043D\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044F"},{"level":2,"title":"\u0421\u043E\u0437\u0434\u0430\u043D\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043E \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u0433\u0440\u0430\u0444\u0438\u043A\u0430","slug":"\u0441\u043E\u0437\u0434\u0430\u043D\u0438\u0435-\u0432\u0430\u0448\u0435\u0433\u043E-\u043F\u0435\u0440\u0432\u043E\u0433\u043E-\u0433\u0440\u0430\u0444\u0438\u043A\u0430"},{"level":2,"title":"\u041E\u0434\u043D\u043E\u0444\u0430\u0439\u043B\u043E\u0432\u044B\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B Vue","slug":"\u043E\u0434\u043D\u043E\u0444\u0430\u0439n\u043E\u0432\u044B\u0435-\u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B-vue"},{"level":2,"title":"\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432","slug":"\u043E\u0431\u043D\u043E\u0432n\u0435\u043D\u0438\u0435-\u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0432"},{"level":3,"title":"\u041F\u0440\u0438\u043C\u0435\u0440","slug":"\u043F\u0440\u0438\u043C\u0435\u0440"},{"level":3,"title":"\u0421\u043E\u0431\u044B\u0442\u0438\u044F","slug":"\u0441\u043E\u0431\u044B\u0442\u0438\u044F"},{"level":3,"title":"\u041E\u0442\u043B\u043E\u0432 \u043E\u0448\u0438\u0431\u043E\u043A","slug":"\u043E\u0442n\u043E\u0432-\u043E\u0448\u0438\u0431\u043E\u043A"},{"level":2,"title":"\u041F\u0440\u0438\u043C\u0435\u0440\u044B","slug":"\u043F\u0440\u0438\u043C\u0435\u0440\u044B"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A\u0438 \u0441\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u043C\u0438","slug":"\u0433\u0440\u0430\u0444\u0438\u043A\u0438-\u0441\u043E-\u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u043C\u0438"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u043B\u043E\u043A\u0430\u043B\u044C\u043D\u044B\u043C\u0438 \u0434\u0430\u043D\u043D\u044B\u043C\u0438","slug":"\u0433\u0440\u0430\u0444\u0438\u043A-\u0441-n\u043E\u043A\u0430n\u044C\u043D\u044B\u043C\u0438-\u0434\u0430\u043D\u043D\u044B\u043C\u0438"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u0441 API","slug":"\u0433\u0440\u0430\u0444\u0438\u043A-\u0441-\u0434\u0430\u043D\u043D\u044B\u043C\u0438-\u0441-api"},{"level":3,"title":"\u0413\u0440\u0430\u0444\u0438\u043A \u0441 \u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438\u043C\u0438 \u0441\u0442\u0438\u043B\u044F\u043C\u0438","slug":"\u0433\u0440\u0430\u0444\u0438\u043A-\u0441-\u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438\u043C\u0438-\u0441\u0442\u0438n\u044F\u043C\u0438"},{"level":3,"title":"\u041D\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0435 / \u043D\u043E\u0432\u044B\u0435 \u0433\u0440\u0430\u0444\u0438\u043A\u0438","slug":"\u043D\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0435-\u043D\u043E\u0432\u044B\u0435-\u0433\u0440\u0430\u0444\u0438\u043A\u0438"},{"level":2,"title":"\u0420\u0435\u0441\u0443\u0440\u0441\u044B","slug":"\u0440\u0435\u0441\u0443\u0440\u0441\u044B"}],"relativePath":"ru/guide/index.md","lastUpdated":1690983419000}',p={},o=t("",90),e=[o];function c(l,r,u,i,k,d){return a(),s("div",null,e)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/ru_index.md.e8a06353.js b/assets/ru_index.md.e8a06353.js new file mode 100644 index 00000000..14f62c80 --- /dev/null +++ b/assets/ru_index.md.e8a06353.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const l='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"\u041D\u0430\u0447\u0430\u0442\u044C \u2192","actionLink":"/ru/guide/","features":[{"title":"\u041F\u0440\u043E\u0441\u0442\u043E\u0442\u0430","details":"\u041F\u0440\u043E\u0441\u0442\u043E \u043A\u0430\u043A \u0434\u043B\u044F \u043D\u043E\u0432\u0438\u0447\u043A\u043E\u0432, \u0442\u0430\u043A \u0438 \u0434\u043B\u044F \u043F\u0440\u043E\u0444\u0435\u0441\u0441\u0438\u043E\u043D\u0430\u043B\u043E\u0432 \u{1F64C}"},{"title":"\u0420\u0430\u0441\u0448\u0438\u0440\u044F\u0435\u043C\u043E\u0441\u0442\u044C","details":"\u041F\u0440\u043E\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C, \u043B\u0435\u0433\u043A\u043E \u0440\u0430\u0441\u0448\u0438\u0440\u044F\u0442\u044C \u{1F4AA}"},{"title":"\u041C\u043E\u0433\u0443\u0449\u0435\u0441\u0442\u0432\u043E","details":"\u0421 \u043F\u043E\u043B\u043D\u043E\u0439 \u0441\u0438\u043B\u043E\u0439 chart.js \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"ru/index.md","lastUpdated":1690983419000}',r={};function s(i,o,c,n,d,p){return a(),t("div")}var m=e(r,[["render",s]]);export{l as __pageData,m as default}; diff --git a/assets/ru_index.md.e8a06353.lean.js b/assets/ru_index.md.e8a06353.lean.js new file mode 100644 index 00000000..14f62c80 --- /dev/null +++ b/assets/ru_index.md.e8a06353.lean.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const l='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"\u041D\u0430\u0447\u0430\u0442\u044C \u2192","actionLink":"/ru/guide/","features":[{"title":"\u041F\u0440\u043E\u0441\u0442\u043E\u0442\u0430","details":"\u041F\u0440\u043E\u0441\u0442\u043E \u043A\u0430\u043A \u0434\u043B\u044F \u043D\u043E\u0432\u0438\u0447\u043A\u043E\u0432, \u0442\u0430\u043A \u0438 \u0434\u043B\u044F \u043F\u0440\u043E\u0444\u0435\u0441\u0441\u0438\u043E\u043D\u0430\u043B\u043E\u0432 \u{1F64C}"},{"title":"\u0420\u0430\u0441\u0448\u0438\u0440\u044F\u0435\u043C\u043E\u0441\u0442\u044C","details":"\u041F\u0440\u043E\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C, \u043B\u0435\u0433\u043A\u043E \u0440\u0430\u0441\u0448\u0438\u0440\u044F\u0442\u044C \u{1F4AA}"},{"title":"\u041C\u043E\u0433\u0443\u0449\u0435\u0441\u0442\u0432\u043E","details":"\u0421 \u043F\u043E\u043B\u043D\u043E\u0439 \u0441\u0438\u043B\u043E\u0439 chart.js \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"ru/index.md","lastUpdated":1690983419000}',r={};function s(i,o,c,n,d,p){return a(),t("div")}var m=e(r,[["render",s]]);export{l as __pageData,m as default}; diff --git a/assets/style.5f10c5ca.css b/assets/style.5f10c5ca.css new file mode 100644 index 00000000..db444f2d --- /dev/null +++ b/assets/style.5f10c5ca.css @@ -0,0 +1 @@ +:root{--c-white: #ffffff;--c-white-dark: #f8f8f8;--c-black: #000000;--c-divider-light: rgba(60, 60, 67, .12);--c-divider-dark: rgba(84, 84, 88, .48);--c-text-light-1: #2c3e50;--c-text-light-2: #476582;--c-text-light-3: #90a4b7;--c-brand: #3eaf7c;--c-brand-light: #4abf8a;--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;--z-index-navbar: 10;--z-index-sidebar: 6;--shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);--header-height: 3.6rem}:root{--c-divider: var(--c-divider-light);--c-text: var(--c-text-light-1);--c-text-light: var(--c-text-light-2);--c-text-lighter: var(--c-text-light-3);--c-bg: var(--c-white);--c-bg-accent: var(--c-white-dark);--code-line-height: 24px;--code-font-family: var(--font-family-mono);--code-font-size: 14px;--code-inline-bg-color: rgba(27, 31, 35, .05);--code-bg-color: #282c34}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:1.4;font-family:var(--font-family-base);font-size:16px;font-weight:400;color:var(--c-text);background-color:var(--c-bg);direction:ltr;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.25}h1,h2,h3,h4,h5,h6,strong,b{font-weight:600}h1:hover .header-anchor,h1:focus .header-anchor,h2:hover .header-anchor,h2:focus .header-anchor,h3:hover .header-anchor,h3:focus .header-anchor,h4:hover .header-anchor,h4:focus .header-anchor,h5:hover .header-anchor,h5:focus .header-anchor,h6:hover .header-anchor,h6:focus .header-anchor{opacity:1}h1{margin-top:1.5rem;font-size:1.9rem}@media screen and (min-width: 420px){h1{font-size:2.2rem}}h2{margin-top:2.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--c-divider);padding-bottom:.3rem;line-height:1.25;font-size:1.65rem}h2+h3{margin-top:1.5rem}h3{margin-top:2rem;font-size:1.35rem}h4{font-size:1.15rem}p,ol,ul{margin:1rem 0;line-height:1.7}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{text-decoration:none;color:var(--c-brand)}a:hover{text-decoration:underline}a.header-anchor{float:left;margin-top:.125em;margin-left:-.87em;padding-right:.23em;font-size:.85em;opacity:0}a.header-anchor:hover,a.header-anchor:focus{text-decoration:none}figure{margin:0}img{max-width:100%}ul,ol{padding-left:1.25em}li>ul,li>ol{margin:0}table{display:block;border-collapse:collapse;margin:1rem 0;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}th,td{border:1px solid #dfe2e5;padding:.6em 1em}blockquote{margin:1rem 0;border-left:.2rem solid #dfe2e5;padding:.25rem 0 .25rem 1rem;font-size:1rem;color:#999}blockquote>p{margin:0}form{margin:0}.theme.sidebar-open .sidebar-mask{display:block}.theme.no-navbar>h1,.theme.no-navbar>h2,.theme.no-navbar>h3,.theme.no-navbar>h4,.theme.no-navbar>h5,.theme.no-navbar>h6{margin-top:1.5rem;padding-top:0}.theme.no-navbar aside{top:0}@media screen and (min-width: 720px){.theme.no-sidebar aside{display:none}.theme.no-sidebar main{margin-left:0}}.sidebar-mask{position:fixed;z-index:2;display:none;width:100vw;height:100vh}code{margin:0;border-radius:3px;padding:.25rem .5rem;font-family:var(--code-font-family);font-size:.85em;color:var(--c-text-light);background-color:var(--code-inline-bg-color)}code .token.deleted{color:#ec5975}code .token.inserted{color:var(--c-brand)}div[class*=language-]{position:relative;margin:1rem -1.5rem;background-color:var(--code-bg-color);overflow-x:auto}li>div[class*=language-]{border-radius:6px 0 0 6px;margin:1rem -1.5rem 1rem -1.25rem;line-height:initial}@media (min-width: 420px){div[class*=language-]{margin:1rem 0;border-radius:6px}li>div[class*=language-]{margin:1rem 0 1rem 0rem;border-radius:6px}}[class*=language-] pre,[class*=language-] code{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;background:transparent}[class*=language-] pre{position:relative;z-index:1;margin:0;padding:1.25rem 1.5rem;overflow-x:auto}[class*=language-] code{padding:0;line-height:var(--code-line-height);font-size:var(--code-font-size);color:#eee}.highlight-lines{position:absolute;top:0;bottom:0;left:0;padding:1.25rem 0;width:100%;line-height:var(--code-line-height);font-family:var(--code-font-family);font-size:var(--code-font-size);user-select:none;overflow:hidden}.highlight-lines .highlighted{background-color:#000000a8}div[class*=language-].line-numbers-mode{padding-left:3.5rem}.line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid rgba(0,0,0,.5);padding:1.25rem 0;width:3.5rem;text-align:center;line-height:var(--code-line-height);font-family:var(--code-font-family);font-size:var(--code-font-size);color:#888}div[class*=language-]:before{position:absolute;top:.6em;right:1em;z-index:2;font-size:.8rem;color:#888}div[class~=language-html]:before,div[class~=language-markup]:before{content:"html"}div[class~=language-md]:before,div[class~=language-markdown]:before{content:"md"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"styl"}div[class~=language-js]:before,div[class~=language-javascript]:before{content:"js"}div[class~=language-ts]:before,div[class~=language-typescript]:before{content:"ts"}div[class~=language-json]:before{content:"json"}div[class~=language-rb]:before,div[class~=language-ruby]:before{content:"rb"}div[class~=language-py]:before,div[class~=language-python]:before{content:"py"}div[class~=language-sh]:before,div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}div[class~=language-go]:before{content:"go"}div[class~=language-rust]:before{content:"rust"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-vue]:before{content:"vue"}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.custom-block.tip,.custom-block.info,.custom-block.warning,.custom-block.danger{margin:1rem 0;border-left:.5rem solid;padding:.1rem 1.5rem;overflow-x:auto}.custom-block.tip{background-color:#f3f5f7;border-color:var(--c-brand)}.custom-block.info{background-color:#f3f5f7;border-color:var(--c-text-light-2)}.custom-block.warning{border-color:#e7c000;color:#6b5900;background-color:#ffe5644d}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:var(--c-text)}.custom-block.danger{border-color:#c00;color:#4d0000;background-color:#ffe6e6}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:var(--c-text)}.custom-block.details{position:relative;display:block;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.custom-block-title{margin-bottom:-.4rem;font-weight:600}.sidebar-links{margin:0;padding:0;list-style:none}.sidebar-link-item{display:block;margin:0;border-left:.25rem solid transparent;color:var(--c-text)}a.sidebar-link-item:hover{text-decoration:none;color:var(--c-brand)}a.sidebar-link-item.active{color:var(--c-brand)}.sidebar>.sidebar-links{padding:.75rem 0 5rem}@media (min-width: 720px){.sidebar>.sidebar-links{padding:1.5rem 0}}.sidebar>.sidebar-links>.sidebar-link+.sidebar-link{padding-top:.5rem}@media (min-width: 720px){.sidebar>.sidebar-links>.sidebar-link+.sidebar-link{padding-top:1.25rem}}.sidebar>.sidebar-links>.sidebar-link>.sidebar-link-item{padding:.35rem 1.5rem .35rem 1.25rem;font-size:1.1rem;font-weight:700}.sidebar>.sidebar-links>.sidebar-link>a.sidebar-link-item.active{border-left-color:var(--c-brand);font-weight:600}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-link-item{display:block;padding:.35rem 1.5rem .35rem 2rem;line-height:1.4;font-size:1rem;font-weight:400}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>a.sidebar-link-item.active{border-left-color:var(--c-brand);font-weight:600}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-link-item{display:block;padding:.3rem 1.5rem .3rem 3rem;line-height:1.4;font-size:.9rem;font-weight:400}.sidebar>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-links>.sidebar-link>.sidebar-link-item{display:block;padding:.3rem 1.5rem .3rem 4rem;line-height:1.4;font-size:.9rem;font-weight:400}.debug[data-v-5e4ed9be]{box-sizing:border-box;position:fixed;right:8px;bottom:8px;z-index:9999;border-radius:4px;width:74px;height:32px;color:#eee;overflow:hidden;cursor:pointer;background-color:#000000d9;transition:all .15s ease}.debug[data-v-5e4ed9be]:hover{background-color:#000000bf}.debug.open[data-v-5e4ed9be]{right:0;bottom:0;width:100%;height:100%;margin-top:0;border-radius:0;padding:0;overflow:scroll}@media (min-width: 512px){.debug.open[data-v-5e4ed9be]{width:512px}}.debug.open[data-v-5e4ed9be]:hover{background-color:#000000d9}.title[data-v-5e4ed9be]{margin:0;padding:6px 16px;line-height:20px;font-size:13px}.block[data-v-5e4ed9be]{margin:2px 0 0;border-top:1px solid rgba(255,255,255,.16);padding:8px 16px;font-family:Hack,monospace;font-size:13px}.block+.block[data-v-5e4ed9be]{margin-top:8px}.icon.outbound{position:relative;top:-1px;display:inline-block;vertical-align:middle;color:var(--c-text-lighter)}.item[data-v-2cb643ba]{display:block;padding:0 1.5rem;line-height:36px;font-size:1rem;font-weight:600;color:var(--c-text);white-space:nowrap}.item[data-v-2cb643ba]:hover,.item.active[data-v-2cb643ba]{text-decoration:none;color:var(--c-brand)}.item.external[data-v-2cb643ba]:hover{border-bottom-color:transparent;color:var(--c-text)}@media (min-width: 720px){.item[data-v-2cb643ba]{border-bottom:2px solid transparent;padding:0;line-height:24px;font-size:.9rem;font-weight:500}.item[data-v-2cb643ba]:hover,.item.active[data-v-2cb643ba]{border-bottom-color:var(--c-brand);color:var(--c-text)}}.home-hero[data-v-562a0580]{margin:2.5rem 0 2.75rem;padding:0 1.5rem;text-align:center}@media (min-width: 420px){.home-hero[data-v-562a0580]{margin:3.5rem 0}}@media (min-width: 720px){.home-hero[data-v-562a0580]{margin:4rem 0 4.25rem}}.figure[data-v-562a0580]{padding:0 1.5rem}.image[data-v-562a0580]{display:block;margin:0 auto;width:auto;max-width:100%;max-height:280px}.title[data-v-562a0580]{margin-top:1.5rem;font-size:2rem}@media (min-width: 420px){.title[data-v-562a0580]{font-size:3rem}}@media (min-width: 720px){.title[data-v-562a0580]{margin-top:2rem}}.tagline[data-v-562a0580]{margin:0;margin-top:.25rem;line-height:1.3;font-size:1.2rem;color:var(--c-text-light)}@media (min-width: 420px){.tagline[data-v-562a0580]{line-height:1.2;font-size:1.6rem}}.action[data-v-562a0580]{margin-top:1.5rem;display:inline-block}.action.alt[data-v-562a0580]{margin-left:1.5rem}@media (min-width: 420px){.action[data-v-562a0580]{margin-top:2rem;display:inline-block}}.action[data-v-562a0580] .item{display:inline-block;border-radius:6px;padding:0 20px;line-height:44px;font-size:1rem;font-weight:500;color:var(--c-bg);background-color:var(--c-brand);border:2px solid var(--c-brand);transition:background-color .1s ease}.action.alt[data-v-562a0580] .item{background-color:var(--c-bg);color:var(--c-brand)}.action[data-v-562a0580] .item:hover{text-decoration:none;color:var(--c-bg);background-color:var(--c-brand-light)}@media (min-width: 420px){.action[data-v-562a0580] .item{padding:0 24px;line-height:52px;font-size:1.2rem;font-weight:500}}.home-features[data-v-6ab60ae0]{margin:0 auto;padding:2.5rem 0 2.75rem;max-width:960px}.home-hero+.home-features[data-v-6ab60ae0]{padding-top:0}@media (min-width: 420px){.home-features[data-v-6ab60ae0]{padding:3.25rem 0 3.5rem}.home-hero+.home-features[data-v-6ab60ae0]{padding-top:0}}@media (min-width: 720px){.home-features[data-v-6ab60ae0]{padding-right:1.5rem;padding-left:1.5rem}}.wrapper[data-v-6ab60ae0]{padding:0 1.5rem}.home-hero+.home-features .wrapper[data-v-6ab60ae0]{border-top:1px solid var(--c-divider);padding-top:2.5rem}@media (min-width: 420px){.home-hero+.home-features .wrapper[data-v-6ab60ae0]{padding-top:3.25rem}}@media (min-width: 720px){.wrapper[data-v-6ab60ae0]{padding-right:0;padding-left:0}}.container[data-v-6ab60ae0]{margin:0 auto;max-width:392px}@media (min-width: 720px){.container[data-v-6ab60ae0]{max-width:960px}}.features[data-v-6ab60ae0]{display:flex;flex-wrap:wrap;margin:-20px -24px}.feature[data-v-6ab60ae0]{flex-shrink:0;padding:20px 24px;width:100%}@media (min-width: 720px){.feature[data-v-6ab60ae0]{width:calc(100% / 3)}}.title[data-v-6ab60ae0]{margin:0;border-bottom:0;line-height:1.4;font-size:1.25rem;font-weight:500}@media (min-width: 420px){.title[data-v-6ab60ae0]{font-size:1.4rem}}.details[data-v-6ab60ae0]{margin:0;line-height:1.6;font-size:1rem;color:var(--c-text-light)}.title+.details[data-v-6ab60ae0]{padding-top:.25rem}.footer[data-v-f7637290]{margin:0 auto;max-width:960px}@media (min-width: 720px){.footer[data-v-f7637290]{padding:0 1.5rem}}.container[data-v-f7637290]{padding:2rem 1.5rem 2.25rem}.home-hero+.footer .container[data-v-f7637290],.home-features+.footer .container[data-v-f7637290],.home-content+.footer .container[data-v-f7637290]{border-top:1px solid var(--c-divider)}@media (min-width: 420px){.container[data-v-f7637290]{padding:3rem 1.5rem 3.25rem}}.text[data-v-f7637290]{margin:0;text-align:center;line-height:1.4;font-size:.9rem;color:var(--c-text-light)}.home[data-v-782aae37]{padding-top:var(--header-height)}.home-content[data-v-782aae37]{max-width:960px;margin:0 auto;padding:0 1.5rem}.nav-bar-title[data-v-b3da5816]{font-size:1.3rem;font-weight:600;color:var(--c-text);display:flex;justify-content:center;align-items:center}.nav-bar-title[data-v-b3da5816]:hover{text-decoration:none}.logo[data-v-b3da5816]{margin-right:.75rem;height:1.3rem;vertical-align:bottom}.item[data-v-34231d90]{display:block;padding:0 1.5rem 0 2.5rem;line-height:32px;font-size:.9rem;font-weight:500;color:var(--c-text);white-space:nowrap}@media (min-width: 720px){.item[data-v-34231d90]{padding:0 24px 0 12px;line-height:32px;font-size:.85rem;font-weight:500;color:var(--c-text);white-space:nowrap}.item.active .arrow[data-v-34231d90]{opacity:1}}.item[data-v-34231d90]:hover,.item.active[data-v-34231d90]{text-decoration:none;color:var(--c-brand)}.item.external[data-v-34231d90]:hover{border-bottom-color:transparent;color:var(--c-text)}@media (min-width: 720px){.arrow[data-v-34231d90]{display:inline-block;margin-right:8px;border-top:6px solid #ccc;border-right:4px solid transparent;border-bottom:0;border-left:4px solid transparent;vertical-align:middle;opacity:0;transform:translateY(-2px) rotate(-90deg)}}.nav-dropdown-link[data-v-64b865bf]{position:relative;height:36px;overflow:hidden;cursor:pointer}@media (min-width: 720px){.nav-dropdown-link[data-v-64b865bf]{height:auto;overflow:visible}.nav-dropdown-link:hover .dialog[data-v-64b865bf]{display:block}}.nav-dropdown-link.open[data-v-64b865bf]{height:auto}.button[data-v-64b865bf]{display:block;border:0;padding:0 1.5rem;width:100%;text-align:left;line-height:36px;font-family:var(--font-family-base);font-size:1rem;font-weight:600;color:var(--c-text);white-space:nowrap;background-color:transparent;cursor:pointer}.button[data-v-64b865bf]:focus{outline:0}@media (min-width: 720px){.button[data-v-64b865bf]{border-bottom:2px solid transparent;padding:0;line-height:24px;font-size:.9rem;font-weight:500}}.button-arrow[data-v-64b865bf]{display:inline-block;margin-top:-1px;margin-left:8px;border-top:6px solid #ccc;border-right:4px solid transparent;border-bottom:0;border-left:4px solid transparent;vertical-align:middle}.button-arrow.right[data-v-64b865bf]{transform:rotate(-90deg)}@media (min-width: 720px){.button-arrow.right[data-v-64b865bf]{transform:rotate(0)}}.dialog[data-v-64b865bf]{margin:0;padding:0;list-style:none}@media (min-width: 720px){.dialog[data-v-64b865bf]{display:none;position:absolute;top:26px;right:-8px;border-radius:6px;padding:12px 0;min-width:128px;background-color:var(--c-bg);box-shadow:var(--shadow-3)}}.nav-links[data-v-0fce24fe]{padding:.75rem 0;border-bottom:1px solid var(--c-divider)}@media (min-width: 720px){.nav-links[data-v-0fce24fe]{display:flex;padding:6px 0 0;align-items:center;border-bottom:0}.item+.item[data-v-0fce24fe]{padding-left:24px}}.sidebar-button{position:absolute;top:.6rem;left:1rem;display:none;padding:.6rem;cursor:pointer}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media screen and (max-width: 719px){.sidebar-button{display:block}}.nav-bar[data-v-2ba227d5]{position:fixed;top:0;right:0;left:0;z-index:var(--z-index-navbar);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-divider);padding:.7rem 1.5rem .7rem 4rem;height:var(--header-height);background-color:var(--c-bg)}@media (min-width: 720px){.nav-bar[data-v-2ba227d5]{padding:.7rem 1.5rem}}.flex-grow[data-v-2ba227d5]{flex-grow:1}.nav[data-v-2ba227d5]{display:none}@media (min-width: 720px){.nav[data-v-2ba227d5]{display:block}}.sidebar[data-v-79af364c]{position:fixed;top:var(--header-height);bottom:0;left:0;z-index:var(--z-index-sidebar);border-right:1px solid var(--c-divider);width:16.4rem;background-color:var(--c-bg);overflow-y:auto;transform:translate(-100%);transition:transform .25s ease}@media (min-width: 720px){.sidebar[data-v-79af364c]{transform:translate(0)}}@media (min-width: 960px){.sidebar[data-v-79af364c]{width:20rem}}.sidebar.open[data-v-79af364c]{transform:translate(0)}.nav[data-v-79af364c]{display:block}@media (min-width: 720px){.nav[data-v-79af364c]{display:none}}.link[data-v-40c300d5]{display:inline-block;font-size:1rem;font-weight:500;color:var(--c-text-light)}.link[data-v-40c300d5]:hover{text-decoration:none;color:var(--c-brand)}.icon[data-v-40c300d5]{margin-left:4px}.last-updated[data-v-19e5f167]{display:inline-block;margin:0;line-height:1.4;font-size:.9rem;color:var(--c-text-light)}@media (min-width: 960px){.last-updated[data-v-19e5f167]{font-size:1rem}}.prefix[data-v-19e5f167]{display:inline-block;font-weight:500}.datetime[data-v-19e5f167]{display:inline-block;margin-left:6px;font-weight:400}.page-footer[data-v-504b1bfc]{padding-top:1rem;padding-bottom:1rem;overflow:auto}@media (min-width: 960px){.page-footer[data-v-504b1bfc]{display:flex;justify-content:space-between;align-items:center}}.updated[data-v-504b1bfc]{padding-top:4px}@media (min-width: 960px){.updated[data-v-504b1bfc]{padding-top:0}}.next-and-prev-link[data-v-0f10f042]{padding-top:1rem}.container[data-v-0f10f042]{display:flex;justify-content:space-between;border-top:1px solid var(--c-divider);padding-top:1rem}.prev[data-v-0f10f042],.next[data-v-0f10f042]{display:flex;flex-shrink:0;width:50%}.prev[data-v-0f10f042]{justify-content:flex-start;padding-right:12px}.next[data-v-0f10f042]{justify-content:flex-end;padding-left:12px}.link[data-v-0f10f042]{display:inline-flex;align-items:center;max-width:100%;font-size:1rem;font-weight:500}.text[data-v-0f10f042]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon[data-v-0f10f042]{display:block;flex-shrink:0;width:16px;height:16px;fill:var(--c-text);transform:translateY(1px)}.icon-prev[data-v-0f10f042]{margin-right:8px}.icon-next[data-v-0f10f042]{margin-left:8px}.page[data-v-30e7de44]{padding-top:var(--header-height)}@media (min-width: 720px){.page[data-v-30e7de44]{margin-left:16.4rem}}@media (min-width: 960px){.page[data-v-30e7de44]{margin-left:20rem}}.container[data-v-30e7de44]{margin:0 auto;padding:0 1.5rem 4rem;max-width:48rem}.content[data-v-30e7de44]{padding-bottom:1.5rem}@media (max-width: 420px){.content[data-v-30e7de44]{clear:both}}#ads-container{margin:0 auto}@media (min-width: 420px){#ads-container{position:relative;right:0;float:right;margin:-8px -8px 24px 24px;width:146px}}@media (max-width: 420px){#ads-container{height:105px;margin:1.75rem 0}}@media (min-width: 1400px){#ads-container{position:fixed;right:8px;bottom:8px}}/*! @docsearch/css 3.0.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"\bb "}.DocSearch-Prefill{appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:1px;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.algolia-search-box{padding-top:1px}@media (min-width: 720px){.algolia-search-box{padding-left:8px}}@media (min-width: 751px){.algolia-search-box{min-width:176.3px}.algolia-search-box .DocSearch-Button-Placeholder{padding-left:8px;font-size:.9rem;font-weight:500}}.DocSearch{--docsearch-primary-color: var(--c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-text-color: var(--c-text-light);--docsearch-muted-color: var(--c-text-lighter);--docsearch-searchbox-background: #f2f2f2} diff --git a/assets/zh-cn_api_index.md.d35aa510.js b/assets/zh-cn_api_index.md.d35aa510.js new file mode 100644 index 00000000..1e6d774a --- /dev/null +++ b/assets/zh-cn_api_index.md.d35aa510.js @@ -0,0 +1,41 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u7F16\u7801\u53C2\u8003","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"\u4E8B\u4EF6","slug":"\u4E8B\u4EF6"},{"level":2,"title":"\u5168\u5C40\u65B9\u6CD5","slug":"\u5168\u5C40\u65B9\u6CD5"},{"level":3,"title":"generateChart","slug":"generatechart"},{"level":2,"title":"\u5B9E\u4F8B\u65B9\u6CD5","slug":"\u5B9E\u4F8B\u65B9\u6CD5"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"addPlugin","slug":"addplugin"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"Chart.js \u5BF9\u8C61","slug":"chart-js-\u5BF9\u8C61"},{"level":2,"title":"Canvas","slug":"canvas"}],"relativePath":"zh-cn/api/index.md","lastUpdated":1690983419000}',e={},p=t(`

\u7F16\u7801\u53C2\u8003

Props

\u8FD9\u91CC\u6709\u4E00\u4E9Bvue-chartjs\u63D0\u4F9B\u7684\u57FA\u672C\u53C2\u6570\u5B9A\u4E49. \u56E0\u4E3A\u4F60\u662F extend \u4ED6\u4EEC\u7684, \u6240\u4EE5\u4ED6\u4EEC\u662F\u4E0D\u53EF\u89C1\u7684, \u4F46\u662F\u4F60\u53EF\u4EE5\u8986\u76D6\u4ED6\u4EEC:

\u53C2\u6570\u540D\u63CF\u8FF0
width\u56FE\u8868\u5BBD\u5EA6
height\u56FE\u8868\u9AD8\u5EA6
chart-idcanvas\u7684id
css-classescss\u7C7B\u7684\u5B57\u7B26\u4E32
stylescss \u6837\u5F0F\u5BF9\u8C61
pluginschartjs \u63D2\u4EF6\u6570\u7EC4

\u4E8B\u4EF6

\u5982\u679C reactiveData \u6216\u8005 reactiveProp mixin \u88AB\u9644\u52A0, \u4E0B\u9762\u4E8B\u4EF6\u5C06\u4F1A\u88AB\u8C03\u7528:

\u4E8B\u4EF6\u63CF\u8FF0
chart:render\u5982\u679C mixin \u6267\u884C\u5B8C\u5168\u91CD\u7ED8
chart:destroy\u5982\u679C mixin \u5220\u9664\u56FE\u8868\u5BF9\u8C61\u5B9E\u4F8B
chart:update\u5982\u679C mixin \u6267\u884C\u66F4\u65B0\u800C\u4E0D\u662F\u91CD\u7ED8
labels:update\u5982\u679C\u8BBE\u7F6E\u4E86\u65B0\u7684labels
xlabels:update\u5982\u679C\u8BBE\u7F6E\u4E86\u65B0\u7684xLabels
ylabels:update\u5982\u679C\u8BBE\u7F6E\u4E86\u65B0\u7684yLabels

\u5168\u5C40\u65B9\u6CD5

\u5168\u5C40\u65B9\u6CD5\u9700\u8981\u88AB\u5F15\u5165\u624D\u80FD\u4F7F\u7528.

generateChart

  • \u7C7B\u578B: Function
  • \u53C2\u6570: chart-id, chart-type
  • \u4F7F\u7528:
import { generateChart } from 'vue-chartjs'
+// \u7B2C\u4E00\u4E2A\u53C2\u6570\u662F \u56FE\u8868id, \u7B2C\u4E8C\u4E2A\u53C2\u6570\u662F \u56FE\u8868\u7C7B\u578B.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+

\u5B9E\u4F8B\u65B9\u6CD5

\u5B9E\u4F8B\u65B9\u6CD5\u53EF\u4EE5\u5728\u4F60\u56FE\u8868\u7EC4\u4EF6\u5185\u90E8\u4F7F\u7528.

generateLegend()

\u7528\u6765\u751F\u6210HTML\u8BF4\u660E\u7684\u5DE5\u5177\u51FD\u6570.

  • \u7C7B\u578B: Function
  • \u53C2\u6570: none
  • \u4F7F\u7528:










\xA0




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

\u5728 Chart.js \u4F60\u53EF\u4EE5\u5B9A\u4E49\u5168\u5C40\u548C\u5185\u8054\u63D2\u4EF6. \u5168\u5C40\u63D2\u4EF6\u5728\u6CA1\u6709 vue-chartjs\u4E5F\u53EF\u4EE5\u5DE5\u4F5C. \u5C31\u50CF\u8FD9\u4E2A\u6587\u6863Chart.js docs \u63CF\u8FF0\u7684.

\u5982\u679C\u4F60\u9700\u8981\u6DFB\u52A0\u5185\u8054\u63D2\u4EF6, vue-chartjs \u66B4\u9732\u51FA\u6765\u4E86\u4E00\u4E2A\u5DE5\u5177\u65B9\u6CD5 addPlugin() \u4F60\u53EF\u4EE5\u5728renderChart()\u65B9\u6CD5\u524D\u8C03\u7528addPlugin().

  • \u7C7B\u578B: Function
  • \u53C2\u6570: Array \u63D2\u4EF6\u6570\u7EC4
  • \u4F7F\u7528:
mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+

renderChart()

\u521B\u5EFA\u4E00\u4E2A Chart.js \u5B9E\u4F8B, \u5E76\u6E32\u67D3\u56FE\u8868

  • \u7C7B\u578B: Function
  • \u53C2\u6570: Chart Data, Chart Options
  • \u4F7F\u7528:
mounted () {
+  this.renderChart({
+    labels: ['January', 'February'],
+    datasets: [
+      {
+        label: 'Data One',
+        backgroundColor: '#f87979',
+        data: [40, 20]
+      }
+    ]},
+    {
+      responsive: true
+    }
+  )
+}
+

Chart.js \u5BF9\u8C61

\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u56FE\u8868\u7EC4\u4EF6\u91CC, \u901A\u8FC7 this.$data._chart \u8BBF\u95EE Chart.js \u5BF9\u8C61

Canvas

\u4F60\u53EF\u4EE5\u901A\u8FC7 this.$refs.canvas \u8BBF\u95EE canvas

`,31),o=[p];function c(r,l,d,i,u,k){return s(),a("div",null,o)}var b=n(e,[["render",c]]);export{g as __pageData,b as default}; diff --git a/assets/zh-cn_api_index.md.d35aa510.lean.js b/assets/zh-cn_api_index.md.d35aa510.lean.js new file mode 100644 index 00000000..3e2504f5 --- /dev/null +++ b/assets/zh-cn_api_index.md.d35aa510.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u7F16\u7801\u53C2\u8003","description":"","frontmatter":{},"headers":[{"level":2,"title":"Props","slug":"props"},{"level":2,"title":"\u4E8B\u4EF6","slug":"\u4E8B\u4EF6"},{"level":2,"title":"\u5168\u5C40\u65B9\u6CD5","slug":"\u5168\u5C40\u65B9\u6CD5"},{"level":3,"title":"generateChart","slug":"generatechart"},{"level":2,"title":"\u5B9E\u4F8B\u65B9\u6CD5","slug":"\u5B9E\u4F8B\u65B9\u6CD5"},{"level":3,"title":"generateLegend()","slug":"generatelegend"},{"level":3,"title":"addPlugin","slug":"addplugin"},{"level":3,"title":"renderChart()","slug":"renderchart"},{"level":2,"title":"Chart.js \u5BF9\u8C61","slug":"chart-js-\u5BF9\u8C61"},{"level":2,"title":"Canvas","slug":"canvas"}],"relativePath":"zh-cn/api/index.md","lastUpdated":1690983419000}',e={},p=t("",31),o=[p];function c(r,l,d,i,u,k){return s(),a("div",null,o)}var b=n(e,[["render",c]]);export{g as __pageData,b as default}; diff --git a/assets/zh-cn_guide_index.md.750273c0.js b/assets/zh-cn_guide_index.md.750273c0.js new file mode 100644 index 00000000..c1875aab --- /dev/null +++ b/assets/zh-cn_guide_index.md.750273c0.js @@ -0,0 +1,257 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u8D77\u6B65","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4ECB\u7ECD","slug":"\u4ECB\u7ECD"},{"level":2,"title":"\u5B89\u88C5","slug":"\u5B89\u88C5"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"\u6D4F\u89C8\u5668","slug":"\u6D4F\u89C8\u5668"},{"level":2,"title":"\u6574\u5408","slug":"\u6574\u5408"},{"level":2,"title":"\u521B\u5EFA\u4F60\u81EA\u5DF1\u7684\u7B2C\u4E00\u4E2A\u56FE\u8868","slug":"\u521B\u5EFA\u4F60\u81EA\u5DF1\u7684\u7B2C\u4E00\u4E2A\u56FE\u8868"},{"level":3,"title":"Vue \u5355\u6587\u4EF6\u7EC4\u4EF6","slug":"vue-\u5355\u6587\u4EF6\u7EC4\u4EF6"},{"level":2,"title":"\u66F4\u65B0 Charts","slug":"\u66F4\u65B0-charts"},{"level":3,"title":"\u4F8B\u5B50","slug":"\u4F8B\u5B50"},{"level":3,"title":"\u4E8B\u4EF6","slug":"\u4E8B\u4EF6"},{"level":3,"title":"\u6545\u969C\u6392\u67E5","slug":"\u6545\u969C\u6392\u67E5"},{"level":2,"title":"\u4F8B\u5B50","slug":"\u4F8B\u5B50-1"},{"level":3,"title":"\u4F7F\u7528props\u7684\u56FE\u8868","slug":"\u4F7F\u7528props\u7684\u56FE\u8868"},{"level":3,"title":"\u56FE\u8868\u4F7F\u7528\u672C\u5730\u6570\u636E","slug":"\u56FE\u8868\u4F7F\u7528\u672C\u5730\u6570\u636E"},{"level":3,"title":"Chart\u4F7F\u7528API\u7684\u6570\u636E","slug":"chart\u4F7F\u7528api\u7684\u6570\u636E"},{"level":3,"title":"Chart\u7684\u52A8\u6001\u6837\u5F0F","slug":"chart\u7684\u52A8\u6001\u6837\u5F0F"},{"level":3,"title":"\u81EA\u5B9A\u4E49/\u65B0\u7684\u56FE\u8868","slug":"\u81EA\u5B9A\u4E49-\u65B0\u7684\u56FE\u8868"},{"level":2,"title":"\u8D44\u6E90","slug":"\u8D44\u6E90"}],"relativePath":"zh-cn/guide/index.md","lastUpdated":1690983419000}',p={},o=t(`

\u8D77\u6B65

vue-chartjs \u662F Vue \u5BF9\u4E8E Chart.js \u7684\u5C01\u88C5. \u4F60\u53EF\u4EE5\u5F88\u7B80\u5355\u7684\u521B\u5EFA\u53EF\u590D\u7528\u7684\u56FE\u8868\u7EC4\u4EF6.

\u4ECB\u7ECD

vue-chartjs \u8BA9\u4F60\u5728 Vue \u4E2D\u80FD\u66F4\u597D\u7684\u4F7F\u7528 Chart.js . \u975E\u5E38\u9002\u5408\u60F3\u8981\u5C3D\u5FEB\u542F\u52A8\u548C\u8FD0\u884C\u7B80\u5355\u56FE\u8868\u7684\u4EBA

\u5B83\u62BD\u8C61\u4E86\u4E00\u4E9B\u7B80\u5355\u7684\u903B\u8F91, \u4F46\u662F\u4E5F\u66B4\u9732\u4E86 Chart.js \u5BF9\u8C61, \u63D0\u4F9B\u4E86\u6781\u5927\u7684\u7075\u6D3B\u6027.

\u5B89\u88C5

NPM

\u4F60\u53EF\u4EE5\u5728 npm \u4E0B\u5B89\u88C5 vue-chartjs. \u5F53\u7136, \u4F60\u4E5F\u9700\u8981\u5728\u9879\u76EE\u4E2D\u5B89\u88C5 chart.js \u4F9D\u8D56. \u56E0\u4E3A Chart.js \u662F\u4E00\u4E2A peerDependency. \u8FD9\u79CD\u65B9\u5F0F\u4F60\u53EF\u4EE5\u5B8C\u5168\u63A7\u5236 Chart.js \u7684\u7248\u672C

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

TIP

\u5982\u679C\u4F60\u4F7F\u7528\u7684\u662F vue 1.x \u7248\u672C, \u8BF7\u4F7F\u7528 legacy \u6807\u7B7E. \u7136\u800C, Vue 1 \u6240\u652F\u6301\u7684\u7248\u672C\u4E0D\u518D\u7EF4\u62A4\u4E86.

yarn add vue-chartjs@legacy

\u6D4F\u89C8\u5668

\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u5728\u6D4F\u89C8\u5668\u4E2D\u4F7F\u7528 vue-chartjs. \u5148\u6DFB\u52A0 Chart.js \u811A\u672C, \u518D\u6DFB\u52A0 vue-chartjs \u811A\u672C.

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

\u6574\u5408

Chart.js \u5C06\u6240\u6709\u53EF\u7528\u7684\u56FE\u8868\u7C7B\u578B, \u90FD\u5BFC\u51FA\u4E3A\u547D\u540D\u7EC4\u4EF6, \u5E76\u53EF\u4EE5\u76F4\u63A5\u5BFC\u5165\u5B83\u4EEC. \u8FD9\u4E9B\u7EC4\u4EF6\u90FD\u662F\u666E\u901A\u7684 Vue \u7EC4\u4EF6, \u7136\u800C, \u4F60\u9700\u8981\u6269\u5C55\u5B83.

vue-chartjs \u7684\u60F3\u6CD5\u662F\u63D0\u4F9B\u5BB9\u6613\u4F7F\u7528\u7684\u7EC4\u4EF6, \u5E76\u4E14\u5177\u6709\u6700\u5927\u9650\u5EA6\u7684\u7075\u6D3B\u6027\u548C\u6269\u5C55\u6027. \u8981\u5B9E\u73B0\u8FD9\u4E00\u70B9, \u4F60\u9700\u8981\u521B\u5EFA\u4F60\u81EA\u5DF1\u7684 Chart Component \u5E76\u901A\u8FC7 vue-chartjs \u63D0\u4F9B\u7684\u7EC4\u4EF6\u6765\u6269\u5C55\u5B83.

\u8FD9\u6837\uFF0CChart\u7EC4\u4EF6\u4E2D\u7684\u65B9\u6CD5\u548C\u903B\u8F91\u5C31\u53EF\u4EE5\u5408\u5E76\u5230\u60A8\u81EA\u5DF1\u7684\u56FE\u8868\u7EC4\u4EF6\u4E2D.

\u521B\u5EFA\u4F60\u81EA\u5DF1\u7684\u7B2C\u4E00\u4E2A\u56FE\u8868

\u4F60\u9700\u8981\u5F15\u5165\u4E00\u4E2A\u57FA\u672C\u56FE\u8868\u7136\u540E\u6269\u5C55\u5B83. \u8FD9\u4E3A\u5904\u7406\u4E0D\u540C\u6570\u636E\u65F6\u63D0\u4F9B\u4E86\u66F4\u5927\u7684\u7075\u6D3B\u6027. \u4F60\u53EF\u4EE5\u5C01\u88C5\u4F60\u7684\u7EC4\u4EF6\u4EE5\u53CA\u4F7F\u7528props\u6765\u5904\u7406\u6570\u636E, \u6216\u8005\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u7EC4\u4EF6\u91CC\u8F93\u5165\u4ED6\u4EEC. \u5F53\u7136, \u5982\u679C\u90A3\u6837\u505A, \u4F60\u7684\u7EC4\u4EF6\u5C31\u65E0\u6CD5\u590D\u7528\u4E86.

\u4F60\u53EF\u4EE5\u5F15\u5165\u6574\u4E2A\u9879\u76EE\u6216\u8005\u6BCF\u4E2A\u6A21\u5757\u5355\u72EC\u5F15\u7528. \u4E4B\u540E\u4F60\u9700\u8981\u4F7F\u7528extends:\u6216\u8005 mixins:[]. \u7136\u540E\u5728 mounted() \u4E2D\u8C03\u7528 this.renderChart(). \u8FD9\u5C06\u521B\u5EFA\u4F60\u7684\u56FE\u8868\u5B9E\u4F8B.

\xA0


\xA0

\xA0



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

TIP

\u4F60\u53EF\u4EE5\u4F7F\u7528 extends: Bar \u6216\u8005 mixins: [Bar]

this.renderChart() \u65B9\u6CD5\u7531 Bar \u7EC4\u4EF6\u63D0\u4F9B, \u63A5\u6536\u4E24\u4E2A\u5BF9\u8C61\u53C2\u6570.\u7B2C\u4E00\u4E2A\u662F\u4F60\u7684\u56FE\u8868\u6570\u636E, \u7B2C\u4E8C\u4E2A\u662F\u914D\u7F6E\u5BF9\u8C61.

\u5728\u8FD9\u4E2A\u6587\u6863\u4E2D\u67E5\u770B\u4F60\u9700\u8981\u63D0\u4F9B\u7684\u5BF9\u8C61\u7ED3\u6784 Chart.js docs .

Vue \u5355\u6587\u4EF6\u7EC4\u4EF6

\u6587\u6863\u4E2D\u5F88\u591A\u4F8B\u5B50\u90FD\u662F\u57FA\u4E8Ejavascript\u6587\u4EF6 \u800C\u4E0D\u662F .vue \u6587\u4EF6. \u8FD9\u662F\u56E0\u4E3A\u4F60\u5927\u591A\u6570\u53EA\u9700\u8981<script>.\u5F53\u7136\u5728 .vue \u6587\u4EF6\u4E2D\u4F60\u4E5F\u80FD\u7528\u7684\u5F88\u597D.

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

\u4E0D\u8981\u4F7F\u7528Template\u6807\u7B7E

\u4E0D\u8981\u5728\u4F60\u7684 .vue \u6587\u4EF6\u4E2D\u5F15\u5165 <template> \u6807\u7B7E. Vue \u65E0\u6CD5 \u5408\u5E76\u6A21\u677F.\u5982\u679C\u4F60\u6DFB\u52A0\u4E86\u4E00\u4E2A\u7A7A\u7684 <template> \u6807\u7B7E, Vue \u5C06\u4F1A\u4ECE\u4F60\u7684\u4E3B\u952E\u91CC\u83B7\u53D6\u6A21\u677F, \u800C\u4E0D\u4F1A\u4ECE\u4F60 extend \u4E2D\u83B7\u53D6, \u8FD9\u5C06\u5BFC\u81F4\u9875\u9762\u4E3A\u7A7A\u5E76\u62A5\u9519.

\u66F4\u65B0 Charts

\u5982\u679C\u4F60\u4FEE\u6539\u4E86\u6570\u636E\u96C6, Chart.js \u662F\u4E0D\u4F1A\u63D0\u4F9B\u5B9E\u65F6\u66F4\u65B0\u7684. \u5F53\u7136, vue-chartjs \u63D0\u4F9B\u4E86\u4E24\u4E2A mixins \u6765\u5B9E\u73B0.

  • reactiveProp
  • reactiveData

\u8FD9\u4E24\u4E2Amixins\u5176\u5B9E\u5B9E\u73B0\u7684\u662F\u76F8\u540C\u7684\u529F\u80FD. \u5927\u591A\u6570\u65F6\u95F4\u4F60\u5C06\u4F1A\u4F7F\u7528reactiveProp. \u5B83\u6269\u5C55\u4E86\u56FE\u8868\u7EC4\u4EF6\u7684\u903B\u8F91, \u5E76\u81EA\u52A8\u521B\u5EFA\u540D\u4E3A chartData \u7684props\u53C2\u6570, \u5E76\u4E3A\u8FD9\u4E2A\u53C2\u6570\u6DFB\u52A0vue watch. \u5F53\u6570\u636E\u6539\u53D8, \u5982\u679C\u6570\u636E\u5728\u6570\u636E\u96C6\u4E2D\u6539\u53D8, \u5B83\u5C06\u8C03\u7528update(); \u5982\u679C\u6DFB\u52A0\u4E86\u65B0\u7684\u6570\u636E\u96C6, \u5B83\u5C06\u8C03\u7528renderChart().

reactiveData \u521B\u5EFA\u4E00\u4E2A\u672C\u5730\u7684chartData\u53D8\u91CF, \u4E0D\u662Fprops\u53C2\u6570! \u4EE5\u53CA\u521B\u5EFA\u4E00\u4E2A\u5BF9\u8FD9\u4E2A\u53D8\u91CF\u7684 watcher. \u5982\u679C\u4F60\u9700\u8981\u5355\u4E00\u76EE\u7684\u7684\u56FE\u8868, \u4EE5\u53CA\u5728\u56FE\u8868\u7EC4\u4EF6\u4E2D\u8FDB\u884CAPI\u8C03\u7528\u7684\u65F6\u5019, \u8FD9\u5C06\u975E\u5E38\u6709\u7528.

\u4F8B\u5B50

LineChart.js

import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData \u5728 mixin \u521B\u5EFA.
+    // \u5982\u679C\u4F60\u9700\u8981\u66FF\u6362 options , \u8BF7\u521B\u5EFA\u672C\u5730\u7684 options \u5BF9\u8C61
+    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>
+

\u9650\u5236

CaveatsChange-Detection-Caveatsvm.$watch

\u4E8B\u4EF6

\u5982\u679C\u4F60\u7684\u6570\u636E\u6539\u53D8, \u54CD\u5E94\u5F0F\u7684 mixins \u5C06\u4F1A\u89E6\u53D1\u4E8B\u4EF6. \u4F60\u80FD\u76D1\u542C\u4ED6\u4EEC\u901A\u8FC7\u5728\u56FE\u8868\u7EC4\u4EF6\u4E0A\u4F7F\u7528 v:on. \u4E0B\u5217\u662F\u53EF\u7528\u7684\u4E8B\u4EF6:

  • chart:render - \u5982\u679C mixin \u6267\u884C\u5B8C\u5168\u91CD\u7ED8
  • chart:destroy - \u5982\u679C mixin \u5220\u9664\u56FE\u8868\u5BF9\u8C61\u5B9E\u4F8B
  • chart:update - \u5982\u679C mixin \u6267\u884C\u66F4\u65B0\u800C\u4E0D\u662F\u91CD\u7ED8
  • labels:update - \u5982\u679C\u8BBE\u7F6E\u4E86\u65B0\u7684labels
  • xlabels:update \u5982\u679C\u8BBE\u7F6E\u4E86\u65B0\u7684xLabels
  • ylabels:update - \u5982\u679C\u8BBE\u7F6E\u4E86\u65B0\u7684yLabels

\u6545\u969C\u6392\u67E5

\u54CD\u5E94\u5F0F\u7CFB\u7EDF, \u5B83\u5F53\u524D\u72B6\u6001\u662F\u4E0D\u5065\u5168\u7684. \u4F60\u5C06\u4F1A\u9047\u5230\u4E00\u4E9B\u95EE\u9898, \u56E0\u4E3A\u6709\u5F88\u591A\u7528\u4F8B\u548C\u65B9\u5F0F\u6765\u4F20\u9012\u4F60\u7684\u6570\u636E.

Options

options \u5BF9\u8C61\u4E0D\u662F\u54CD\u5E94\u5F0F\u7684. \u6240\u4EE5\u5982\u679C\u4F60\u52A8\u6001\u6539\u53D8\u56FE\u8868\u7684\u914D\u7F6E, \u4ED6\u4EEC\u5C06\u65E0\u6CD5\u88AB mixin \u8BC6\u522B.

\u5982\u679C\u4F60\u6B63\u5728\u4F7F\u7528 mixin , \u4F60\u9700\u8981\u4F7F\u7528options\u6765\u4F20\u9012\u4F60\u7684\u914D\u7F6E. \u8FD9\u662F\u975E\u5E38\u91CD\u8981\u7684, \u56E0\u4E3A mixin \u5C06\u8C03\u7528 chart.js \u7684 update() \u65B9\u6CD5 \u6216\u8005 \u9500\u6BC1\u5E76\u6E32\u67D3\u4E00\u4E2A\u65B0\u7684\u56FE\u8868. \u5982\u679C mixin \u6E32\u67D3\u4E00\u4E2A\u65B0\u7684\u56FE\u8868, \u5B83\u5C06\u8C03\u7528this.renderChart(this.chartData, this.options).

\u4F46\u662F\u5982\u679C\u4F60\u5728mounted()\u4F20\u9012\u4F60\u7684\u914D\u7F6E, \u5B83\u4EEC\u5C06\u76F4\u63A5\u88AB\u9057\u5F03.

\u9519\u8BEF\u7684\u65B9\u5F0F







\xA0



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

\u6B63\u786E\u7684\u65B9\u5F0F







\xA0



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

\u81EA\u5DF1\u7684\u76D1\u89C6\u5668

\u5982\u679C\u4F60\u5BF9\u4F60\u7684\u6570\u636E\u8FDB\u884C\u5927\u91CF\u66F4\u6539(\u800C\u4E0D\u662F\u63A8\u65B0\u7684\u6570\u636E), \u90A3\u4E48\u6700\u597D\u7684\u65B9\u5F0F\u662F\u521B\u5EFA\u81EA\u5DF1\u7684 watcher. \u4F60\u53EF\u4EE5\u81EA\u5DF1\u8C03\u7528 this.$data._chart.update() \u6216\u8005 this.renderChart() \u6765\u5B9E\u73B0, \u5F53\u7136\u8FD9\u4E9B\u5B8C\u5168\u53D6\u51B3\u4E8E\u4F60\u81EA\u5DF1.

\u4E00\u4E2A\u7B80\u5355\u7684\u76D1\u89C6\u5668\u5C06\u4F1A\u662F\u8FD9\u6837:

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

\u4F8B\u5B50

\u4F7F\u7528props\u7684\u56FE\u8868

\u4F60\u7684\u76EE\u6807\u56E0\u8BE5\u662F\u521B\u5EFA\u53EF\u590D\u7528\u7684\u56FE\u8868\u7EC4\u4EF6. \u51FA\u4E8E\u8FD9\u4E2A\u76EE\u7684, \u4F60\u5E94\u8BE5\u5229\u7528 Vue.js \u7684props \u6765\u4F20\u9012\u4F60\u7684\u914D\u7F6E\u548C\u56FE\u8868\u6570\u636E. \u8FD9\u79CD\u65B9\u5F0F, \u56FE\u8868\u81EA\u5DF1\u4E0D\u7528\u5173\u5FC3, \u5173\u4E8E\u63D0\u53D6\u6570\u636E, \u53EA\u7528\u6765\u5C55\u793A.

\u9996\u5148, \u521B\u5EFA\u4F60\u7684\u7EC4\u4EF6

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

\u7136\u540E, \u4F60\u53EF\u4EE5\u628A\u4F60\u7684\u7EC4\u4EF6\u6DFB\u52A0\u5230\u7236\u7EC4\u4EF6\u91CC

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

\u56FE\u8868\u4F7F\u7528\u672C\u5730\u6570\u636E

\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u4F60\u81EA\u5DF1\u7684\u56FE\u8868\u7EC4\u4EF6\u91CC\u5904\u7406\u4F60\u7684\u56FE\u8868\u6570\u636E. \u4F60\u53EA\u9700\u8981\u628A\u5B83\u4F20\u9012\u5230 renderChart().

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

Chart\u4F7F\u7528API\u7684\u6570\u636E

\u4F7F\u7528API\u83B7\u53D6\u6570\u636E\u662F\u4E00\u79CD\u5E38\u89C1\u6A21\u5F0F. \u7136\u800C, \u8FD9\u91CC\u6709\u4E00\u4E9B\u95EE\u9898\u9700\u8981\u8BB0\u4F4F. \u6700\u5E38\u89C1\u7684\u95EE\u9898\u662F, \u4F60\u76F4\u63A5\u5B89\u88C5\u4F60\u7684\u56FE\u8868, \u5C06\u5F02\u6B65API\u56DE\u8C03\u7684\u6570\u636E\u4F20\u9012\u8FDB\u53BB. \u8FD9\u79CD\u65B9\u6CD5\u5BFC\u81F4\u7684\u95EE\u9898\u662F, chart.js \u8BD5\u56FE\u53BB\u6E32\u67D3\u4F60\u7684\u56FE\u8868, \u8BBF\u95EE\u56FE\u8868\u6570\u636E, \u4F46\u662F\u4F60\u7684API\u56DE\u8C03\u662F\u5F02\u6B65\u7684. \u6240\u4EE5\u4F60\u56FE\u8868\u5728\u4F60\u6570\u636E\u5230\u8FBE\u524D\u5B89\u88C5.

\u9632\u6B62\u8FD9\u4E2A\u95EE\u9898, \u4E00\u4E2A v-if \u5373\u53EF.

\u521B\u5EFA\u4F60\u7684\u56FE\u8868\u7EC4\u4EF6\u901A\u8FC7\u4E00\u4E2A\u6570\u636E\u53C2\u6570\u548C\u4E00\u4E2A\u914D\u7F6E\u53C2\u6570, \u6240\u4EE5\u6211\u4EEC\u53EF\u4EE5\u4ECE\u4E00\u4E2A\u5BB9\u5668\u7EC4\u4EF6\u4E2D\u4F20\u9012\u6211\u4EEC\u7684\u6570\u636E\u548C\u914D\u7F6E.

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

\u7136\u540E\u521B\u5EFA\u4E00\u4E2A\u5BB9\u5668\u7EC4\u4EF6, \u7528\u6765\u5904\u7406\u4F60\u7684API\u56DE\u8C03\u548Cvuex\u8FDE\u63A5. ChartContainer.vue




\xA0




























<template>
+  <div class="container">
+    <line-chart
+      v-if="loaded"
+      :chartdata="chartdata"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+import LineChart from './Chart.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\u7684\u52A8\u6001\u6837\u5F0F

\u4F60\u53EF\u4EE5\u8BBE\u7F6E responsive: true \u7136\u540E\u4F20\u9012\u5230 styles \u5BF9\u8C61, \u8FD9\u88AB\u5F53\u505A\u5185\u8054\u6837\u5F0F\u5E94\u7528\u4E8E\u5916\u5C42div. \u8FD9\u79CD\u65B9\u5F0F\u4F60\u53EF\u4EE5\u52A8\u6001\u6539\u53D8\u5916\u5C42\u5BB9\u5668\u7684\u9AD8\u5EA6\u548C\u5BBD\u5EA6, \u8FD9\u5E76\u4E0D\u662Fchart.js \u7684\u9ED8\u8BA4\u884C\u4E3A. \u4F7F\u7528\u8BA1\u7B97\u5C5E\u6027\u53EF\u4EE5\u5F88\u597D\u7684\u5B8C\u6210.

WARNING

\u4F60\u9700\u8981\u8BBE\u7F6E 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>
+

\u81EA\u5B9A\u4E49/\u65B0\u7684\u56FE\u8868

\u6709\u65F6\u5019\u4F60\u9700\u8981\u6269\u5C55Chart.js\u9ED8\u8BA4\u7684\u56FE\u8868. \u8FD9\u91CC\u6709\u8BB8\u591A\u4F8B\u5B50, \u6765\u6559\u4F60\u5982\u4F55\u6269\u5C55\u548C\u4FEE\u6539\u9ED8\u8BA4\u7684\u56FE\u8868, \u6216\u8005\u521B\u5EFA\u81EA\u5DF1\u7684\u56FE\u8868\u7C7B\u578B.

\u5728 vue-chartjs, \u4F60\u53EF\u4EE5\u4F7F\u7528\u540C\u6837\u7684\u65B9\u5F0F\u6765\u505A\u5230\u8FD9\u4E00\u70B9

// 1. \u5F15\u5165Chart.js, \u4F60\u53EF\u4EE5\u4F7F\u7528\u5168\u5C40\u7684\u56FE\u8868\u5BF9\u8C61
+import Chart from 'chart.js'
+// 2. \u5F15\u5165 \`generateChart()\`\u65B9\u6CD5\u521B\u5EFAvue\u7EC4\u4EF6.
+import { generateChart } from 'vue-chartjs'
+
+// 3. \u6269\u5C55\u4E00\u4E2A\u9ED8\u8BA4\u56FE\u8868
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* \u81EA\u5B9A\u4E49 */})
+
+// 4. \u751F\u6210 vue-chartjs \u7EC4\u4EF6
+// \u7B2C\u4E00\u4E2A\u53C2\u6570\u662F \u56FE\u8868id, \u7B2C\u4E8C\u4E2A\u53C2\u6570\u662F \u56FE\u8868\u7C7B\u578B.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+
+// 5. \u50CF\u4F7F\u7528\u9ED8\u8BA4\u7684vue-chartjs\u56FE\u8868\u4E00\u6837, \u6269\u5C55\u81EA\u5B9A\u4E49\u7EC4\u4EF6
+
+export default {
+  extends: CustomLine,
+  mounted () {
+    // ....
+  }
+}
+

\u8D44\u6E90

\u4F60\u53EF\u4EE5\u5728\u8FD9\u91CC\u627E\u5230\u4E00\u4E9B\u8D44\u6E90\uFF0C\u6BD4\u5982\u5173\u4E8E\u5982\u4F55\u4F7F\u7528vue-chartjs\u7684\u6559\u7A0B

`,84),e=[o];function c(l,u,r,i,k,d){return s(),a("div",null,e)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/zh-cn_guide_index.md.750273c0.lean.js b/assets/zh-cn_guide_index.md.750273c0.lean.js new file mode 100644 index 00000000..08ba51c2 --- /dev/null +++ b/assets/zh-cn_guide_index.md.750273c0.lean.js @@ -0,0 +1 @@ +import{_ as n,c as a,o as s,a as t}from"./app.494b20fe.js";const g='{"title":"\u8D77\u6B65","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u4ECB\u7ECD","slug":"\u4ECB\u7ECD"},{"level":2,"title":"\u5B89\u88C5","slug":"\u5B89\u88C5"},{"level":3,"title":"NPM","slug":"npm"},{"level":3,"title":"\u6D4F\u89C8\u5668","slug":"\u6D4F\u89C8\u5668"},{"level":2,"title":"\u6574\u5408","slug":"\u6574\u5408"},{"level":2,"title":"\u521B\u5EFA\u4F60\u81EA\u5DF1\u7684\u7B2C\u4E00\u4E2A\u56FE\u8868","slug":"\u521B\u5EFA\u4F60\u81EA\u5DF1\u7684\u7B2C\u4E00\u4E2A\u56FE\u8868"},{"level":3,"title":"Vue \u5355\u6587\u4EF6\u7EC4\u4EF6","slug":"vue-\u5355\u6587\u4EF6\u7EC4\u4EF6"},{"level":2,"title":"\u66F4\u65B0 Charts","slug":"\u66F4\u65B0-charts"},{"level":3,"title":"\u4F8B\u5B50","slug":"\u4F8B\u5B50"},{"level":3,"title":"\u4E8B\u4EF6","slug":"\u4E8B\u4EF6"},{"level":3,"title":"\u6545\u969C\u6392\u67E5","slug":"\u6545\u969C\u6392\u67E5"},{"level":2,"title":"\u4F8B\u5B50","slug":"\u4F8B\u5B50-1"},{"level":3,"title":"\u4F7F\u7528props\u7684\u56FE\u8868","slug":"\u4F7F\u7528props\u7684\u56FE\u8868"},{"level":3,"title":"\u56FE\u8868\u4F7F\u7528\u672C\u5730\u6570\u636E","slug":"\u56FE\u8868\u4F7F\u7528\u672C\u5730\u6570\u636E"},{"level":3,"title":"Chart\u4F7F\u7528API\u7684\u6570\u636E","slug":"chart\u4F7F\u7528api\u7684\u6570\u636E"},{"level":3,"title":"Chart\u7684\u52A8\u6001\u6837\u5F0F","slug":"chart\u7684\u52A8\u6001\u6837\u5F0F"},{"level":3,"title":"\u81EA\u5B9A\u4E49/\u65B0\u7684\u56FE\u8868","slug":"\u81EA\u5B9A\u4E49-\u65B0\u7684\u56FE\u8868"},{"level":2,"title":"\u8D44\u6E90","slug":"\u8D44\u6E90"}],"relativePath":"zh-cn/guide/index.md","lastUpdated":1690983419000}',p={},o=t("",84),e=[o];function c(l,u,r,i,k,d){return s(),a("div",null,e)}var y=n(p,[["render",c]]);export{g as __pageData,y as default}; diff --git a/assets/zh-cn_index.md.e38db505.js b/assets/zh-cn_index.md.e38db505.js new file mode 100644 index 00000000..d7b33cfe --- /dev/null +++ b/assets/zh-cn_index.md.e38db505.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const u='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"\u8D77\u6B65 \u2192","actionLink":"/zh-cn/guide/","features":[{"title":"\u7B80\u5355","details":"\u9002\u5408\u521D\u5B66\u8005\u548C\u4E13\u4E1A\u4EBA\u58EB \u{1F64C}"},{"title":"\u6269\u5C55\u6027","details":"\u4F7F\u7528\u7B80\u5355, \u6269\u5C55\u65B9\u4FBF \u{1F4AA}"},{"title":"\u5F3A\u5927","details":"\u62E5\u6709 chart.js \u7684\u5168\u90E8\u529F\u80FD \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"zh-cn/index.md","lastUpdated":1690983419000}',r={};function s(i,c,n,o,d,p){return a(),t("div")}var h=e(r,[["render",s]]);export{u as __pageData,h as default}; diff --git a/assets/zh-cn_index.md.e38db505.lean.js b/assets/zh-cn_index.md.e38db505.lean.js new file mode 100644 index 00000000..d7b33cfe --- /dev/null +++ b/assets/zh-cn_index.md.e38db505.lean.js @@ -0,0 +1 @@ +import{_ as e,c as t,o as a}from"./app.494b20fe.js";const u='{"title":"Home","description":"","frontmatter":{"home":true,"heroImage":"https://raw.githubusercontent.com/apertureless/vue-chartjs/main/website/src/images/vue-chartjs.png","actionText":"\u8D77\u6B65 \u2192","actionLink":"/zh-cn/guide/","features":[{"title":"\u7B80\u5355","details":"\u9002\u5408\u521D\u5B66\u8005\u548C\u4E13\u4E1A\u4EBA\u58EB \u{1F64C}"},{"title":"\u6269\u5C55\u6027","details":"\u4F7F\u7528\u7B80\u5355, \u6269\u5C55\u65B9\u4FBF \u{1F4AA}"},{"title":"\u5F3A\u5927","details":"\u62E5\u6709 chart.js \u7684\u5168\u90E8\u529F\u80FD \u{1F4AF}"}],"footer":"MIT Licensed | Copyright \xA9 2018-present Jakub Juszczak"},"headers":[],"relativePath":"zh-cn/index.md","lastUpdated":1690983419000}',r={};function s(i,c,n,o,d,p){return a(),t("div")}var h=e(r,[["render",s]]);export{u as __pageData,h as default}; diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 00000000..15f21a5f --- /dev/null +++ b/examples/index.html @@ -0,0 +1,22 @@ + + + + + + Examples | 📈 vue-chartjs + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/guide/index.html b/guide/index.html new file mode 100644 index 00000000..1bc6fc2e --- /dev/null +++ b/guide/index.html @@ -0,0 +1,226 @@ + + + + + + Getting Started | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

Getting Started

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

Supports Chart.js v4.

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.

Need an API to fetch data?

Please consider Cube, an open-source API for data apps.

Installation

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

pnpm add vue-chartjs chart.js
+# or
+yarn add vue-chartjs chart.js
+# or
+npm i vue-chartjs chart.js
+

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.

The idea behind vue-chartjs is to provide easy-to-use components, with maximal flexibility and extensibility.

Creating your first Chart

First, you need to import the base chart.

import { Bar } from 'vue-chartjs'
+

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

Just create your own component.

BarChart.vue

<template>
+  <Bar
+    id="my-chart-id"
+    :options="chartOptions"
+    :data="chartData"
+  />
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March' ],
+        datasets: [ { data: [40, 20, 12] } ]
+      },
+      chartOptions: {
+        responsive: true
+      }
+    }
+  }
+}
+</script>
+

Use it in your vue app:

App.vue

<template>
+  <BarChart />
+</template>
+
+<script>
+import BarChart from 'path/to/component/BarChart'
+
+export default {
+  name: 'App',
+  components: { BarChart }
+}
+</script>
+

Updating Charts

Since v4 charts have data change watcher and options change watcher by default. Wrapper will update or re-render the chart if new data or new options is passed. Mixins have been removed.

<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
+
+<script>
+// DataPage.vue
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+      chartData() { return /* mutable chart data */ },
+      chartOptions() { return /* mutable chart options */ }
+    }
+}
+</script>
+

Access to Chart instance

You can get access to chart instance via template refs.

<template>
+  <BarChart ref="bar" />
+</template>
+

In Vue3 projects:

const chartInstance = this.$refs.bar.chart
+

Examples

Chart with props

Your goal should be to create reusable chart components. For this purpose, you should utilize Vue.js props to pass in chart options and chart data. This way, the parent component itself does not hold an opinion about fetching data and is only for presentation.

<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  props: {
+    chartData: {
+        type: Object,
+        required: true
+      },
+    chartOptions: {
+      type: Object,
+      default: () => {}
+    }
+  }
+}
+</script>
+

Chart with local data

You can handle your chart data directly in your parent component.

<template>
+  <Bar :data="chartData" />
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20, 12]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+

Chart with API data

A common pattern is to use an API to retrieve 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 asynchronous API call. The problem with this approach is that Chart.js tries to render your chart and access the chart data synchronously, so your chart mounts before the API 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.

<template>
+  <div class="container">
+    <Bar v-if="loaded" :data="chartData" />
+  </div>
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  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 a styles object which gets 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>
+    <Bar :style="myStyles"/>
+  </div>
+</template>
+
+<script>
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+    myStyles () {
+      return {
+        height: `${/* mutable height */}px`,
+        position: 'relative'
+      }
+    }
+  }
+}
+</script>
+

Custom / New Charts

Sometimes you need to extend the default Chart.js charts. There are a lot of examples on how to extend and modify the default charts. Or, you can create your 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 `createTypedChart()` method to create the vue component.
+import { createTypedChart } from 'vue-chartjs'
+// 3. Import needed controller from Chart.js
+import { LineController } from 'chart.js'
+
+// 3. Extend one of the default charts
+// http://www.chartjs.org/docs/latest/developers/charts.html
+class LineWithLineController extends LineController { /* custom magic here */}
+
+// 4. Generate the vue-chartjs component
+// The first argument is the chart-id, the second the chart type, third is the custom controller
+const CustomLine = createTypedChart('line', LineWithLineController)
+
+// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
+
+export default {
+  components: { CustomLine }
+}
+

Resources

Here are some resources, such as tutorials, on how to use vue-chartjs:

+ + + + + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json new file mode 100644 index 00000000..06583c9d --- /dev/null +++ b/hashmap.json @@ -0,0 +1 @@ +{"api_index.md":"a284a332","examples_index.md":"807311bb","guide_index.md":"516b45f9","index.md":"05808d1c","ja_api_index.md":"079878ad","ja_guide_index.md":"8194d779","ja_index.md":"76baad4c","migration-guides_index.md":"c5c02963","pt-br_api_index.md":"e70924fe","pt-br_guide_index.md":"2bb553a6","pt-br_index.md":"9ecbdeb8","ru_api_index.md":"57e22624","ru_guide_index.md":"2d993276","ru_index.md":"e8a06353","zh-cn_api_index.md":"d35aa510","zh-cn_guide_index.md":"750273c0","zh-cn_index.md":"e38db505"} diff --git a/index.html b/index.html new file mode 100644 index 00000000..be408002 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

📈 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 💪

Powerful

With the full power of chart.js 💯

MIT Licensed | Copyright © 2018-present Jakub Juszczak

+ + + + + \ No newline at end of file diff --git a/ja/api/index.html b/ja/api/index.html new file mode 100644 index 00000000..9b046813 --- /dev/null +++ b/ja/api/index.html @@ -0,0 +1,62 @@ + + + + + + コーディング レファレンス | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

コーディング レファレンス

Props

vue-chartjsによって提供されるコンポーネントにはいくつかの基本的なプロパティが定義されています。 拡張しているので、それらは 見えない ですが、それらの値は上書きすることができます：

Prop名説明
widthチャート幅
heightチャート高さ
chart-idcanvas要素のid
css-classes囲んでいる div の css クラス (文字列)
styles囲んでいる div の css クラス (オブジェクト)
pluginschartjs プラグイン (配列)

Events

reactDataまたは reactPropミックスインが使用されている場合、以下のイベントが発行されます。

Event名説明
chart:renderミックスインが完全にレンダリングしたとき
chart:destroyミックスインがチャートオブジェクトインスタンスを削除したとき
chart:updateミックスインが再レンダリングの代わりに更新をしたとき
labels:updatelabelsがセットされたとき
xlabels:updatexlabelsがセットされたとき
ylabels:updateylabelsがセットされたとき

Global Methods

グローバルメソッドはインポートして使用します。

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

インスタンスメソッドは独自のチャートコンポーネント内で使用することができます。

generateLegend()

HTMLの凡例を作成するヘルパー関数

  • 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()
+  }
+}
+
+

プラグインの追加

Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。 グローバルプラグインは、Chart.js docsで説明されているようにvue-chartjsでも問題なく動作します。

インラインプラグインを追加したい場合に備えて、vue-chartjsはaddPlugin()と呼ばれるヘルパーメソッドを公開します。

renderChart()メソッドの前に addPlugin()を呼び出すべきです。

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

renderChart()

Chart.js のインスタンスを作成して描画します。

  • 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 オブジェクト

独自のチャートコンポーネント内からChart.jsのオブジェクトには this.$data._chart でアクセスできます。

Canvas

Canvas要素には this.$refs.canvas でアクセスできます。

+ + + + + \ No newline at end of file diff --git a/ja/guide/index.html b/ja/guide/index.html new file mode 100644 index 00000000..61b77bac --- /dev/null +++ b/ja/guide/index.html @@ -0,0 +1,280 @@ + + + + + + 最初に | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

最初に

vue-chartjs は Chart.js をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。

初めに

vue-chartjs あまり手間をかけずにvueの中でchart.jsを使うことができます。 シンプルなチャートをできるだけ早く起動して実行したいという人に最適です。

chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクトを使用して柔軟にカスタマイズできます。

インストール

NPM

npmを使って vue-chartjsをインストールすることができます。 ただしプロジェクトへの依存関係として chart.jsを追加する必要があります。 なぜなら Chart.jsはpeerDependencyだからです。 このため、Chart.jsのバージョンを完全に制御できます。

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

TIP

Vue.jsの Version 1.xを使用している場合はlegacyタグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。

yarn add vue-chartjs@legacy

ブラウザ

ブラウザから直接 vue-chartjs を使用することができます。 先にChart.jsスクリプトを追加してからvue-chartjsスクリプトを追加してください

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

統合

Chart.jsで利用可能なすべてのチャートタイプは名前付きコンポーネントとしてエクスポートされ、そのままインポートすることができます。 これらのコンポーネントは通常のVueコンポーネントですが、それを拡張する必要があります。

vue-chartjsの背後にある考え方は、最大限の柔軟性と拡張性を持ち、使いやすいコンポーネントを提供することです。 これを実現するには、独自の Chart Component を作成し、それをvue-chartjsコンポーネントして提供するように拡張する必要があります。

拡張することで、チャートコンポーネントのメソッドとロジックは、独自のチャートコンポーネントにマージされます。

最初のチャートの作成

BaseChartをインポートしてextendします。この方法で異なるデータのチャートを表示するときに柔軟性が大幅に向上します。 コンポーネントをカプセル化し、プロパティを使用してコンポーネント内のデータに渡したり、コンポーネント内に直接データを記述することができます。ただし直接コンポーネント内にデータを記述した場合は再利用ができません。

パッケージ全体または各モジュールを個別にインポートできます。 インポートしたものを extends：か mixins：[]を使って指定します。 また mounted()フックで、 this.renderChart()を呼び出します。 これでチャートインスタンスが作成されます。

 


 

 



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

TIP

extends: Bar または mixins: [Bar] どちらの記述方法でも使用できます。

メソッドthis.renderChart（）は、Barコンポーネントによって提供され、2つのパラメータを受け付けています。 どちらもObjectです。 最初のものは表示するデータで、二番目のものはオプションを格納するオブジェクトです。

チャート毎に必要なオブジェクト構造は公式 Chart.js docsをチェックしてください。

Vue シングルファイルコンポーネント

本ドキュメントのほとんどの例はjavascriptファイルを基に記述されていて、 .vueファイルの例はありません。 これはあなたが、たいてい必要なのは <script>ブロックだけだからです。 もちろん .vueファイルを使うこともできます。

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 タグはマージできません

.vueファイルに<template>タグを含めないでください。 Vueはテンプレートをマージすることはできません。.vueファイルに空の <template>タグを追加すると、Vueは拡張されたものからではなく.vueのコンポーネントからテンプレートを取得します。その結果、空のテンプレートとエラーが発生します。

チャートデータの更新

Chart.js 自身ではデータセットを変更した場合に、ライブアップデートの機能を提供していません。 しかしvue-chartjsはこれを実現するために2つの mixin を提供します。

  • reactiveProp
  • reactiveData

両方のミックスインは実際には同じ結果を達成します。 ほとんどの場合は、reactivePropを使います。 このミックスインはチャートコンポーネントのロジックを拡張し、自動的に chartDataという名前のプロパティを作成し、このプロパティにvue watchを追加します。 データが変更されると、データセット内のデータだけが変更されていれば update()を、新しいデータセットが追加されていれば renderChart()を呼び出します。

ractiveDataはプロパティではないローカルのchartData変数を作成し、Watcherを追加します。 これは単一目的のチャートが必要でチャートコンポーネント内でAPI呼び出しを行う場合にのみ役に立ちます。

例

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

制限事項

注意事項変更検出の注意事項vm.$watch

イベント

データが変更されると、リアクティブミックスインはイベントを発行します。 チャートコンポーネントの v：onでそれらを受け取ることができます。 以下のイベントがあります。

  • chart:render - ミックスインが完全にレンダリングしたとき
  • chart:destroy - ミックスインがチャートオブジェクトインスタンスを削除したとき
  • chart:update - ミックスインが再レンダリングの代わりに更新をしたとき
  • labels:update - labelsがセットされたとき
  • xlabels:update - xLabelsがセットされたとき
  • ylabels:update - yLabelsがセットされたとき

トラブルシューティング

現状でのリアクティブシステムは頑強ではありません。 データを渡すためのユースケースや方法が多数あるため、それにはいくつかの問題が発生することがあります。

オプション

optionsオブジェクトは今のところリアクティブではありません。 そのため、チャートのオプションを動的に変更しても、それらはミックスインによって認識されません。

ミックスインを使用している場合は、optionsというプロパティとしてオプションを渡す必要があります。 mixinがchart.jsのupdate()メソッドを呼び出すか、新しいチャートを破棄して描画する際に、これは重要です。 ミックスインが新しいチャートを描画するとき、this.renderChart(this.chartData、this.options)を呼び出します。

しかし、オプションを mounted()フックで直接渡すと、それらは失われます。

間違った方法







 



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

正しい方法







 



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

独自のウォッチャー

（新しいデータをプッシュするのではなく）データをたくさん変更するのであれば、独自のウォッチャーを実装するのが一番良いやり方です。 必要に応じて、自分で this.$data._chart.update()または this.renderChart()を呼び出すことができます。

シンプルなwatcherの実装例:

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

例

propsを使用したチャート

目標は再利用可能なチャートコンポーネントを作成することです。 この目的のためには、オプションとチャートデータをVue.jsの props として渡す必要があります。 このようにすることで、チャート自体はデータの取得については気にせず、表示のみに注力できます。

まずコンポーネントを作成します。

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

その後、作成したチャートコンポーネントを親コンポーネントに追加できます。

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

ローカルデータを使用したチャート

独自のチャートコンポーネントでチャートデータを直接扱うことができます。 コンポーネント内のチャートデータを renderChart()メソッドに渡すだけです。

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

APIから取得したデータを用いたチャート

一般的にはデータを取得するためにAPIを使用するのがパターンでしょう。しかし留意すべきことがいくつかあります。 最も一般的な問題は、チャートコンポーネントを直接マウントし、非同期API呼び出しからデータを渡すことです。 このアプローチでの問題点は、chart.jsがチャートをレンダリングしてチャートデータにアクセスしようとしますが、API呼び出しが非同期だということです。 この時、データが到着する前にあなたはチャートを表示しようとしてしまいます。

これを防ぐには、単純な v-ifが最善の解決策です。

データプロパティとオプションプロパティを使用してチャートコンポーネントを作成すると、コンテナコンポーネントからデータとオプションを渡すことができます。

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

それから、あなたのAPIコールまたはVuex接続を処理するコンテナコンポーネントを作成します。

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

動的スタイルを使用したチャート

あなたは responsive：trueをセットして外側のdivにインラインスタイルとして適用されるstylesオブジェクトを渡すことができます。 これにより、外側のコンテナの高さと幅を動的に変更できます。 これはchart.jsのデフォルトの動作ではありません。 これには計算プロパティを使用するのが最善です。

WARNING

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

場合によっては、デフォルトのChart.jsに用意されているチャートを拡張する必要があります。 デフォルトチャートを拡張および変更する方法、あるいは独自のチャートタイプを作成する方法は、たくさんの例があります。

vue-chartjsでも、これとほぼ同じ方法で行うことができます。

// 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 () {
+    // ....
+  }
+}
+

リソース

vue-chartjsの使い方に関するチュートリアルのようないくつかのリソースがあります。

+ + + + + \ No newline at end of file diff --git a/ja/index.html b/ja/index.html new file mode 100644 index 00000000..47a3c9a4 --- /dev/null +++ b/ja/index.html @@ -0,0 +1,22 @@ + + + + + + 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

📈 vue-chartjs

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

初めに →

簡単

初心者にもプロにも簡単に始められる 🙌

拡張性

シンプルに使えて、拡張も簡単 💪

強力

chart.jsのフルパワーを持っている 💯

MIT Licensed | Copyright © 2018-present Jakub Juszczak

+ + + + + \ No newline at end of file diff --git a/migration-guides/index.html b/migration-guides/index.html new file mode 100644 index 00000000..64c3e25f --- /dev/null +++ b/migration-guides/index.html @@ -0,0 +1,139 @@ + + + + + + Migration from v4 to v5 | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

Migration from v4 to v5

With v5, this library introduces a number of breaking changes

ESM

v5.0

Chart.js v4 and vue-chartjs v5 are ESM-only packages. To use them in your project, it also should be ESM:

// package.json
+{
+  "type": "module"
+}
+

If you are experiencing this problem with Jest, you should follow this doc to enable ESM support. Or, we can recommend you migrate to Vitest. Vitest has ESM support out of the box and has almost the same API as Jest. Here is our example of migration.

v5.1

Chart.js v4.1 and vue-chartjs v5.1 have restored the CommonJS support.

API changes

  • chartData props were renamed to data
  • chartOptions props were renamed to options
  • unknown props will fall through to the canvas element.
  • generateChart were refactored and renamed to createTypedChart
  • Vue.js < 2.7 is no longer supported. If you want to use vue-chartjs with Vue < 2.7 you have to lock your version to 4.x.

Migration from v3 to v4

With v4, this library introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.

v4 is fully compatible with Chart.js v3.

Tree-shaking

v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

For a list of all the available items to import, see Chart.js docs.

v3:

import { Bar } from 'vue-chartjs'
+

v4 — lazy way:

import 'chart.js/auto';
+import { Bar } from 'vue-chartjs'
+

v4 — tree-shakable way:

import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+

Using the "lazy way" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.

Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.

import { Pie } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
+

Changing the creation of Charts

In v3, you needed to import the component, and then either use extends or mixins and add it.

v3:

// BarChart.js
+import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['January', 'February', 'March'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12]
+        }
+      ]
+    })
+  }
+}
+
<template>
+  <BarChart />
+</template>
+
+<script>
+import BarChart from 'path/to/component/BarChart'
+
+export default {
+  name: 'DataPage',
+  components: { BarChart }
+}
+</script>
+

In v4, you need to import the component, pass props to it, and use Chart component as a standard Vue component.

<template>
+  <Bar :chart-data="chartData" />
+</template>
+
+<script>
+// DataPage.vue
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20, 12]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+

New reactivity system

v3 does not update or re-render the chart if new data is passed. You needed to use reactiveProp and reactiveData mixins for that.

v3:

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

v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed. Mixins have been removed.

v4:

<template>
+  <Bar :chart-data="chartData" />
+</template>
+
+<script>
+// DataPage.vue
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default {
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+      chartData() { return /* mutable chart data */ }
+    }
+}
+</script>
+

Migration from vue-chart-3

Uninstall vue-chart-3 

pnpm rm vue-chart-3
+# or
+yarn remove vue-chart-3
+# or
+npm uninstall vue-chart-3
+

Install vue-chartjs 

pnpm add vue-chartjs
+# or
+yarn add vue-chartjs
+# or
+npm i vue-chartjs
+

Change component import path

For Vue 2.7 and Vue 3 projects:

import { /* component */ } from 'vue-chartjs'
+

For Vue 2 (<2.7) projects:

import { /* component */ } from 'vue-chartjs/legacy'
+

Rename components

  • BarChart to Bar
  • DoughnutChart to Doughnut
  • LineChart to Line
  • PieChart to Pie
  • PolarAreaChart to PolarArea
  • RadarChart to Radar
  • BubbleChart to Bubble
  • ScatterChart to Scatter

Rename props

  • options to chartOptions
+ + + + + \ No newline at end of file diff --git a/pt-br/api/index.html b/pt-br/api/index.html new file mode 100644 index 00000000..29086be1 --- /dev/null +++ b/pt-br/api/index.html @@ -0,0 +1,62 @@ + + + + + + Referência de codificação | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

Referência de codificação

Props

Existem alguns props básicas definidas nos componentes fornecidos pelo vue-chartjs. Porque você os estende, eles são invisíveis, mas você pode substituí-los:

PropDescrição
widthlargura do gráfico
heightaltura do gráfico
chart-idId da tela
css-classesString com classes css para a div circundante
stylesObjeto com estilos css para o div contêiner circundante
pluginsArray com plugins chartjs

Eventos

Se o mixin reactiveData ou reactiveProp estiver anexado, os seguintes eventos serão emitidos:

EventoDescrição
chart:renderse o mixin executar um renderizador completo
chart:destroyse o mixin excluir a instância do objeto de gráfico
chart:updatese o mixin executar uma atualização em vez de uma nova renderização
labels:updatese novos labals foram definidos
xlabels:updatese novos xLabels foram definidos
ylabels:updatese novos yLabels foram definidos

Métodos Globais

Os métodos globais precisam ser importados.

generateChart

  • Tipo: Function
  • Argumentos: chart-id, chart-type
  • Uso:
import { generateChart } from "vue-chartjs";
+// O primeiro argumento é o ID do gráfico, depois o tipo de gráfico.
+const CustomLine = generateChart("custom-line", "LineWithLine");
+

Métodos de instância

Os métodos de instância podem ser usados ​​dentro do componente do gráfico.

generateLegend()

Função auxiliar para gerar uma legenda HTML.

  • Tipo: Function
  • Argumentos: none
  • Uso:










 




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

No Chart.js, você pode definir plugins globais e embutidos. Os plug-ins globais estão funcionando sem problemas com o vue-chartjs como descrito no Chart.js docs.

Se você deseja adicionar plug-ins embutidos, vue-chartjs expõe um método auxiliar chamado addPlugin() Você deve chamar addPlugin() antes do método renderChart().

  • Tipo: Function
  • Argumentos: Array de Plugins
  • Uso:
mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ...
+    }
+  })
+}
+

renderChart()

Cria uma instância Chart.js e renderiza o gráfico.

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

Objeto Chart.js

Você pode acessar o objeto Chart.js dentro do componente do gráfico com this.$data._chart

Canvas

Você pode acessar canvas com this.$refs.canvas

+ + + + + \ No newline at end of file diff --git a/pt-br/guide/index.html b/pt-br/guide/index.html new file mode 100644 index 00000000..8de57883 --- /dev/null +++ b/pt-br/guide/index.html @@ -0,0 +1,280 @@ + + + + + + Começando | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

Começando

vue-chartjs é um pacote para Chart.js no Vue. Com ele você pode criar facilmente componentes de ​gráficos reutilizáveis.

Introdução

vue-chartjs permite você usar Chart.js sem muito aborrecimento dentro do Vue. É perfeito para pessoas que precisam de gráficos simples em funcionamento o mais rápido possível.

Abstrai a lógica básica, mas expõe o objeto Chart.js para oferecer a máxima flexibilidade.

Instalação

NPM

Você pode instalar o vue-chartjs através do npm ou yarn. No entanto, você também precisa adicionar o chart.js como uma dependência ao seu projeto, porque o Chart.js é um parDeDependência. Dessa forma, você tem total controle sobre o versionamento do Chart.js.

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

Dica

Se você estiver utilizando vue 1.x por favor use a tag legacy. No entanto, a versão 1 do Vue não é mais mantida.

yarn add vue-chartjs@legacy

Você também pode usar vue-chartjs diretamente no navegador via CDN. Primeiro, adicione o script do Chart.js, e depois adicione o script vue-chartjs.

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

Integração

Todo tipo de gráfico disponível em Chart.js é exportado como um componente nomeado e pode ser importado como tal. Esses componentes são componentes normais do Vue, no entanto, você precisa estendê-lo com extend.

A ideia por trás do vue-chartjs é fornecer componentes fáceis de usar, com máxima flexibilidade e extensibilidade. Para alcançar isto, você precisa criar o seu próprio Componente de gráfico e estendê-lo com os componentes vue-chartjs fornecidos.

Dessa forma, os métodos e a lógica nos componentes do gráfico são mesclados no seu próprio componente de gráfico.

Criando seu primeiro Gráfico

primeiro, você precisa importar o gráfico base e estendê-lo. Isso oferece mais flexibilidade ao trabalhar com dados diferentes. Você pode encapsular seus componentes e usar objetos para passar dados, ou você pode inseri-los diretamente dentro do componente. No entanto, seu componente não é reutilizável dessa maneira.

Você pode importar o pacote inteiro ou cada módulo individualmente. Então, você precisa usar extends: ou mixins:[]. Depois, no gancho mounted(), chame this.renderChart(). Isso criará sua instância do gráfico.

 


 

 



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

Dica

Você pode usar extends: Bar ou mixins: [Bar]

O método this.renderChart() é fornecido pelo componente Bar e aceita dois parâmetros: ambos são objetos. O primeiro são os dados do gráfico, e o segundo é um objeto de opções.

Confira o oficial Chart.js docs para ver a estrutura do objeto que você precisa fornecer.

Componentes de arquivo único do Vue

A maioria dos exemplos nos documentos é baseada em arquivos JavaScript e não em arquivos .vue. Isso ocorre porque, principalmente, você precisará apenas do bloco <script>. No entanto, você também pode usar componentes single-file .vue.

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

A tag template não pode ser mesclada

Não inclua a tag <template> em seus componentes single-file .vue. Vue pode não mesclar templates. Se você adicionar uma tag <template> vazia, o Vue pegará o modelo do seu componente e não do estendido, o que resultará em um template vazio e erros inesperados.

Atualizando Gráficos

Chart.js não fornece uma atualização ao vivo se você alterar os conjuntos de dados. No entanto, vue-chartjs fornece dois mixins para atingir esse objetivo:

  • reactiveProp
  • reactiveData

Ambos os mixins alcançam o mesmo resultado. Na maioria das vezes você usará reactiveProp. Ele estende a lógica do seu componente de gráfico e cria automaticamente um objeto chamado chartData e adiciona um vue watch neste objeto. Na mutação de dados, ele chamará update() se os dados dentro dos conjuntos de dados foram alterados, ou renderChart() se novos conjuntos de dados foram adicionados.

reactiveData simplesmente cria uma variável local chartData (o que não é um objeto!) e adiciona um observador. Isso é útil apenas se você precisar de gráficos de finalidade única ou precisar de uma chamada de API dentro do componente do gráfico.

Exemplo

LineChart.js

import { Line, mixins } from "vue-chartjs";
+const { reactiveProp } = mixins;
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ["options"],
+  mounted() {
+    // this.chartData é criado no mixin.
+    // Se você deseja passar opções, crie um objeto de opções locais
+    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>
+

Limitações

CaveatsChange-Detection-Caveatsvm.$watch

Eventos

Esses mixins reativos emitem eventos se os dados forem alterados. Você pode ouvi-los com v:on no componente do gráfico. Os seguintes eventos estão disponíveis:

  • chart:render - se o mixin executar um renderizador completo
  • chart:destroy - se o mixin excluir a instância do objeto de gráfico
  • chart:update - se o mixin executar uma atualização em vez de uma nova renderização
  • labels:update - se novos labels foram definidos
  • xlabels:update se novos xLabels foram definidos
  • ylabels:update - se novos yLabels foram definidos

Solução de problemas

O sistema de reatividade em seu estado atual não é robusto. Você terá vários problemas com isso, porque existem muitos casos de uso e maneiras de passar seus dados.

Opções

O objeto options não está atualmente implementado reativamente. Portanto, se você alterar dinamicamente as opções do gráfico, eles não serão reconhecidos pelo mixin. Se necessário, você pode criar um observador para destruir e renderizar novamente quando as opções do gráfico forem atualizadas.

Se você estiver usando o mixin, precisará passar suas opções como um objeto chamado options. Isso é importante porque o mixin chamará o método update () do Chart.js ou destruirá e renderizará um novo gráfico. Se o mixin renderizar um novo gráfico, ele chamará this.renderChart(this.chartData, this.options).

Mas, se você passar suas opções diretamente no seu gancho mounted(), elas serão destruídas.

Maneira errada







 



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

Maneira Certo







 



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

Próprio observador

Se você transformar seus dados, mutação (em vez de enviar novos dados), é o melhor método, se você implementar seu próprio observador. Você pode chamar this.$data._chart.update() ou this.renderChart() de forma independente, dependendo de suas necessidades.

Um observador simples seria:

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

Exemplos

Gráfico com props

Seu objetivo deve ser criar componentes reutilizáveis ​​do gráfico. Para esse fim, você deve utilizar as props do Vue.js para passar suas opções e seus dados do gráfico. Dessa forma, o próprio gráfico não possui uma opinião sobre a busca de dados e é apenas para apresentação.

Primeiro, crie seu componente:

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);
+  }
+};
+

Depois disso, você pode adicionar o componente do gráfico a um componente pai:

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

Gráfico com dados locais

Você pode manipular os dados do gráfico diretamente em seu próprio componente do gráfico. Você só precisa passá-lo para o método renderChart():

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

Gráfico com dados da API

Um padrão comum é usar uma API para recuperar seus dados. No entanto, existem algumas coisas para ter em mente. O problema mais comum é que você monta o componente do gráfico diretamente e transmite dados de uma chamada de API assíncrona. O problema dessa abordagem é que o Chart.js tenta renderizar seu gráfico e acessar os dados do gráfico de forma sincronizada, para que o gráfico seja montado antes que os dados da API cheguem.

Para evitar isso, um simples v-if é a melhor solução.

Crie seu componente de gráfico com um objeto de dados e opções, para que possamos transmitir nossos dados e opções de um componente de contêiner.

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);
+  }
+};
+

Em seguida, crie um componente de contêiner, que lida com a chamada da API ou a conexão vuex.

ChartContainer.vue



 


























<template>
+  <div class="container">
+    <line-chart v-if="loaded" :chartdata="chartdata" :options="options" />
+  </div>
+</template>
+
+<script>
+  import LineChart from "./Chart.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>
+

Gráfico com estilos dinâmicos

Você pode definir responsive: true e passar um objeto de estilos que é aplicado como estilos embutidos para o exterior <div>. Dessa forma, você pode alterar a altura e a largura do contêiner externo dinamicamente, o que não é o comportamento padrão do Chart.js. É melhor usar propriedades computadas para isso.

Aviso

Você precisa definir 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>
+

Personalizados / Novos Gráficos

Às vezes, você precisa estender os gráficos Chart.js padrão. Existem muitos exemplos sobre como estender e modificar os gráficos padrão. Ou você pode criar seu próprio tipo de gráfico.

No vue-chartjs, você pode fazer isso da mesma maneira:

// 1. Importar Chart.js para que você possa usar o objeto Chart global
+import Chart from "chart.js";
+// 2. Importar o metodo `generateChart()` para criar o componente vue.
+import { generateChart } from "vue-chartjs";
+
+// 3. Estenda um dos gráficos padrão
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({
+  /* personalize sua magica aqui */
+});
+
+// 4. Gere o componente vue-chartjs
+// O primeiro argumento é o ID do gráfico, depois o tipo de gráfico.
+const CustomLine = generateChart("custom-line", "LineWithLine");
+
+// 5. Estender o component CustomLine assim como você faz com os gráficos vue-chartjs padrão.
+
+export default {
+  extends: CustomLine,
+  mounted() {
+    // ....
+  }
+};
+

Recursos

Aqui estão alguns recursos, como tutoriais, sobre como usar vue-chartjs:

+ + + + + \ No newline at end of file diff --git a/pt-br/index.html b/pt-br/index.html new file mode 100644 index 00000000..79e115ad --- /dev/null +++ b/pt-br/index.html @@ -0,0 +1,22 @@ + + + + + + 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

📈 vue-chartjs

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

Começar →

Fácil

Fácil para ambos, iniciantes e profissionais 🙌

Extensível

Simples de usar, fácil de estender 💪

Poderoso

Com todo o poder do chart.js 💯

MIT Licenciado | Copyright © 2018-presente Jakub Juszczak

+ + + + + \ No newline at end of file diff --git a/ru/api/index.html b/ru/api/index.html new file mode 100644 index 00000000..aca51182 --- /dev/null +++ b/ru/api/index.html @@ -0,0 +1,62 @@ + + + + + + Справочник | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

Справочник

Свойства

Существуют базовые свойства, определённые в компонентах, предоставленных vue-chartjs. Так как вы extendите их, они невидимы, но вы можете переопределить их:

СвойствоОписание
widthширина графика
heightвысота графика
chart-idid canvas-элемента
css-classesString с классами CSS для родительского элемента div
stylesObject со стилями CSS для родительского элемента div
pluginsArray с плагинами chartjs

События

Если миксин reactiveData или reactiveProp привязан, будут вызываться следующие события:

СобытиеОписание
chart:renderесли миксин осуществляет полную перерисовку графика
chart:destroyесли миксин удаляет экземпляр объекта графика
chart:updateесли миксин осуществеляет обновление графика вместо полной перерисовки
labels:updateесли установлены новые метки
xlabels:updateесли установлены новые метки по оси x
ylabels:updateесли установлены новые метки по оси y

Глобальные методы

Глобальные методы, которые должны быть импортированы

generateChart()

  • Тип: Function
  • Аргументы:: chart-id, chart-type
  • Использование:
import { generateChart } from 'vue-chartjs'
+// First argument is the chart-id, second the chart type.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+

Методы экземпляра

Методы экземпляра могут быть использованы внутри вашего графика-компонента

generateLegend()

Вспомогательная функция для генерации HTML-легенды

  • Тип: Function
  • Использование:










 




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()

В Chart.js вы можете определить глобальные и встроенные плагины. Глобальные плагины без проблем работают с vue-chartjs как описано в документации к Chart.js.

Если вы хотите добавить встроенные плагины, vue-chartjs предоставляет вспомогательный метод addPlugin() Вам надо вызвать addPlugin() перед вызовом метода renderChart().

  • Тип: Function
  • Аргументы:: Array плагинов
  • Использование:
mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+

renderChart()

Создаёт экземпляр Chart.js и отрисовывает график.

  • Тип: Function
  • Аргументы:: Chart Data, Chart Options
  • Использование:
mounted () {
+  this.renderChart({
+    labels: ['Январь', 'Февраль'],
+    datasets: [
+      {
+        label: 'Какие-то данные',
+        backgroundColor: '#f87979',
+        data: [40, 20]
+      }
+    ]},
+    {
+      responsive: true
+    }
+  )
+}
+

Объект Chart.js

Вы можете получить доступ к объекту Chart.js из вашего графика-компонента посредством this.$data._chart

Canvas-элемент

Вы можете получить доступ к canvas-элементу посредством this.$refs.canvas

+ + + + + \ No newline at end of file diff --git a/ru/guide/index.html b/ru/guide/index.html new file mode 100644 index 00000000..9a2c0614 --- /dev/null +++ b/ru/guide/index.html @@ -0,0 +1,294 @@ + + + + + + Для начинающих | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

Для начинающих

vue-chartjs - это обёртка для Chart.js на Vue. Вы можете леко создать переиспользуемые компоненты-графики.

Вступление

vue-chartjs позволяет вам использовать Chart.js без излишнего шаманства с Vue. Идеально для людей, которые просто хотят получить работающие графики как можно быстрее.

Бизнес-логика абстрагируется, зато предоставляется доступ к объектам Chart.js для получения максимальной гибкости.

Установка

NPM

Вы можете установить vue-chartjs посредством npm. Однако, вам также нужно добавить chart.js как зависимость для вашего проекта. Потому, что Chart.js - это peerDependency. Таким образом вы получите полный контроль над версионированием Chart.js.

Установка посредством npm: npm install vue-chartjs chart.js --save

TIP

Если вы используете vue 1.x пожалуйста, используйте тег legacy. Однако, помните, что Vue версии 1 больше не поддерживается.

yarn add vue-chartjs@legacy

YARN

Установка посредством yarn: yarn add vue-chartjs chart.js

Браузер

Вы также можете использовать vue-chartjs прямо в браузере. Для этого сначала добавьте скрипт Vue, если он ещё не загружен, потом - скрипт Chart.js, а после него - минимизированную версию скрипта vue-chartjs.

<script src="https://unpkg.com/vue"></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>
+

Дальше вы можете просто зарегистрировать свой компонент:

Vue.component('line-chart', {
+  extends: VueChartJs.Line,
+  mounted () {
+    this.renderChart({
+      labels: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+      datasets: [
+        {
+          label: 'Коммиты на GitHub',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})
+

Пример на Сodepen.

Интеграция

Каждый тип графика, доступный в Chart.js, экспортируется как именованый компонент и может быть импортирован как таковой. Эти компоненты - нормальные Vue-компоненты, однако вам необходимо расширять их.

Идея, стоящая за vue-chart.js, состоит в том, чтобы предоставить простые в использовании компоненты, с максимумом гибкости и расширяемости. Для достижения этого, вам нужно создать ваш собственный график-компонент и расширить его предоставленными vue-chart.js компонентами.

Таким образом, методы и логика графиков-компонентов включается в ваш график-компонент.

Создание вашего первого графика

Вам необходимо импортировать базовый компонент, а затем расширить его. Это даёт больше гибкости при работе с различными данными. Однако, ваш компонент не может быть переиспользован таким образом.

Вы можете импортировать весь пакет или каждый модуль отдельно. Потом вам нужно использовать extends: или mixins:[]. Далее, в хуке mounted(), вызовите this.renderChart(). Это создаст экземпляр вашего объекта.

 


 

 



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

TIP

Вы можете использовать или extends: Bar или mixins: [Bar]

Метод this.renderChart() предоставляется компонентом Bar и принимает два параметра. Об являются objects. Первый используется для данных вашего графика, а второй - как объект опций.

Со структурой этих объектов можете ознакомиться в официальной документации Chart.js

Однофайловые компоненты Vue

Большинство примеров в документации базируется на javascript-файлах, а не на .vue файлах. Причиной этому является то, что в большинстве случаев вам понадобится только блок <script>. Однако, вы можете использовать и .vue файлы.

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-теги не объединяются

Не включайте тег <template></template> в ваши .vue файлы компонентов. Vue не может объединять шаблоны. И шаблон включается в миксин. Если вы добавите пустой тег шаблона в вашем компоненте, он перезапишет тот, который приходит из базового графика, и вы получите пустой экран.

Обновление графиков

Chart.js не обновляет и не перерисовывает график если новые данные были переданы. Однако, вы можете просто реализовать это сами или использовать один из двух уже реализованных миксинов:

  • reactiveProp
  • reactiveData

Оба включены в модуль mixins и оба преследуют одну цель. В большинстве случаев вы будете использовать reactiveProp. Этот миксин расширяет логику вашего графика-компонента и автоматически создаёт свойства chartData и автоматически добавляет vue watch на это свойство. При изменении данных, он или вызовет update(), если изменились только данные внутри уже существующих datasets, или renderChart(), если были добавлены новые наборы данных.

reactiveData просто создаёт локальную переменную chartData (которая не является свойством!) и добавляет watcher. Это полезно только в том случае, если вам необходимы одноцелевые графики и вы совершаете API-вызовы внутри ваших графиков-компонентов.

Пример

LineChart.js

import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData создаётся внутри миксина.
+    // Если вы хотите передать опции, создайте локальный объект options
+    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>
+

Ограничения Vue по мутации массивов и объектов

CaveatsChange-Detection-Caveatsvm.$watch

События

Реактивные миксины вызывают события при изменении данных. Вы можете прослушивать их при помощи v:on на графике-компоненте. Доступны следующие события:

  • chart:render - если миксин выполняет полную перерисовку графика
  • chart:destroy - если миксин удаляет объект графика
  • chart:update - если миксин совершает обновление вместо полной перерисовки
  • labels:update - если были установлены новые метки
  • xlabels:update - если новые метки были установлены по оси x
  • ylabels:update - если новые метки были установлены по оси y

Отлов ошибок

Система реактивности в её текущем состоянии незрелая. Вы столкнётесь с некоторыми проблемами с ней, так как существует множество путей использования и путей передачи ваших данных.

Опции

Объект options на данный момент не является реактивным. Если вы хотите динамически измените опции графика, это не будет распозно миксином.

Если вы используете миксин, вам нужно передать опции как свойство options. Это важно, так как миксин вызовет метод update() из chart.js или уничтожит старый и отрисует новый график. Если миксин отрисовывает новый график, он вызывает this.renderChart(this.chartData, this.options).

Но если вы передаёте опции напрямую в вашем хуке mounted(), они теряются.

Неправильно







 



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

Правильно







 



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

Собственный watcher

Если вы часто преобразуете или изменяете данные (вместо передачи новых данных), вам лучше реализовать свой собственный watcher. Вы можете самостоятельно вызвать this.$data._chart.update() или this.renderChart(), в зависимости от ваших потребностей.

Простой watcher выглядит так:

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

Примеры

Графики со свойствами

Вашей целью должно быть создание переиспользуемых компонентов-графиков. Для этой цели, вам необходимо использовать свойства Vue.js для передачи опций и данных для графика. Таким образом, график сам по себе не занимается стягиванием данных, а только их отображением.

В первую очередь, создайте свой компонент:

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

После этого добавьте свой график-компонент в родительский компонент:

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

График с локальными данными

Вы можете передать данные напрямую в ваш график-компонент. Для этого просто передайте его в метод renderChart():

import { Bar } from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  data: () => ({
+    chartdata: {
+      labels: ['Январь', 'Февраль'],
+      datasets: [
+        {
+          label: 'Данные 1',
+          backgroundColor: '#f87979',
+          data: [40, 20]
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  }),
+
+  mounted () {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+

График с данными с API

Популярной моделью использования является запрос данных с API. Однако, необходимо кое-что запомнить. Самой частой проблемой является то, что вы встраиваете график-компонент напрямую и передаёте ему данные из асинхронного API-вызова. Проблема с этим подходом состоит в том, что график отрисовывается ранее, чем приходят данные из асинхронного API-вызова.

Лучшее решение для предупреждения таких ситуаций - это использование v-if.

Создавайте ваш график-компонент со свойствами данных и опций, чтобы вы могли передать их через компонент-контейнер:

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

Далее создавайте компонент-контейнер, который занимается API-вызовами или vuex-соединением:

ChartContainer.vue




 




























<template>
+  <div class="container">
+    <line-chart
+      v-if="loaded"
+      :chartdata="chartdata"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+import LineChart from './Chart.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>
+

График с динамическими стилями

Вы можете установить responsive: true и передать объект стилей, который будет применён как встроенный стиль для внешнего блока div. Таким образом вы можете динамически изменять высоту и ширину внешнего контейнера, что не является поведением по умолчанию для chart.js. Лучше всего использовать для этого вычисляемые параметры.

WARNING

Вам необходимо установить 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>
+

Настраиваемые / новые графики

Иногда вам нужно расширить обычные графики Chart.js. Существует множество примеров, как расширить или модифицировать графики по умолчанию, или создать собственный тип графика.

В vue-chartjs, вы можете сделать это практически таким же путём:

// 1. Импортируйте Chart.js, чтобы использовать глобальный объект Chart
+import Chart from 'chart.js'
+// 2. Импортируйте метод `generateChart()` для создания компонента vue
+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({ /* ваши расширения */})
+
+// 4. Сгенерируйте компонент vue-chartjs
+// Первый аргумент - это chart-id, второй - типа графика
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+
+// 5. Расширьте компонент CustomLine так же, как вы это делаете с обычными графиками vue-chartjs
+
+export default {
+  extends: CustomLine,
+  mounted () {
+    // ....
+  }
+}
+

Ресурсы

Вас могут также заинтересовать руководства по использованию vue-chartjs на других ресурсах:

+ + + + + \ No newline at end of file diff --git a/ru/index.html b/ru/index.html new file mode 100644 index 00000000..2026d6b9 --- /dev/null +++ b/ru/index.html @@ -0,0 +1,22 @@ + + + + + + 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

📈 vue-chartjs

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

Начать →

Простота

Просто как для новичков, так и для профессионалов 🙌

Расширяемость

Просто использовать, легко расширять 💪

Могущество

С полной силой chart.js 💯

MIT Licensed | Copyright © 2018-present Jakub Juszczak

+ + + + + \ No newline at end of file diff --git a/zh-cn/api/index.html b/zh-cn/api/index.html new file mode 100644 index 00000000..9fba18dd --- /dev/null +++ b/zh-cn/api/index.html @@ -0,0 +1,62 @@ + + + + + + 编码参考 | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

编码参考

Props

这里有一些vue-chartjs提供的基本参数定义. 因为你是 extend 他们的, 所以他们是不可见的, 但是你可以覆盖他们:

参数名描述
width图表宽度
height图表高度
chart-idcanvas的id
css-classescss类的字符串
stylescss 样式对象
pluginschartjs 插件数组

事件

如果 reactiveData 或者 reactiveProp mixin 被附加, 下面事件将会被调用:

事件描述
chart:render如果 mixin 执行完全重绘
chart:destroy如果 mixin 删除图表对象实例
chart:update如果 mixin 执行更新而不是重绘
labels:update如果设置了新的labels
xlabels:update如果设置了新的xLabels
ylabels:update如果设置了新的yLabels

全局方法

全局方法需要被引入才能使用.

generateChart

  • 类型: Function
  • 参数: chart-id, chart-type
  • 使用:
import { generateChart } from 'vue-chartjs'
+// 第一个参数是 图表id, 第二个参数是 图表类型.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+

实例方法

实例方法可以在你图表组件内部使用.

generateLegend()

用来生成HTML说明的工具函数.

  • 类型: Function
  • 参数: none
  • 使用:










 




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

在 Chart.js 你可以定义全局和内联插件. 全局插件在没有 vue-chartjs也可以工作. 就像这个文档Chart.js docs 描述的.

如果你需要添加内联插件, vue-chartjs 暴露出来了一个工具方法 addPlugin() 你可以在renderChart()方法前调用addPlugin().

  • 类型: Function
  • 参数: Array 插件数组
  • 使用:
mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+

renderChart()

创建一个 Chart.js 实例, 并渲染图表

  • 类型: Function
  • 参数: Chart Data, Chart Options
  • 使用:
mounted () {
+  this.renderChart({
+    labels: ['January', 'February'],
+    datasets: [
+      {
+        label: 'Data One',
+        backgroundColor: '#f87979',
+        data: [40, 20]
+      }
+    ]},
+    {
+      responsive: true
+    }
+  )
+}
+

Chart.js 对象

你可以在你的图表组件里, 通过 this.$data._chart 访问 Chart.js 对象

Canvas

你可以通过 this.$refs.canvas 访问 canvas

+ + + + + \ No newline at end of file diff --git a/zh-cn/guide/index.html b/zh-cn/guide/index.html new file mode 100644 index 00000000..32ed195a --- /dev/null +++ b/zh-cn/guide/index.html @@ -0,0 +1,278 @@ + + + + + + 起步 | 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

起步

vue-chartjs 是 Vue 对于 Chart.js 的封装. 你可以很简单的创建可复用的图表组件.

介绍

vue-chartjs 让你在 Vue 中能更好的使用 Chart.js . 非常适合想要尽快启动和运行简单图表的人

它抽象了一些简单的逻辑, 但是也暴露了 Chart.js 对象, 提供了极大的灵活性.

安装

NPM

你可以在 npm 下安装 vue-chartjs. 当然, 你也需要在项目中安装 chart.js 依赖. 因为 Chart.js 是一个 peerDependency. 这种方式你可以完全控制 Chart.js 的版本

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

TIP

如果你使用的是 vue 1.x 版本, 请使用 legacy 标签. 然而, Vue 1 所支持的版本不再维护了.

yarn add vue-chartjs@legacy

浏览器

你也可以直接在浏览器中使用 vue-chartjs. 先添加 Chart.js 脚本, 再添加 vue-chartjs 脚本.

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

整合

Chart.js 将所有可用的图表类型, 都导出为命名组件, 并可以直接导入它们. 这些组件都是普通的 Vue 组件, 然而, 你需要扩展它.

vue-chartjs 的想法是提供容易使用的组件, 并且具有最大限度的灵活性和扩展性. 要实现这一点, 你需要创建你自己的 Chart Component 并通过 vue-chartjs 提供的组件来扩展它.

这样，Chart组件中的方法和逻辑就可以合并到您自己的图表组件中.

创建你自己的第一个图表

你需要引入一个基本图表然后扩展它. 这为处理不同数据时提供了更大的灵活性. 你可以封装你的组件以及使用props来处理数据, 或者你可以直接在组件里输入他们. 当然, 如果那样做, 你的组件就无法复用了.

你可以引入整个项目或者每个模块单独引用. 之后你需要使用extends:或者 mixins:[]. 然后在 mounted() 中调用 this.renderChart(). 这将创建你的图表实例.

 


 

 



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

TIP

你可以使用 extends: Bar 或者 mixins: [Bar]

this.renderChart() 方法由 Bar 组件提供, 接收两个对象参数.第一个是你的图表数据, 第二个是配置对象.

在这个文档中查看你需要提供的对象结构 Chart.js docs .

Vue 单文件组件

文档中很多例子都是基于javascript文件 而不是 .vue 文件. 这是因为你大多数只需要<script>.当然在 .vue 文件中你也能用的很好.

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标签

不要在你的 .vue 文件中引入 <template> 标签. Vue 无法 合并模板.如果你添加了一个空的 <template> 标签, Vue 将会从你的主键里获取模板, 而不会从你 extend 中获取, 这将导致页面为空并报错.

更新 Charts

如果你修改了数据集, Chart.js 是不会提供实时更新的. 当然, vue-chartjs 提供了两个 mixins 来实现.

  • reactiveProp
  • reactiveData

这两个mixins其实实现的是相同的功能. 大多数时间你将会使用reactiveProp. 它扩展了图表组件的逻辑, 并自动创建名为 chartData 的props参数, 并为这个参数添加vue watch. 当数据改变, 如果数据在数据集中改变, 它将调用update(); 如果添加了新的数据集, 它将调用renderChart().

reactiveData 创建一个本地的chartData变量, 不是props参数! 以及创建一个对这个变量的 watcher. 如果你需要单一目的的图表, 以及在图表组件中进行API调用的时候, 这将非常有用.

例子

LineChart.js

import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData 在 mixin 创建.
+    // 如果你需要替换 options , 请创建本地的 options 对象
+    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>
+

限制

CaveatsChange-Detection-Caveatsvm.$watch

事件

如果你的数据改变, 响应式的 mixins 将会触发事件. 你能监听他们通过在图表组件上使用 v:on. 下列是可用的事件:

  • chart:render - 如果 mixin 执行完全重绘
  • chart:destroy - 如果 mixin 删除图表对象实例
  • chart:update - 如果 mixin 执行更新而不是重绘
  • labels:update - 如果设置了新的labels
  • xlabels:update 如果设置了新的xLabels
  • ylabels:update - 如果设置了新的yLabels

故障排查

响应式系统, 它当前状态是不健全的. 你将会遇到一些问题, 因为有很多用例和方式来传递你的数据.

Options

options 对象不是响应式的. 所以如果你动态改变图表的配置, 他们将无法被 mixin 识别.

如果你正在使用 mixin , 你需要使用options来传递你的配置. 这是非常重要的, 因为 mixin 将调用 chart.js 的 update() 方法 或者 销毁并渲染一个新的图表. 如果 mixin 渲染一个新的图表, 它将调用this.renderChart(this.chartData, this.options).

但是如果你在mounted()传递你的配置, 它们将直接被遗弃.

错误的方式







 



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

正确的方式







 



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

自己的监视器

如果你对你的数据进行大量更改(而不是推新的数据), 那么最好的方式是创建自己的 watcher. 你可以自己调用 this.$data._chart.update() 或者 this.renderChart() 来实现, 当然这些完全取决于你自己.

一个简单的监视器将会是这样:

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

例子

使用props的图表

你的目标因该是创建可复用的图表组件. 出于这个目的, 你应该利用 Vue.js 的props 来传递你的配置和图表数据. 这种方式, 图表自己不用关心, 关于提取数据, 只用来展示.

首先, 创建你的组件

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

然后, 你可以把你的组件添加到父组件里

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

图表使用本地数据

你可以直接在你自己的图表组件里处理你的图表数据. 你只需要把它传递到 renderChart().

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

Chart使用API的数据

使用API获取数据是一种常见模式. 然而, 这里有一些问题需要记住. 最常见的问题是, 你直接安装你的图表, 将异步API回调的数据传递进去. 这种方法导致的问题是, chart.js 试图去渲染你的图表, 访问图表数据, 但是你的API回调是异步的. 所以你图表在你数据到达前安装.

防止这个问题, 一个 v-if 即可.

创建你的图表组件通过一个数据参数和一个配置参数, 所以我们可以从一个容器组件中传递我们的数据和配置.

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

然后创建一个容器组件, 用来处理你的API回调和vuex连接. ChartContainer.vue




 




























<template>
+  <div class="container">
+    <line-chart
+      v-if="loaded"
+      :chartdata="chartdata"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+import LineChart from './Chart.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的动态样式

你可以设置 responsive: true 然后传递到 styles 对象, 这被当做内联样式应用于外层div. 这种方式你可以动态改变外层容器的高度和宽度, 这并不是chart.js 的默认行为. 使用计算属性可以很好的完成.

WARNING

你需要设置 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>
+

自定义/新的图表

有时候你需要扩展Chart.js默认的图表. 这里有许多例子, 来教你如何扩展和修改默认的图表, 或者创建自己的图表类型.

在 vue-chartjs, 你可以使用同样的方式来做到这一点

// 1. 引入Chart.js, 你可以使用全局的图表对象
+import Chart from 'chart.js'
+// 2. 引入 `generateChart()`方法创建vue组件.
+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({ /* 自定义 */})
+
+// 4. 生成 vue-chartjs 组件
+// 第一个参数是 图表id, 第二个参数是 图表类型.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+
+// 5. 像使用默认的vue-chartjs图表一样, 扩展自定义组件
+
+export default {
+  extends: CustomLine,
+  mounted () {
+    // ....
+  }
+}
+

资源

你可以在这里找到一些资源，比如关于如何使用vue-chartjs的教程

+ + + + + \ No newline at end of file diff --git a/zh-cn/index.html b/zh-cn/index.html new file mode 100644 index 00000000..a18a77bc --- /dev/null +++ b/zh-cn/index.html @@ -0,0 +1,22 @@ + + + + + + 📈 vue-chartjs + + + + + + + + + + +
📈 vue-chartjs

📈 vue-chartjs

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

起步 →

简单

适合初学者和专业人士 🙌

扩展性

使用简单, 扩展方便 💪

强大

拥有 chart.js 的全部功能 💯

MIT Licensed | Copyright © 2018-present Jakub Juszczak

+ + + + + \ No newline at end of file