Динамический График
13.10.2021, 14:20. Показов 1617. Ответов 3
Я хочу чтобы из значений, которые получаются из input они переносились в круговую диаграмму ну и обновлялись каждый новый ввод. Но вообще не понимаю как нужно связать переменные в dataset и как правильно использовать обнову.
файл about.vue
| Javascript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <template>
<div class="about">
<div class="container">
<div class="profile__div">
<img src="../components/user_person_profile_avatar_icon_190943.png" alt="">
<div class="buttom__prof">
<input v-model.number="myMoney" />
<div class="div__but">
<button class="but" @click="addMoney">Add</button>
<button class="but" @click="takeMoney">Take</button>
</div>
</div>
</div>
<div class="info__div">
<div class="state__line">
<h1 style="text-align:center;">dollar: {{this.dollar}}</h1>
</div>
<div class="char__div">
<pie-example/>
</div>
</div>
<div class="value__div">
<div class="value__money">$: {{dollar}}</div>
<div class="value__money">рубль: {{rub}}</div>
<div class="value__money">юань: {{uin}}</div>
</div>
</div>
</div>
</template>
<script>
import PieExample from '../components/PieExample'
export default {
components: {
PieExample,
},
data () {
return {
dataPoints: null,
height: 20,
myMoney: 0,
dollar: 0,
rub:0,
uin:0
}
},
mounted () {
setInterval(() => {
this.fillData()
}, 2000)
},
methods: {
addMoney() {
this.dollar += this.myMoney
this.rub += this.myMoney * 70
this.uin += this.myMoney * 111
},
takeMoney() {
this.dollar -= this.myMoney
this.rub -= this.myMoney * 70
this.uin -= this.myMoney * 111
},
increaseHeight () {
this.height += 10
},
fillData () {
this.dataPoints = {
labels: [],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: []
}
]
}
}
},
computed: {
myStyles () {
return {
height: `${this.height}px`,
position: 'relative'
}
}
}
}
</script> |
|
file BaseChart.js
| Javascript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| import Chart from 'chart.js'
export function generateChart (chartId, chartType) {
return {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: chartId,
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
generateLegend () {
if (this.$data._chart) {
return this.$data._chart.generateLegend()
}
},
renderChart (data, options) {
if (this.$data._chart) this.$data._chart.destroy()
if (!this.$refs.canvas) throw new Error('Please remove the <template></template> tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components')
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: chartType,
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}
}
export const Bar = generateChart('bar-chart', 'bar')
export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
export const Doughnut = generateChart('doughnut-chart', 'doughnut')
export const Line = generateChart('line-chart', 'line')
export const Pie = generateChart('pie-chart', 'pie')
export const PolarArea = generateChart('polar-chart', 'polarArea')
export const Radar = generateChart('radar-chart', 'radar')
export const Bubble = generateChart('bubble-chart', 'bubble')
export const Scatter = generateChart('scatter-chart', 'scatter')
export default {
Bar,
HorizontalBar,
Doughnut,
Line,
Pie,
PolarArea,
Radar,
Bubble,
Scatter
} |
|
file PieExample.js
| Javascript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import { Pie } from '../components/BaseCharts'
export default {
extends: Pie,
mounted () {
this.renderChart({
labels: ['backs', 'uin', 'Rub'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
],
data: [10,10,10]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
} |
|
0
|
(
Сообщение от ArtoriasDark
Сообщение было отмечено ArtoriasDark как решение
