|
| 1 | +# コーディング レファレンス |
| 2 | + |
| 3 | +## Props |
| 4 | + |
| 5 | +`vue-chartjs`によって提供されるコンポーネントにはいくつかの基本的なプロパティが定義されています。 `拡張`しているので、それらは *見えない* ですが、それらの値は上書きすることができます: |
| 6 | + |
| 7 | +| Prop名 | 説明 | |
| 8 | +|---|---| |
| 9 | +| width | チャート幅 | |
| 10 | +| height | チャート高さ | |
| 11 | +| chart-id | canvas要素のid | |
| 12 | +| css-classes | 囲んでいる div の css クラス (文字列) | |
| 13 | +| styles | 囲んでいる div の css クラス (オブジェクト) | |
| 14 | +| plugins | chartjs プラグイン (配列) | |
| 15 | + |
| 16 | +## Events |
| 17 | + |
| 18 | +`reactData`または` reactProp`ミックスインが使用されている場合、以下のイベントが発行されます。 |
| 19 | + |
| 20 | +| Event名 | 説明| |
| 21 | +|---|---| |
| 22 | +| `chart:render` | ミックスインが完全にレンダリングしたとき | |
| 23 | +| `chart:destroy` | ミックスインがチャートオブジェクトインスタンスを削除したとき | |
| 24 | +| `chart:update` | ミックスインが再レンダリングの代わりに更新をしたとき | |
| 25 | +| `labels:update` | labelsがセットされたとき | |
| 26 | +| `xlabels:update` | xlabelsがセットされたとき | |
| 27 | +| `ylabels:update` | ylabelsがセットされたとき | |
| 28 | + |
| 29 | +## Global Methods |
| 30 | +グローバルメソッドはインポートして使用します。 |
| 31 | + |
| 32 | +### generateChart |
| 33 | + |
| 34 | +- **Type:** `Function` |
| 35 | +- **Arguments**: `chart-id`, `chart-type` |
| 36 | +- **Usage:** |
| 37 | + |
| 38 | +```js |
| 39 | +import { generateChart } from 'vue-chartjs' |
| 40 | +// First argument is the chart-id, second the chart type. |
| 41 | +const CustomLine = generateChart('custom-line', 'LineWithLine') |
| 42 | +``` |
| 43 | + |
| 44 | +## Instance Methods |
| 45 | + |
| 46 | +インスタンスメソッドは独自のチャートコンポーネント内で使用することができます。 |
| 47 | + |
| 48 | + |
| 49 | +### generateLegend() |
| 50 | + |
| 51 | +HTMLの凡例を作成するヘルパー関数 |
| 52 | + |
| 53 | +- **Type:** `Function` |
| 54 | +- **Arguments**: `none` |
| 55 | +- **Usage:** |
| 56 | + |
| 57 | +```js {11} |
| 58 | +import { Line } from 'vue-chartjs' |
| 59 | + |
| 60 | +export default { |
| 61 | + extends: Line, |
| 62 | + props: ['datasets', 'options'] |
| 63 | + data: () => ({ |
| 64 | + htmlLegend: null |
| 65 | + }) |
| 66 | + mounted () { |
| 67 | + this.renderChart(this.datasets, this.options) |
| 68 | + this.htmlLegend = this.generateLegend() |
| 69 | + } |
| 70 | +} |
| 71 | + |
| 72 | +``` |
| 73 | + |
| 74 | +### プラグインの追加 |
| 75 | + |
| 76 | +Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。 グローバルプラグインは、[Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html)で説明されているように`vue-chartjs`でも問題なく動作します。 |
| 77 | + |
| 78 | + |
| 79 | +インラインプラグインを追加したい場合に備えて、`vue-chartjs`は`addPlugin()`と呼ばれるヘルパーメソッドを公開します。 |
| 80 | + |
| 81 | +`renderChart()`メソッドの前に `addPlugin()`を呼び出すべきです。 |
| 82 | + |
| 83 | +- **Type:** `Function` |
| 84 | +- **Arguments**: `Array` of Plugins |
| 85 | +- **Usage:** |
| 86 | + |
| 87 | +```js |
| 88 | +mounted () { |
| 89 | + this.addPlugin({ |
| 90 | + id: 'my-plugin', |
| 91 | + beforeInit: function (chart) { |
| 92 | + .... |
| 93 | + } |
| 94 | + }) |
| 95 | +} |
| 96 | +``` |
| 97 | + |
| 98 | +### renderChart() |
| 99 | + |
| 100 | +Chart.js のインスタンスを作成して描画します。 |
| 101 | + |
| 102 | +- **Type:** `Function` |
| 103 | +- **Arguments**: `Chart Data`, `Chart Options` |
| 104 | +- **Usage:** |
| 105 | + |
| 106 | +```js |
| 107 | +mounted () { |
| 108 | + this.renderChart({ |
| 109 | + labels: ['January', 'February'], |
| 110 | + datasets: [ |
| 111 | + { |
| 112 | + label: 'Data One', |
| 113 | + backgroundColor: '#f87979', |
| 114 | + data: [40, 20] |
| 115 | + } |
| 116 | + ]}, |
| 117 | + { |
| 118 | + responsive: true |
| 119 | + } |
| 120 | + ) |
| 121 | +} |
| 122 | +``` |
| 123 | + |
| 124 | +## Chart.js オブジェクト |
| 125 | + |
| 126 | +独自のチャートコンポーネント内からChart.jsのオブジェクトには `this.$data._chart` でアクセスできます。 |
| 127 | + |
| 128 | +## Canvas |
| 129 | + |
| 130 | +Canvas要素には `this.$refs.canvas` でアクセスできます。 |
0 commit comments