mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bd3b0c4cad | ||
|
|
413bbdf91a | ||
|
|
92ca2f7295 | ||
|
|
1e046e828e | ||
|
|
256eec9518 | ||
|
|
d08666f2ad | ||
|
|
6433a0a4a5 |
@@ -10,6 +10,9 @@
|
||||
[](https://gitter.im/vue-chartjs/Lobby)
|
||||
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||
[](https://snyk.io/test/github/apertureless/vue-chartjs)
|
||||
[](https://codeclimate.com/github/apertureless/vue-chartjs/maintainability)
|
||||
[](paypal)
|
||||
|
||||
# vue-chartjs
|
||||
|
||||
@@ -307,3 +310,5 @@ For a detailed explanation of how things work, check out the [guide](http://vuej
|
||||
## License
|
||||
|
||||
This software is distributed under [MIT license](LICENSE.txt).
|
||||
|
||||
[paypal]: https://www.paypal.me/apertureless/50eur
|
||||
|
||||
2
assets/donate.svg
Normal file
2
assets/donate.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="74" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="74" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h25v20H0z"/><path fill="#179BD7" d="M25 0h49v20H25z"/><path fill="url(#b)" d="M0 0h74v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAwIDUwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjMTc5QkQ3IiBkPSJNNDExLjg5OSwxMzQuMzI4TDQxMS44OTksMTM0LjMyOEw0MTEuODk5LDEzNC4zMjhjLTAuNDM1LDIuNzgyLTAuOTMzLDUuNjI2LTEuNDkyLDguNTQ4DQoJCWMtMTkuMjI2LDk4LjcwOS04NS4wMDEsMTMyLjgwOS0xNjkuMDA3LDEzMi44MDloLTQyLjc3MmMtMTAuMjczLDAtMTguOTMxLDcuNDYtMjAuNTMxLDE3LjU5NGwwLDBsMCwwbC0yMS44OTksMTM4Ljg4Ng0KCQlsLTYuMjAxLDM5LjM2OWMtMS4wNDEsNi42NTIsNC4wODgsMTIuNjUxLDEwLjgwMiwxMi42NTFoNzUuODYyYzguOTgzLDAsMTYuNjE1LTYuNTI4LDE4LjAyOS0xNS4zODdsMC43NDYtMy44NTRsMTQuMjgzLTkwLjY0Mw0KCQlsMC45MTctNC45NzRjMS4zOTktOC44OSw5LjA0Ni0xNS40MTgsMTguMDI5LTE1LjQxOGgxMS4zNDZjNzMuNSwwLDEzMS4wMzctMjkuODQxLDE0Ny44NTQtMTE2LjE5NA0KCQljNy4wMjUtMzYuMDc0LDMuMzg4LTY2LjE5NS0xNS4yLTg3LjM3OUM0MjcuMDM3LDE0My45NDksNDIwLjA1OSwxMzguNjQ5LDQxMS44OTksMTM0LjMyOHoiLz4NCgk8cGF0aCBmaWxsPSIjMjIyRDY1IiBkPSJNMzkxLjc4NywxMjYuMzA4Yy0yLjkzOC0wLjg1NS01Ljk2OC0xLjYzMi05LjA3Ny0yLjMzMWMtMy4xMjQtMC42ODQtNi4zMjYtMS4yOS05LjYyMS0xLjgxOA0KCQljLTExLjUzMi0xLjg2NS0yNC4xNjgtMi43NTEtMzcuNzA2LTIuNzUxSDIyMS4xMTdjLTIuODEzLDAtNS40ODYsMC42MzctNy44OCwxLjc4N2MtNS4yNjksMi41MzMtOS4xODUsNy41MjItMTAuMTM0LDEzLjYzMQ0KCQlsLTI0LjMwOCwxNTMuOTYybC0wLjY5OSw0LjQ5MmMxLjYwMS0xMC4xMzQsMTAuMjU4LTE3LjU5NCwyMC41MzEtMTcuNTk0SDI0MS40Yzg0LjAwNiwwLDE0OS43ODEtMzQuMTE1LDE2OS4wMDctMTMyLjgwOQ0KCQljMC41NzUtMi45MjIsMS4wNTctNS43NjYsMS40OTItOC41NDhjLTQuODY1LTIuNTgtMTAuMTM0LTQuNzg3LTE1LjgwNy02LjY2OEMzOTQuNjk0LDEyNy4xOTQsMzkzLjI0OCwxMjYuNzQzLDM5MS43ODcsMTI2LjMwOHoiLz4NCgk8cGF0aCBmaWxsPSIjMjUzQjgwIiBkPSJNMjAzLjEwNCwxMzQuODI1YzAuOTQ4LTYuMTA4LDQuODY1LTExLjA5NywxMC4xMzQtMTMuNjE1YzIuNDA5LTEuMTUsNS4wNjctMS43ODcsNy44OC0xLjc4N2gxMTQuMjY3DQoJCWMxMy41MzcsMCwyNi4xNzMsMC44ODYsMzcuNzA2LDIuNzUxYzMuMjk1LDAuNTI4LDYuNDk3LDEuMTM1LDkuNjIxLDEuODE4YzMuMTA4LDAuNjk5LDYuMTM5LDEuNDc3LDkuMDc3LDIuMzMxDQoJCWMxLjQ2MSwwLjQzNSwyLjkwNiwwLjg4Niw0LjMyMSwxLjMzN2M1LjY3MywxLjg4MSwxMC45NDIsNC4xMDMsMTUuODA3LDYuNjY4YzUuNzItMzYuNDc4LTAuMDQ3LTYxLjMxNC0xOS43Ny04My44MDQNCgkJYy0yMS43NDQtMjQuNzU5LTYwLjk4OC0zNS4zNTktMTExLjIwNS0zNS4zNTlIMTM1LjE1M2MtMTAuMjU4LDAtMTkuMDA4LDcuNDYtMjAuNTk0LDE3LjYwOUw1My44MzYsNDE3LjY4DQoJCWMtMS4xOTcsNy42MTYsNC42NzgsMTQuNDg1LDEyLjM1NiwxNC40ODVoOTAuMDA1bDIyLjU5OC0xNDMuMzc4TDIwMy4xMDQsMTM0LjgyNXoiLz4NCjwvZz4NCjwvc3ZnPg0K"/><text x="19.5" y="15" fill="#010101" fill-opacity=".3"></text><text x="19.5" y="14"></text><text x="48.5" y="15" fill="#010101" fill-opacity=".3">Donate</text><text x="48.5" y="14">Donate</text></g></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
1
dist/vue-chartjs.js
vendored
1
dist/vue-chartjs.js
vendored
@@ -95,7 +95,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
||||
|
||||
|
||||
var VueCharts = {
|
||||
version: LIB_VERSION,
|
||||
Bar: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["a" /* Bar */],
|
||||
HorizontalBar: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["d" /* HorizontalBar */],
|
||||
Doughnut: __WEBPACK_IMPORTED_MODULE_1__BaseCharts__["c" /* Doughnut */],
|
||||
|
||||
2
dist/vue-chartjs.js.map
vendored
2
dist/vue-chartjs.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/vue-chartjs.min.js
vendored
2
dist/vue-chartjs.min.js
vendored
@@ -1,2 +1,2 @@
|
||||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define("VueChartJs",["chart.js"],e):"object"==typeof exports?exports.VueChartJs=e(require("chart.js")):t.VueChartJs=e(t.Chart)}("undefined"!=typeof self?self:this,function(t){return function(t){function e(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,a){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:a})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,r){"use strict";function a(t,e){if(e){var r=this.$data._chart,a=t.datasets.map(function(t){return t.label}),n=e.datasets.map(function(t){return t.label}),s=JSON.stringify(n);JSON.stringify(a)===s&&e.datasets.length===t.datasets.length?(t.datasets.forEach(function(t,a){var n=Object.keys(e.datasets[a]),s=Object.keys(t);n.filter(function(t){return"_meta"!==t&&-1===s.indexOf(t)}).forEach(function(t){delete r.data.datasets[a][t]});for(var i in t)t.hasOwnProperty(i)&&(r.data.datasets[a][i]=t[i])}),t.hasOwnProperty("labels")&&(r.data.labels=t.labels),t.hasOwnProperty("xLabels")&&(r.data.xLabels=t.xLabels),t.hasOwnProperty("yLabels")&&(r.data.yLabels=t.yLabels),r.update()):(r.destroy(),this.renderChart(this.chartData,this.options))}else this.$data._chart&&this.$data._chart.destroy(),this.renderChart(this.chartData,this.options)}function n(t,e){return{render:function(t){return t("div",{style:this.styles,class:this.cssClasses},[t("canvas",{attrs:{id:this.chartId,width:this.width,height:this.height},ref:"canvas"})])},props:{chartId:{default:t,type:String},width:{default:400,type:Number},height:{default:400,type:Number},cssClasses:{type:String,default:""},styles:{type:Object},plugins:{type:Array,default:function(){return[]}}},data:function(){return{_chart:null,_plugins:this.plugins}},methods:{addPlugin:function(t){this.$data._plugins.push(t)},renderChart:function(t,r){this.$data._chart=new c.a(this.$refs.canvas.getContext("2d"),{type:e,data:t,options:r,plugins:this.$data._plugins})}},beforeDestroy:function(){this.$data._chart&&this.$data._chart.destroy()}}}Object.defineProperty(e,"__esModule",{value:!0});var s={data:function(){return{chartData:null}},watch:{chartData:a}},i={props:{chartData:{required:!0}},watch:{chartData:a}},u={reactiveData:s,reactiveProp:i},o=r(1),c=r.n(o),h=n("bar-chart","bar"),d=n("horizontalbar-chart","horizontalBar"),l=n("doughnut-chart","doughnut"),f=n("line-chart","line"),p=n("pie-chart","pie"),b=n("polar-chart","polarArea"),y=n("radar-chart","radar"),g=n("bubble-chart","bubble"),x=n("scatter-chart","scatter");r.d(e,"VueCharts",function(){return v}),r.d(e,"Bar",function(){return h}),r.d(e,"HorizontalBar",function(){return d}),r.d(e,"Doughnut",function(){return l}),r.d(e,"Line",function(){return f}),r.d(e,"Pie",function(){return p}),r.d(e,"PolarArea",function(){return b}),r.d(e,"Radar",function(){return y}),r.d(e,"Bubble",function(){return g}),r.d(e,"Scatter",function(){return x}),r.d(e,"mixins",function(){return u});var v={version:LIB_VERSION,Bar:h,HorizontalBar:d,Doughnut:l,Line:f,Pie:p,PolarArea:b,Radar:y,Bubble:g,Scatter:x,mixins:u};e.default=v},function(e,r){e.exports=t}])});
|
||||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define("VueChartJs",["chart.js"],e):"object"==typeof exports?exports.VueChartJs=e(require("chart.js")):t.VueChartJs=e(t.Chart)}("undefined"!=typeof self?self:this,function(t){return function(t){function e(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,a){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:a})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,r){"use strict";function a(t,e){if(e){var r=this.$data._chart,a=t.datasets.map(function(t){return t.label}),n=e.datasets.map(function(t){return t.label}),s=JSON.stringify(n);JSON.stringify(a)===s&&e.datasets.length===t.datasets.length?(t.datasets.forEach(function(t,a){var n=Object.keys(e.datasets[a]),s=Object.keys(t);n.filter(function(t){return"_meta"!==t&&-1===s.indexOf(t)}).forEach(function(t){delete r.data.datasets[a][t]});for(var i in t)t.hasOwnProperty(i)&&(r.data.datasets[a][i]=t[i])}),t.hasOwnProperty("labels")&&(r.data.labels=t.labels),t.hasOwnProperty("xLabels")&&(r.data.xLabels=t.xLabels),t.hasOwnProperty("yLabels")&&(r.data.yLabels=t.yLabels),r.update()):(r.destroy(),this.renderChart(this.chartData,this.options))}else this.$data._chart&&this.$data._chart.destroy(),this.renderChart(this.chartData,this.options)}function n(t,e){return{render:function(t){return t("div",{style:this.styles,class:this.cssClasses},[t("canvas",{attrs:{id:this.chartId,width:this.width,height:this.height},ref:"canvas"})])},props:{chartId:{default:t,type:String},width:{default:400,type:Number},height:{default:400,type:Number},cssClasses:{type:String,default:""},styles:{type:Object},plugins:{type:Array,default:function(){return[]}}},data:function(){return{_chart:null,_plugins:this.plugins}},methods:{addPlugin:function(t){this.$data._plugins.push(t)},renderChart:function(t,r){this.$data._chart=new c.a(this.$refs.canvas.getContext("2d"),{type:e,data:t,options:r,plugins:this.$data._plugins})}},beforeDestroy:function(){this.$data._chart&&this.$data._chart.destroy()}}}Object.defineProperty(e,"__esModule",{value:!0});var s={data:function(){return{chartData:null}},watch:{chartData:a}},i={props:{chartData:{required:!0}},watch:{chartData:a}},u={reactiveData:s,reactiveProp:i},o=r(1),c=r.n(o),h=n("bar-chart","bar"),d=n("horizontalbar-chart","horizontalBar"),l=n("doughnut-chart","doughnut"),f=n("line-chart","line"),p=n("pie-chart","pie"),b=n("polar-chart","polarArea"),y=n("radar-chart","radar"),g=n("bubble-chart","bubble"),x=n("scatter-chart","scatter");r.d(e,"VueCharts",function(){return v}),r.d(e,"Bar",function(){return h}),r.d(e,"HorizontalBar",function(){return d}),r.d(e,"Doughnut",function(){return l}),r.d(e,"Line",function(){return f}),r.d(e,"Pie",function(){return p}),r.d(e,"PolarArea",function(){return b}),r.d(e,"Radar",function(){return y}),r.d(e,"Bubble",function(){return g}),r.d(e,"Scatter",function(){return x}),r.d(e,"mixins",function(){return u});var v={Bar:h,HorizontalBar:d,Doughnut:l,Line:f,Pie:p,PolarArea:b,Radar:y,Bubble:g,Scatter:x,mixins:u};e.default=v},function(e,r){e.exports=t}])});
|
||||
//# sourceMappingURL=vue-chartjs.min.js.map
|
||||
2
dist/vue-chartjs.min.js.map
vendored
2
dist/vue-chartjs.min.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -11,6 +11,11 @@ const langs = [
|
||||
|
||||
docute.init({
|
||||
title: 'vue-chartjs docs',
|
||||
announcement(route) {
|
||||
const info = { type: 'success' }
|
||||
info.html = '<a style="margin-right:10px;" class="docute-button docute-button-mini docute-button-success" href="https://www.paypal.me/apertureless/50eur" target="_blank">Donate!</a> Support vue-chartjs development by a one-time donation.'
|
||||
return info
|
||||
},
|
||||
landing: true,
|
||||
landing: '_landing.html',
|
||||
repo: 'apertureless/vue-chartjs',
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<title>vue-chartjs doc</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/docute@2/dist/docute.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/docute/dist/docute.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- don't remove this part start -->
|
||||
|
||||
@@ -6,7 +6,7 @@ search: ja
|
||||
**vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
|
||||
|
||||
## イントロ
|
||||
`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
|
||||
`vue-chartjs` vueの中であまり面倒ことがなくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
|
||||
|
||||
chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
|
||||
|
||||
@@ -41,7 +41,7 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
renderChart()メソッドに2つの引数を渡すことができます:
|
||||
`renderChart()`メソッドに2つの引数を渡すことができます:
|
||||
|
||||
- Data object
|
||||
- Options object
|
||||
@@ -64,16 +64,18 @@ renderChart()メソッドに2つの引数を渡すことができます:
|
||||
```
|
||||
|
||||
詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
|
||||
|
||||
## プロパティ
|
||||
|
||||
BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
|
||||
BaseChartsには基本プロパティがいくつか定義されています。 `extend()`したときにそれらは *表示されていません* が、使用するときに上書きして設定することができます。
|
||||
|
||||
| プロパティ | 説明 |
|
||||
|---|---|
|
||||
| width | chartの表示幅 |
|
||||
| height | chartの表示高さ |
|
||||
| chart-id | canvas要素のid |
|
||||
|
||||
| css-classes | 周囲のdivのCSSクラスの文字列 |
|
||||
| styles | 周囲のdivコンテナのCSSスタイルを持つオブジェクト |
|
||||
|
||||
## 実装例
|
||||
|
||||
@@ -115,7 +117,7 @@ export default {
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。
|
||||
固定値の`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。
|
||||
</p>
|
||||
|
||||
### コンポーネント内のローカルデータを使用する場合
|
||||
@@ -147,8 +149,7 @@ export default {
|
||||
|
||||
### コンポーネントの再利用
|
||||
|
||||
チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。
|
||||
|
||||
チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することがベストです。このようにしてチャートコンポーネントは純粋なデータ表示と、背後にあるロジックのラッパーとしてのみ責務を負います。単一ページアプリケーションを実行している場合や、たとえば laravel などで統合されている場合は、異なった方法があります。
|
||||
|
||||
## リアクティブデータ
|
||||
|
||||
@@ -182,7 +183,8 @@ export default {
|
||||
mixins: [reactiveProp],
|
||||
props: ['options'],
|
||||
mounted () {
|
||||
// this.chartData is created in the mixin
|
||||
// this.chartData is created in the mixin.
|
||||
// If you want to pass options please create a local options object
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
}
|
||||
@@ -259,7 +261,24 @@ export default {
|
||||
|
||||
## Chart.js オブジェクト
|
||||
|
||||
場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this.$data._chart` を使ってアクセスします。
|
||||
時にはchart.jsをより詳細に制御する必要があります。そのためには `this.$data._chart` を使ってChart.jsインスタンスにアクセスすることができます。
|
||||
|
||||
## インライン プラグイン
|
||||
|
||||
Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。[Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html)で記載されているのようなグローバルプラグインは、 `vue-chartjs ` で問題なく動作しています。
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
mounted () {
|
||||
this.addPlugin({
|
||||
id: 'my-plugin',
|
||||
beforeInit: function (chart) {
|
||||
....
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 利用可能なグラフ
|
||||
|
||||
@@ -293,6 +312,11 @@ export default {
|
||||
|
||||

|
||||
|
||||
### 散布図
|
||||
|
||||
このチャートは、他のものとは異なるデータ構造を持っています。現在のところ、reactive mixins はこのチャートタイプでは機能していません。
|
||||
|
||||

|
||||
|
||||
## ビルド方法の違い
|
||||
あなたが使用するビルドツールに依存した3つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。
|
||||
@@ -320,3 +344,13 @@ Vue.jsとChart.jsは `peerDependencies` なので別にインストールする
|
||||
|
||||
### Webpack 2
|
||||
Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
|
||||
|
||||
## Resources
|
||||
|
||||
以下に `vue-chartjs` の使い方に関するチュートリアルのようなリソースがあります
|
||||
|
||||
- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
|
||||
- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
|
||||
- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
|
||||
- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
|
||||
- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)
|
||||
10646
package-lock.json
generated
10646
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-chartjs",
|
||||
"version": "3.2.0",
|
||||
"version": "3.2.1",
|
||||
"description": "Vue.js wrapper for chart.js for creating beautiful charts.",
|
||||
"author": "Jakub Juszczak <jakub@posteo.de>",
|
||||
"homepage": "http://vue-chartjs.org",
|
||||
@@ -56,18 +56,17 @@
|
||||
"release": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js",
|
||||
"prepublishOnly": "yarn run lint && yarn run test && yarn run build"
|
||||
},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"chart.js": "2.7.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.0.0-beta.31",
|
||||
"@babel/core": "^7.0.0-beta.31",
|
||||
"@babel/preset-env": "^7.0.0-beta.31",
|
||||
"@babel/preset-stage-2": "^7.0.0-beta.31",
|
||||
"@babel/cli": "^7.0.0-beta.42",
|
||||
"@babel/core": "^7.0.0-beta.42",
|
||||
"@babel/preset-env": "^7.0.0-beta.42",
|
||||
"@babel/preset-stage-2": "^7.0.0-beta.42",
|
||||
"babel-loader": "8.0.0-beta.0",
|
||||
"chai": "^3.5.0",
|
||||
"chart.js": "2.7.0",
|
||||
"chart.js": "2.7.2",
|
||||
"chromedriver": "^2.28.0",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"cross-env": "^5.1.1",
|
||||
@@ -115,12 +114,12 @@
|
||||
"sinon": "^2.1.0",
|
||||
"sinon-chai": "^2.9.0",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue": "2.5.2",
|
||||
"vue-hot-reload-api": "2.1.0",
|
||||
"vue": "2.5.16",
|
||||
"vue-hot-reload-api": "2.3.0",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-style-loader": "3.0.1",
|
||||
"vue-template-compiler": "2.5.2",
|
||||
"vue-loader": "^14.2.1",
|
||||
"vue-style-loader": "4.0.2",
|
||||
"vue-template-compiler": "2.5.16",
|
||||
"webpack": "^3.7.1",
|
||||
"webpack-dev-middleware": "^1.10.1",
|
||||
"webpack-hot-middleware": "^2.17.1",
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
} from './BaseCharts'
|
||||
|
||||
const VueCharts = {
|
||||
version: LIB_VERSION,
|
||||
Bar,
|
||||
HorizontalBar,
|
||||
Doughnut,
|
||||
|
||||
Reference in New Issue
Block a user