Не обновляется график Chart.js при изменении переменной
пишу сайт на Vue с отображением некоторых данных на графике из библиотеки Chart.js
Есть таблица с данными, при нажатии на строку таблицы у меня должен передаваться индекс нажатой строки в файл для генерации графика (Chart.js), то есть из переменной selectedRowIndex через функцию readTypeChart записываться в переменную id
Проблема в том, что переменная selectedRowIndex передаётся и перезаписывает id (console.log(this.id) в файле Chart.js это подтверждает), есть анимация рендеринга графика, но при этом данные остаются прежними
Если же в файле Chart.js поменять let id = 0 на let id = 1, то график поменяется
Файл Vue.js:
<script>
import { Line } from 'vue-chartjs'
import { mapActions, mapGetters } from 'vuex'
export default {
extends: Line,
methods: {
...mapActions([
'fetchData',
'readTypeChart'
]),
onRowClick() { // Метод нажатия на строку таблицы (на него приходит evt, row, index)
this.selectedRowIndex = arguments[2] // Задаю переменной индекс нажатой строки
}
},
computed: {
...mapGetters([
'getChartData',
'getChartOptions'
])
},
async mounted() {
this.readTypeChart({type: this.typeChart, selectedRowIndex: this.selectedRowIndex}) // Передаю индекс в файл Chart.js
this.renderChart(this.getChartData, this.getChartOptions)
},
data () {
return {
typeChart: 'mounth',
selectedRowIndex: 0 // Переменная для хранения индекса строки таблицы
}
},
watch: {
selectedRowIndex() { // Слежу за изменениями переменной индекса, если меняется то передаю новые значения и делаю рендер графика
this.readTypeChart({type: this.typeChart, selectedRowIndex: this.selectedRowIndex})
this.renderChart(this.getChartData, this.getChartOptions)
}
}
}
</script>
Файл Chart.js:
import JSONData from '../../assets/Statistics.json'
let id = 0 // Переменная для перезаписи
export default {
actions: {
readTypeChart(ctx, type) { // Получаю индекс нажатой строки через type.selectedRowIndex
this.id = type.selectedRowIndex // Перезаписываю индекс нажатой строки
ctx.commit('updateChart', type)
}
},
mutations: {
updateChart(state, type) {
console.log(this.id)
if (type.type == 'mounth') {
state.data = state.mounthData // Перезаписываю данные для графика
} else if (type.type == 'year') {
state.data = state.yearData
}
}
}
state: {
mounthData: {
labels: [ ... ],
datasets: [
{
label: '...',
data: [ JSONData[0]['2021'][0]['05'][0]['27'][id].Unique ] // Данные для графика
}
]
}
data: [],
options: { ... }
},
getters: {
getChartData(state) { // Возвращаю новые данные
return state.data
},
getChartOptions(state) {
return state.options
}
}
}
Пример данных JSONData:
[
{
"2021": [
{
"05": [
{
"27": [
{
"Name": "Забанено", // Должно отображаться при id = 0
"Total": 12,
"Unique": 3
},
{
"Name": "Установлено принтеров", // Должно отображаться при id = 1
"Total": 43,
"Unique": 20
}
]
}
]
}
]
}
]
1 скриншот - В файле Vue selectedRowIndex = 0, в Chart.js let id = 0
2 скриншот - В файле Vue selectedRowIndex = 1, в Chart.js let id = 0
3 скриншот - В файле Vue selectedRowIndex = 0, в Chart.js let id = 1
4 скриншот - В файле Vue selectedRowIndex = 1, в Chart.js let id = 1



