linechart.js
56 lines
| 1 | import { Line } from 'vue-chartjs' |
| 2 | |
| 3 | export default { |
| 4 | |
| 5 | extends: Line, |
| 6 | |
| 7 | props: ['data', 'options'], |
| 8 | |
| 9 | data () { |
| 10 | return { |
| 11 | defaultOptions: { |
| 12 | responsive: true, |
| 13 | maintainAspectRatio: false, |
| 14 | scales: { |
| 15 | xAxes: [{ |
| 16 | ticks: { |
| 17 | stepSize: 1, |
| 18 | min: 0, |
| 19 | autoSkip: false |
| 20 | } |
| 21 | }], |
| 22 | yAxes: [{ |
| 23 | gridLines: { |
| 24 | display: true |
| 25 | }, |
| 26 | ticks: { |
| 27 | beginAtZero: true, |
| 28 | stepSize: 1, |
| 29 | min: 0, |
| 30 | userCallback: function (label) { |
| 31 | if (Math.floor(label) === label) { |
| 32 | return label |
| 33 | } |
| 34 | } |
| 35 | } |
| 36 | }] |
| 37 | } |
| 38 | } |
| 39 | } |
| 40 | }, |
| 41 | |
| 42 | methods: { |
| 43 | update (reRender) { |
| 44 | if (reRender) { |
| 45 | this.renderChart(this.data, this.options) |
| 46 | } |
| 47 | |
| 48 | this.$data._chart.update() |
| 49 | } |
| 50 | }, |
| 51 | |
| 52 | mounted () { |
| 53 | this.renderChart(this.data, this.options) |
| 54 | } |
| 55 | } |
| 56 |